.

.
Facebook scrooling and loading pagination

Facebook scrooling and loading pagination

10:24



ADD THIS SCRIPT OR CS ORJS FILE AND AJAX JQUERY FILE
<link rel="stylesheet" type="text/css" href="<?php JURI::root()?>css/fb-pagination.css" />


fb-pagination.css
  copy & paste this css & include it


.loading-bar {



 padding: 10px 20px;



 display: block;



 text-align: center;



 box-shadow: inset 0px -45px 30px -40px rgba(0, 0, 0, 0.05);



 border-radius: 5px;



 margin: 20px 0;



 font-size: 2em;



 font-family: "museo-sans", sans-serif;



 border: 1px solid #ddd;



 margin-right: 1px;



 font-weight: bold;



 cursor: pointer;



 position: relative;



}








.loading-bar:hover {



 box-shadow: inset 0px 45px 30px -40px rgba(0, 0, 0, 0.05);



}


















#travel {



 padding: 10px;



 background: rgba(0,0,0,0.6);



 border-bottom: 2px solid rgba(0,0,0,0.2);



 font-variant: normal;



 text-decoration: none;



}








#travel a {



 font-family: 'Georgia', serif;



 text-decoration: none;



 border-bottom: 1px solid #f9f9f9;



 color: #f9f9f9;



 font-size: 1.5em;



}


AND ADD THIS SCRIPT & copy paste this code in js file





<script>



(function($) {








 $.fn.scrollPagination = function(options) {



  



  var settings = {



   nop     : 10, // The number of posts per scroll to be loaded



   offset  : 0, // Initial offset, begins at 0 in this case



   error   : 'No More Memories!', // When the user reaches the end this is the message that is



                               // displayed. You can change this if you want.



   delay   : 500, // When you scroll down the posts will load after a delayed amount of time.



                  // This is mainly for usability concerns. You can alter this as you see fit



   scroll  : true // The main bit, if set to false posts will not load as the user scrolls.



                  // but will still load if the user clicks.



  }



  



  // Extend the options so they work with the plugin



  if(options) {



   $.extend(settings, options);



  }



  



  // For each so that we keep chainability.



  return this.each(function() {  



   



   // Some variables



   $this = $(this);



   $settings = settings;



   var offset = $settings.offset;



   var busy = false; // Checks if the scroll action is happening



                     // so we don't run it multiple times



   



   // Custom messages based on settings



   if($settings.scroll == true) $initmessage = 'Scroll for more or click here';



   else $initmessage = 'Click for more';



   



   // Append custom messages and extra UI



   $this.append('<div class="content"></div><div class="loading-bar">'+$initmessage+'</div>');



   



   function getData() {



    



    // Post data to ajax.php(ajax or file name where data get)



    $.post('<?php JURI::root();?>index.php?option=com_listloved&task=ajaxpagination.pagination&lid=<?php echo $_REQUEST['lid'];?>&year=<?php echo $_REQUEST['year'];?>', {



      



     action        : 'scrollpagination',



        number        : $settings.nop,



        offset        : offset,



       



    }, function(data) {



      



     // Change loading bar content (it may have been altered)



     $this.find('.loading-bar').html($initmessage);



      



     // If there is no data returned, there are no more posts to be shown. Show error



     if(data == "") {



      $this.find('.loading-bar').html($settings.error); 



     }



     else {



      



      // Offset increases



         offset = offset+$settings.nop;



        



      // Append the data to the content div



         $this.find('.content').append(data);



      



      // No longer busy! 



      busy = false;



     } 



      



    });



     



   } 



   



   getData(); // Run function initially



   



   // If scrolling is enabled



   if($settings.scroll == true) {



    // .. and the user is scrolling



    $(window).scroll(function() {



     



     // Check the user is at the bottom of the element



     if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {



      



      // Now we are working, so busy is true



      busy = true;



      



      // Tell the user we're loading posts



      $this.find('.loading-bar').html('Loading Memories');



      



      // Run the function to fetch the data inside a delay



      // This is useful if you have content in a footer you



      // want the user to see.



      setTimeout(function() {



       



       getData();



       



      }, $settings.delay);



       



     } 



    });



   }



   



   // Also content can be loaded by clicking the loading bar/



   $this.find('.loading-bar').click(function() {



   



    if(busy == false) {



     busy = true;



     getData();



    }



   



   });



   



  });



 }








})(jQuery);








</script>

ADD THIS SCRIPT IN PHP FILEWHERE USE


<script>








$(document).ready(function() {








 $('#content').scrollPagination({








  nop     : 10, // The number of posts per scroll to be loaded



  offset  : 0, // Initial offset, begins at 0 in this case



  error   : 'No More Memories!', // When the user reaches the end this is the message that is



                              // displayed. You can change this if you want.



  delay   : 500, // When you scroll down the posts will load after a delayed amount of time.



                 // This is mainly for usability concerns. You can alter this as you see fit



  scroll  : true // The main bit, if set to false posts will not load as the user scrolls.



                 // but will still load if the user clicks.



  



 });



 



});








</script>
// this id where data or rows fetch or show


<div id="content">



 



 








</div>


NOW ajaxpagination.php or which file where using qury or fetch data
it is in joomla but using this way
this is using function but we can use any way joomla


public function pagination()



 {



  



  $app = JFactory::getApplication();



  $model = $this->getModel('listloved');



   $offset = is_numeric($_POST['offset']) ? $_POST['offset'] : die();// it comes by scrolling by default



   $postnumbers = is_numeric($_POST['number']) ? $_POST['number'] : die();;// it comes by scrolling by default



  



  








  $user = JFactory::getUser();



  $loggeduserid=$user->id;



  $lid = base64_decode($_REQUEST['lid']);



  $lovedone=$model->getsingleLovedone($lid);



  $row = $lovedone[0];



  $memoriesdetails=$model->getmemories($lid,$postnumbers,$offset);



  //echo $memoriesdetails;



  //$rows = $model->getCemetryByOthers($arr);



  //print_r($rows);



        // Now update the loaded data to the database via a function in the model



  //$num = count($rows);



  foreach( $memoriesdetails as $memory){?>



  <div class="panel">



<div class="img"><img src="<?php echo JURI::root()?>images/user_photos/<?php echo $memory->image;?>" width="40" height="40" alt="" /></div>








<?php if($memory->userid == $loggeduserid)



{



?>








<a href="<?php echo JURI::base().'index.php?option=com_listloved&layout=flowerwall&lid='.base64_encode($memory->lid).'&year='.$memory->year.'&memid='.$memory->mem_id;?>"><img src="images/delete.png" alt="" border="0" /></a>



<?php }?>



<!--<a href="#"><img src="images/delete.png" alt="" border="0" /></a>-->



<div class="left">



<a href="<?php echo JURI::root();?>index.php?option=com_listloved&layout=senderinfo&id=<?php echo base64_encode($memory->userid);?>" target="_blank"><?php echo $memory->name;?></a> Added Memory To <a href="<?php echo JURI::root();?>index.php?option=com_listloved&layout=lovedone&lid=<?php echo base64_encode($row->lid);?>" target="_blank""><?php echo $row->f_name.'&nbsp;&nbsp;'.$row->l_name;?></a></div>








<div class="big">



<p><?php echo $memory->memories;?></p>



<?php if($memory->mem_image){ ?><img src="<?php echo JURI::base();?>images/memory/<?php echo $memory->mem_image;?>" alt="" width="498"  />



<?php



}



?>



</div>























</div>



<?php }



   $app->close();








  return true;



  



 



  



  }




Now where data comes from which model or by function model.php or query



public function getmemories($lid,$postnumbers,$offset)



{



 $db = JFactory::getDBO();



 $query = $db->getQuery(true);



 



 $query="SELECT * FROM #__memories as a INNER JOIN #__users as b ON a.userid = b.id WHERE a.lid = '".$lid."'  ORDER BY a.mem_id DESC LIMIT ".$postnumbers." OFFSET ".$offset;








 



 



 //return $query;



 /*$query->select('*');



     $query ->from($db->quoteName('#__memories', 'a'));



     $query ->join('INNER', $db->quoteName('#__users', 'b') . ' ON (' . $db->quoteName('a.userid') . ' = ' . $db->quoteName('b.id') . ')');



     $query ->where($db->quoteName('a.lid') ." = ".$db->quote($lid));



     $query->order($db->quoteName('a.mem_id') . ' DESC');



  $query->setLimit($postnumbers,$offset);*/







  $db->setQuery($query);



 $rows = $db->loadObjectList();



 return $rows;



}






EmoticonEmoticon

Subscribe to: Post Comments (Atom)