PHP Lang
  1. PHP Lang
  3. Загружать данные в прокрутку вверх, как в чате, в чате
Intereting Posts
Необходимое поле (ы) отсутствует результат Узнайте, существует ли метод в статическом классе fullCalendar ignoreTimezone, похоже, не работает Теги PHPExcel Render html в строке таблицы mysql Помощь PHP с сбросом пароля и истечением срока действия токена Проблемы с кодировкой CodeIgniter и URL-адрес перезаписи Какой PHP-код эмулирует поведение array_merge_recusive? Фундаментальные базы данных PHP .htaccess переписать переменные GET Laravel – принудительный выход определенного пользователя по идентификатору пользователя foreach checkbox POST в php Создание блока / модулей в кодовом зажигателе Необходимо загрузить изображение более 2 МБ Как издеваться над встроенными функциями php socket? Получить записи Cname с помощью NetDNS или get_dns_record

Загружать данные в прокрутку вверх, как в чате, в чате

Я разрабатываю чат-систему, где мне нужно отображать историю чата при прокрутке вверх, например, в системе чата Facebook.

Кто-нибудь может мне помочь?

Будет что-то вроде этого …

HTML 

<div id="chatBox"> <div class='inner'> <?php foreach($messages as $m){;?> <div class='message'><?php echo $m;?></div> <?php ;};?> </div> </div>

Jquery 

 $(document).ready(function(){ $("#chatBox").scrollTop($("#chatBox")[0].scrollHeight); $('#chatBox').scroll(function(){ if ($('#chatBox').scrollTop() == 0){ // Do Ajax call to get more messages and prepend them // To the inner div // How you paginate them will be the tricky part though // You'll likely have to send the ID of the last message, to retrieve 5-10 'before' that $.ajax({ url:'getmessages.php', data: {idoflastmessage:id}, // This line shows sending the data. How you get it is up to you dataType:'html', success:function(data){ $('.inner').prepend(data); $('#chatBox').scrollTop(30); // Scroll alittle way down, to allow user to scroll more }; }); } }); });

ПРИМЕР ЗДЕСЬ 

 // GENERATE FIRST BATCH OF MESSAGES //This will be where you do your SQL and PHP first for(var i=0;i<20;i++){ $('.inner').prepend('<div class="messages">First Batch messages<br/><span class="date">'+Date()+'</span> </div>');} $("#chatBox").scrollTop($("#chatBox")[0].scrollHeight); // Assign scroll function to chatBox DIV $('#chatBox').scroll(function(){ if ($('#chatBox').scrollTop() == 0){ // Display AJAX loader animation $('#loader').show(); // Youd do Something like this here // Query the server and paginate results // Then prepend /* $.ajax({ url:'getmessages.php', dataType:'html', success:function(data){ $('.inner').prepend(data); }; });*/ //BUT FOR EXAMPLE PURPOSES...... // We'll just simulate generation on server //Simulate server delay; setTimeout(function(){ // Simulate retrieving 4 messages for(var i=0;i<4;i++){ $('.inner').prepend('<div class="messages">Newly Loaded messages<br/><span class="date">'+Date()+'</span> </div>'); } // Hide loader on success $('#loader').hide(); // Reset scroll $('#chatBox').scrollTop(30); },780); } }); 
 body {font-family:Arial;} #chatBox {width:300px;height:400px;border: 1px solid;overflow:scroll} #loader {display:none;} .messages {min-height:40px;border-bottom:1px solid #1f1f1f;} .date {font-size:9px;color:#1f1f1f;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chatBox"> <!--Loading ANIMATION--> <img id="loader" src='http://img.ruphp.com/javascript/loader64.gif'> <!--END LOADING ANIMATION--> <div class='inner'> <!-- WHERE YOU WILL LOAD CONTENT--> </div> </div>