التحكم في الشريط الجانبي للمحادثة مثل الواتساب والفيسبوك

Hamada Ahmed · 24 أغسطس 2021

السلام عليكم ورحمة الله اخواني الأفاضل

نرى في محادثات الواتساب عند تحميل المحادثة يتحرك الشريط الجانبي لأسفل وعند ورود رسالة جديدة يتحرك ايضا الى أسفل المحادثة وعندما نرتفع لأعلى لقرائة الرسائل القديمة اذا كانت هناك رسالة واردة يظهر سهم عند الضغط عليه يتحرك الشريط الجانبي الى اسفل المحادثة

اتسائل هل هذا الأمر صعب التطبيق وهل يمكن تنفيذه في البرنامج التالي حيث عند اعادة تحميل الصفحة يتحرك الشريط لأسفل وعند ورود رسالة جديدة يتحرك الشريط لأسفل وعند قراءة الرسائل القديمة يتوقف الشريط الجانبي عن التحرك التلقاءي

<div class="div_show_message_groups" id="div_show_message_groups">

</div>
<script>
$(document).ready(function(e)
{
function getMessages(letter) 
{
var message=$('#div_show_message_groups');
$.get('show_pages/display_messages_groups.php', function(data) 
{
message.html(data);
});
}
setInterval(function() 
{
getMessages("letter");
}, 100)	
//.......
$("#messages_form_groups").on('submit', function(e)
{
e.preventDefault();
$.ajax
({
type: 'POST',
url: 'send_pages/send_messages_form_groups.php',
data: new FormData(this),
dataType: 'json',
contentType: false,
cache: false,
processData:false,
success: function(response)
{ 
if(response.status == 1)
{
$('#messages_form_groups')[0].reset();
}
}
});
});
});
</script>

سامح أشرف · 24 أغسطس 2021

إذا أردت عرض سهم جانبي عندما تقوم بالتحرك إلى الأعلى (عند قراءة الرسائل القديمة)، فيمكنك أن تقوم بذلك من خلال التابع scroll كالتالي:

var div = $('#div1')
$(window).scroll(function() {
    // إذا كان موضعنا في الصفحة فوق نهاية العنصر div
    if (div.prop("scrollHeight") > window.scrollY) {
        $('#toBottom').fadeIn();
    } else {
        $('#toBottom').fadeOut();
    }
})

Adnane Kadri · 24 أغسطس 2021

بالإضافة إلى ما قام المدرب سامح بشرحه يمكننا تلخيص الوظيفة في دالة مستقلة تماما يتم إستدعاءها عند الحاجة لها .

لنقم أولا بتعريف الدالة المسؤولة عن العملية :

function scrollToBottom()
{
    var div = $('#div1');
    
    div.scrollTop(div.prop("scrollHeight"));
}

لنقم الان بإستدعاء الدالة في كل من الوظائف المعبر عنها بهاته الحالات :

اقتباس

1- لو تم تحديث الصفحة يتحرك الشريط لاسفل

أي أن الدالة تستدعى عند كل تحميل لموارد الصفحة :

scrollToBottom();

اقتباس

2 - لو عرضت رسالة جديدة يتحرك الشريط لاسفل

نحتاج في هذا تعقب الوظيفة المسؤولة عن عرض رسائل جديدة و إستدعاء الدالة المسؤولة عن تعديل الاسكرول عند كل عرض لرسالة جديدة . أي :

<script>
   $(document)
      .ready(function(e) {
         function getMessages(letter) {
            var message = $('#div_show_message_groups');
            $.get('show_pages/display_messages_groups.php', function(data) {
               message.html(data);
              
               // ضبط الشريط الجانبي بعد كل تضمين لرسالة جديدة 
               scrollToBottom();
            });
         }
      });
</script>

اقتباس

3 - لو كان المستخدم يتحرك بالشريط لاعلى واتت رسالة جديدة لا يتحرك الشريط لاسفل

هاته العملية هي خطوتان مركبتان , نحتاج أولا تعقب إرسال رسائل جديدة و إستدعاء الدالة عند كل تضمين (وهو ما تم عمله بالفعل في الخطوة الثانية) , و ثانيا : التحقق من أن المستخدم لا يقوم بتحريك الشريط للأعلى .

لنقم بتعريف متغير يحمل قيمة بوليانية تعبر عن ما إن كان المستخدم يقوم بتحريك الشريط أو لا , و لنقم بربط هذا بفترة تقوم بالتحقق ما إن توقف المستخدم بتحريك الشريط أو لا :

var myDiv = $('#div1');
var userIsScrolling = false;

/*يتم تغيير فيمة المتغير عند كل تحريك للشريط الجانبي*/
myDiv.scroll(function(){
     userIsScrolling = true;
});


/*ان توقفف المستخدم عن تحريك الشريط الجانبي لأكثر من ثلاث ثواني سيتم تغيير قيمة المتغير*/
setInterval(function(){
   
   userIsScrolling = false;
  
}, 3000);

ثم سيتم إستعمال قيمة هذا التغير في التحقق قبل ضبط الشريط الجانبي عند كل إرسال لرسالة جديدة :

<script>
   $(document)
      .ready(function(e) {
         function getMessages(letter) {
            var message = $('#div_show_message_groups');
            $.get('show_pages/display_messages_groups.php', function(data) {
               message.html(data);
              
               // ضبط الشريط الجانبي للأسفل عند كل رسالة جديدة , و في حالة عدم تحريكه من طرفف المستخدم
               if(! userIsScrolling){ scrollToBottom(); }
               
            });
         }
      });
</script>

ثم لنقم بدمج الشيفرة كاملة , لتكون :

$(document)
   .ready(function(e) {
      /*الوظيفة المسؤولة عن عمل الاسكرول*/
      function scrollToBottom() {
         var div = $('#div1');

         div.scrollTop(div.prop("scrollHeight"));
      }

      /*استدعاء الدالة عند كل تحميل جديد للصفحة*/
      scrollToBottom();


      var userIsScrolling = false;
      /*يتم تغيير فيمة المتغير عند كل تحريك للشريط الجانبي*/
      $('#div1')
         .scroll(function() {
            userIsScrolling = true;
         });


      /*ان توقفف المستخدم عن تحريك الشريط الجانبي لأكثر من ثلاث ثواني سيتم تغيير قيمة المتغير*/
      setInterval(function() {
         userIsScrolling = false;
      }, 3000);

      /*الدالة المسؤولة عن جلب الرسائل من الواجهة الخلفية*/
      function getMessages(letter) {
         var message = $('#div_show_message_groups');
         $.get('show_pages/display_messages_groups.php', function(data) {
            message.html(data);

            // ضبط الشريط الجانبي للأسفل عند كل رسالة جديدة , و في حالة عدم تحريكه من طرفف المستخدم
            if (!userIsScrolling) {
               scrollToBottom();
            }
         });
      }
      setInterval(function() {
         getMessages("letter");
      }, 100)

      /*إرسال طلب إلى الواجهة الخلفية بتسجيل رسالة جديدة*/
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                  }
               }
            });
         });

   });

و بالطبع فإنه يمكنك التعديل من سلوك التحريك كإضافة بعض الأنيميشن أو ربما تغيير المهلة التي يتم فيها إعتبار أن المستخدم توقف عن السكرول .

تأكد فقط أن الكثير من الأفكار قد تحتاج تجزئة و تبسيط لها ,و لما لا نمذجة في سبورة أو ورقة , فهو صحيح أن البرمجة ومفاهيمها أشياء تجريدية , و لكنها تنطلق من الواقع و تحاول نمذجته و تبسيطه و لذلك حاول دوما تقسيم الفكرة إلى أفكار جزئية و لا يجب عليك أبدا النظر إلى أية فكرة بمجملها كفكرة واحدة موحدة غير قابلة للتقسيم .

عبدالباسط ابراهيم · 24 أغسطس 2021

يعتبر الموضوع بسيط حيث يمكنك التحكم في ال scroll من خلال الخاصية scrollTop بواسطة javascript لاحظ الكود التالي من خلال jquery

var div = $('#div1');
div.scrollTop(div.prop("scrollHeight"));

و إذا كنت تريد التحرك ب animation يمكنك استخدام الكود التالي

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

الكود السابق يقوم بتحريك الصفحة لأسفل ال div المحدد يمكنك استخدام هذا الكود ضمن موقعك كما تريد

Wael Aljamal · 24 أغسطس 2021

بتاريخ 1 ساعة قال Hamada Ahmed:

1-لو تم تحديث الصفحة يتحرك الشريط لاسفل

هذه الجزئية يجب أن تكون متاحة للتنفيذ بعد اكتمال عرض الصفحة و ضمان تحميل محتوى المحادثات القديمة أي نفذها بعد اكتمال جلب البيانات (دع الاستعلام يجلب آخر 20 رسالة مثلا)

بتاريخ 1 ساعة قال Hamada Ahmed:

2 - لو عرضت رسالة جديدة يتحرك الشريط لاسفل

لايفضل تحريك الصفحة تلقائياً بعد ورود رسالة جديدة، إنما لاحظ فيسبوك تعرض رمز صغير وبالنقر عليه يتم عمل إنزلاق لنهاية المحادثة،

بتاريخ 1 ساعة قال Hamada Ahmed:

3 - لو كان المستخدم يتحرك بالشريط لاعلى واتت رسالة جديدة لا يتحرك الشريط لاسفل

أعتقد من الأفضل أن تضع زر أيقونة يظهر فقط في حالة لم يكن المستخدم يستعرض آخر رسالة وبالنقر عليه يتم الإنزلاق لتعرض آهخر رسالة (أضف action listener) لرسالة جديدة وضع فيها أن مكان عرض القسم ليس بكامل الارتفاع فيظهر الزر، وعند نقر الزر نعمل إنزلاق

*****

أي تضع أيقونة مخفية بشكل افتراضي فوق شريط الكتابة ضمن المحادثة مع عرض مخفي display : none
بعد ورود رسالة جديدة إن كان المستخدم في آخر جزء في أسفل قسم عرض الرسائل يتم تحميل الرسالة الجديدة فقط
إن كان المستخدم في مكان آخر من المحادثة تظهر الأيقونة لتدل على ورود رسالة جديدة وبالنقر عليها تعمل إنزلاق

لمعرفة ارتفاع التمرير للعنصر نقرأ القيمة من جيكويري:

$('#div1').prop("scrollHeight")

وبمقارنها مع ارتفاع العنصر الكامل نعلم هل المستخدم في آخر جزء من الصفحة أو كلا وعليه نضع باقي الشروط..

وقم بإخفاء الأيقونة بعد تنفيذ دالة الانتقال أو قبلها animate:

$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);

Hamada Ahmed · 24 أغسطس 2021

بتاريخ 1 ساعة قال عبدالباسط ابراهيم:
يعتبر الموضوع بسيط حيث يمكنك التحكم في ال scroll من خلال الخاصية scrollTop بواسطة javascript لاحظ الكود التالي من خلال jquery
var div = $('#div1');
div.scrollTop(div.prop("scrollHeight"));
و إذا كنت تريد التحرك ب animation يمكنك استخدام الكود التالي
$("#div1").animate({ scrollTop: $('#div1').prop("scrollHeight")}, 1000);
الكود السابق يقوم بتحريك الصفحة لأسفل ال div المحدد يمكنك استخدام هذا الكود ضمن موقعك كما تريد

لكن بهذه الطريقة سيظل الشريط الجانبي للأسفل دائما ولن نتمكن من قراءة اي رسائل قديمة

أظن ان الحل هو وضع مجموعة شروط if قبل وضع الكود الذي قدمته لكن انا لا اعرف كيف يتم وضع هذه الشروط مثلا -

1-لو تم تحديث الصفحة يتحرك الشريط لاسفل

2 - لو عرضت رسالة جديدة يتحرك الشريط لاسفل

3 - لو كان المستخدم يتحرك بالشريط لاعلى واتت رسالة جديدة لا يتحرك الشريط لاسفل

انا لا اعرف كيف يمكن ترجمة ذلك الى اكواد

Hamada Ahmed · 24 أغسطس 2021

شكرا للأخوة الأفاضل @عبدالباسط ابراهيم @سامح أشرف @Adnane Kadri @Wael Aljamal

تم تجريب الكود حرفيا كالتالي ... لكن التحرك التلقائي للأسفل لا يترك فرصة لقراءة الرسائل القديمة هناك حلقة مفقودة في الموضوع انا قمت بوضع div_show_message_groups بدلا من div1

الكود كما جربت

</div>
<script>
$(document)
   .ready(function(e) {
      /*الوظيفة المسؤولة عن عمل الاسكرول*/
      function scrollToBottom() {
         var div = $('#div_show_message_groups');
         div.scrollTop(div.prop("scrollHeight"));
      }
      /*استدعاء الدالة عند كل تحميل جديد للصفحة*/
      scrollToBottom();
      var userIsScrolling = false;
      /*يتم تغيير فيمة المتغير عند كل تحريك للشريط الجانبي*/
      $('#div_show_message_groups')
         .scroll(function() {
            userIsScrolling = true;
         });
      /*ان توقفف المستخدم عن تحريك الشريط الجانبي لأكثر من ثلاث ثواني سيتم تغيير قيمة المتغير*/
      setInterval(function() {
         userIsScrolling = false;
      }, 3000);
      /*الدالة المسؤولة عن جلب الرسائل من الواجهة الخلفية*/
      function getMessages(letter) {
         var message = $('#div_show_message_groups');
         $.get('show_pages/display_messages_groups.php', function(data) {
            message.html(data);
            // ضبط الشريط الجانبي للأسفل عند كل رسالة جديدة , و في حالة عدم تحريكه من طرفف المستخدم
            if (!userIsScrolling) {
               scrollToBottom();
            }
         });
      }
      setInterval(function() {
         getMessages("letter");
      }, 100)
      /*إرسال طلب إلى الواجهة الخلفية بتسجيل رسالة جديدة*/
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                  }
               }
            });
         });
   });
</script>

Adnane Kadri · 25 أغسطس 2021

بتاريخ 13 ساعات قال Hamada Ahmed:

شكرا للأخوة الأفاضل @عبدالباسط ابراهيم @سامح أشرف @Adnane Kadri @Wael Aljamal

تم تجريب الكود حرفيا كالتالي ... لكن التحرك التلقائي للأسفل لا يترك فرصة لقراءة الرسائل القديمة هناك حلقة مفقودة في الموضوع انا قمت بوضع div_show_message_groups بدلا من div1

الكود كما جربت

<style type="text/css">

</style>
<script src="js/jquery-3.6.0.min.js"></script>
<div class="div_show_message_groups" id="div_show_message_groups">

</div>
<script>
$(document)
   .ready(function(e) {
      /*الوظيفة المسؤولة عن عمل الاسكرول*/
      function scrollToBottom() {
         var div = $('#div_show_message_groups');
         div.scrollTop(div.prop("scrollHeight"));
      }
      /*استدعاء الدالة عند كل تحميل جديد للصفحة*/
      scrollToBottom();
      var userIsScrolling = false;
      /*يتم تغيير فيمة المتغير عند كل تحريك للشريط الجانبي*/
      $('#div_show_message_groups')
         .scroll(function() {
            userIsScrolling = true;
         });
      /*ان توقفف المستخدم عن تحريك الشريط الجانبي لأكثر من ثلاث ثواني سيتم تغيير قيمة المتغير*/
      setInterval(function() {
         userIsScrolling = false;
      }, 3000);
      /*الدالة المسؤولة عن جلب الرسائل من الواجهة الخلفية*/
      function getMessages(letter) {
         var message = $('#div_show_message_groups');
         $.get('show_pages/display_messages_groups.php', function(data) {
            message.html(data);
            // ضبط الشريط الجانبي للأسفل عند كل رسالة جديدة , و في حالة عدم تحريكه من طرفف المستخدم
            if (!userIsScrolling) {
               scrollToBottom();
            }
         });
      }
      setInterval(function() {
         getMessages("letter");
      }, 100)
      /*إرسال طلب إلى الواجهة الخلفية بتسجيل رسالة جديدة*/
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                  }
               }
            });
         });
   });
</script>

لتفادي المشكل يمكننا تكبير المهلة الزمنية التي يتم فيها التحقق ما إن كان المستخدم قد قام بتحريك الشريط الجانبي إلى مهلة تراها مناسبة أكثر ، يمكننا بهذا إعطاء المستخدم وقتا أكثر لقراءة الرسائل بدون عمل أي إنزلاق للشريط الجانبي .

Hamada Ahmed · 25 أغسطس 2021

بتاريخ 2 ساعات قال Adnane Kadri:

لتفادي المشكل يمكننا تكبير المهلة الزمنية التي يتم فيها التحقق ما إن كان المستخدم قد قام بتحريك الشريط الجانبي إلى مهلة تراها مناسبة أكثر ، يمكننا بهذا إعطاء المستخدم وقتا أكثر لقراءة الرسائل بدون عمل أي إنزلاق للشريط الجانبي .

قمت بتكبيرها الى 9000 لكنها غير كافية للتحرك لأعلى وتكبيرها أكثر من ذلك سيتسبب في تأخر الرسائل الواردة وأيضا لا يمنع من التحرك التلقائي لأسفل عند انتهاء هذا الزمن مهما كان كبيرا - فى الواتس مهما استغرق الزمن للتحرك لأعلى لا ينزلق الشريط لأسفل - لا اعرف ما الطريقة المستخدمة في مثل هذه المحادثات

Wael Aljamal · 25 أغسطس 2021

بتاريخ 11 دقائق مضت قال Hamada Ahmed:

قمت بتكبيرها الى 9000 لكنها غير كافية للتحرك لأعلى وتكبيرها أكثر من ذلك سيتسبب في تأخر الرسائل الواردة وأيضا لا يمنع من التحرك التلقائي لأسفل عند انتهاء هذا الزمن مهما كان كبيرا - فى الواتس مهما استغرق الزمن للتحرك لأعلى لا ينزلق الشريط لأسفل - لا اعرف ما الطريقة المستخدمة في مثل هذه المحادثات

هذه الأحداث غير متزامة، أرجو فصل موضوع تحديث الرسائل عن عمل إنزلاق للرسالة الحديثة واجعلها منفصلة مرتبطة بحدث نقر للمستخدم كما حاولت التوضيح في الإجابة السابقة.

Hamada Ahmed · 25 أغسطس 2021

بتاريخ 3 ساعات قال Wael Aljamal:

هذه الأحداث غير متزامة، أرجو فصل موضوع تحديث الرسائل عن عمل إنزلاق للرسالة الحديثة واجعلها منفصلة مرتبطة بحدث نقر للمستخدم كما حاولت التوضيح في الإجابة السابقة.

هل تقصد أن الكود يحتاج الى اعادة ترتيب اذا كان الامر كذلك فان الكود كاملا هكذا

</div>
<script>
$(document)
   .ready(function(e) {
      /*الوظيفة المسؤولة عن عمل الاسكرول*/
      function scrollToBottom() {
         var div = $('#div_show_message_groups');
         div.scrollTop(div.prop("scrollHeight"));
      }
      /*استدعاء الدالة عند كل تحميل جديد للصفحة*/
      scrollToBottom();
      var userIsScrolling = false;
      /*يتم تغيير فيمة المتغير عند كل تحريك للشريط الجانبي*/
      $('#div_show_message_groups')
         .scroll(function() {
            userIsScrolling = true;
         });
      /*ان توقفف المستخدم عن تحريك الشريط الجانبي لأكثر من ثلاث ثواني سيتم تغيير قيمة المتغير*/
      setInterval(function() {
         userIsScrolling = false;
      }, 3000);
      /*الدالة المسؤولة عن جلب الرسائل من الواجهة الخلفية*/
      function getMessages(letter) {
         var message = $('#div_show_message_groups');
         $.get('show_pages/display_messages_groups.php', function(data) {
            message.html(data);
            // ضبط الشريط الجانبي للأسفل عند كل رسالة جديدة , و في حالة عدم تحريكه من طرفف المستخدم
            if (!userIsScrolling) {
               scrollToBottom();
            }
         });
      }
      setInterval(function() {
         getMessages("letter");
      }, 100)
      /*إرسال طلب إلى الواجهة الخلفية بتسجيل رسالة جديدة*/
      $("#messages_form_groups")
         .on('submit', function(e) {
            e.preventDefault();
            $.ajax({
               type: 'POST',
               url: 'send_pages/send_messages_form_groups.php',
               data: new FormData(this),
               dataType: 'json',
               contentType: false,
               cache: false,
               processData: false,
               success: function(response) {
                  if (response.status == 1) {
                     $('#messages_form_groups')[0].reset();
                  }
               }
            });
         });
   });
</script>

هل تتفضل مهندس وائل وتعدله لي مع الشكر والامتنان

Wael Aljamal · 25 أغسطس 2021

بتاريخ 58 دقائق مضت قال Hamada Ahmed:

هل تتفضل مهندس وائل وتعدله لي مع الشكر والامتنان

عليك عمل التعديلات بنفسك، ليس هدفنا حل المشاكل إنما شرح افضل طريقة لعملها، ثم إصلاح الأخطاء إن ظهرت.

خذ كامل وقتك في فهم الخطوات و حاول تطبيقها.

التحكم في الشريط الجانبي للمحادثة مثل الواتساب والفيسبوك

السؤال

Hamada Ahmed

11 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

Adnane Kadri

عبدالباسط ابراهيم

Wael Aljamal

Hamada Ahmed

Hamada Ahmed

Adnane Kadri

Hamada Ahmed

Wael Aljamal

Hamada Ahmed

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية