i wrote some jquery script to perform infinite scroll WordPress posts on magento site, here you go
<style> /*hide the toolbars */ .pager.pager-no-toolbar{ display:none; } /* biar kelap kelip */ .blink_me { -webkit-animation-name: blinker; -webkit-animation-duration: 1s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-name: blinker; -moz-animation-duration: 1s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; animation-name: blinker; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: infinite; } @-moz-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @-webkit-keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } @keyframes blinker { 0% { opacity: 1.0; } 50% { opacity: 0.0; } 100% { opacity: 1.0; } } </style> <script> $j = jQuery.noConflict(); $j(document).ready(function(e) { var container_index = 0; var current_page = <?php echo $this->getRequest()->getParam('page') + 0; ?> ; var current_url = window.location.href; var base_url = ''; if(current_page == 0) current_page = 1; $j(window).scroll(function() { if($j(window).scrollTop() + $j(window).height() == $j(document).height()) { $j('.post-list').append('<h2 class="load-notif blink_me">Loading.....</h3>'); $j('.post-list').append('<div class="load_contain'+container_index+'"></div>'); current_page = current_page + 1; $j('.post-list .load_contain'+container_index).load(current_url+'?page='+current_page+' .post-list > * ', function( response, status, xhr ) { if(status == 'success'){ $j('.load-notif').remove(); }; }); container_index++; } }); }); </script>
Be First to Comment