اذهب إلى المحتوى
  • 0

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

Hamada Ahmed

السؤال

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

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

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

<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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 2

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

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

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 2

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

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

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();
                  }
               }
            });
         });

   });

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1

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

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1
بتاريخ 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);

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 - لو كان المستخدم يتحرك بالشريط لاعلى واتت رسالة جديدة لا يتحرك الشريط لاسفل

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

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

<style type="text/css">
<!--
.div_show_message_groups{
overflow-y:auto;
height:350px;
width:485px;
margin:0px;
}
-->
</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>

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

<style type="text/css">
<!--
.div_show_message_groups{
overflow-y:auto;
height:350px;
width:485px;
margin:0px;
}
-->
</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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

<style type="text/css">
<!--
.div_show_message_groups{
overflow-y:auto;
height:350px;
width:485px;
margin:0px;
}
-->
</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>

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...