Некоторые веб-сайты, такие как Twitter используют бесконечную прокрутку страницы. Это означает, что все содержимое динамически загружается на одной странице до тех пор, как вы прокручиваете вниз. Я уже писал о подобном jQuery плагине, в том числе и для WordPress. Вот еще один способ реализации такой прокрутки. Сначала HTML-разметка:



<div id="loadingbar" style="display:none;position:fixed;bottom:0;left:0;right:0;background-color:#000;color:#FFF;text-align:center;"><b><i>Загрузка следующих 50...</i></b></div>

<!-- Скрытое поле с количеством загружаемых строк -->

<input type="hidden" value='50' id="loaded_max" />

<!-- -->

LINE #0: Просто какой-то текст.<br/>

...

LINE #50: Просто какой-то текст.<br/>

Теперь, сам фрагмент который подгружает строки из файла load.php в количестве, указанном в скрытом поле.



$(document).ready(function() {

   $('#loaded_max').val(50);

});

var loading = false;

$(window).scroll(function(){

   if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

      if(loading == false){

         loading = true;

         $('#loadingbar').css("display","block");

         $.get("load.php?start="+$('#loaded_max').val(), function(loaded){

            $('body').append(loaded);

            $('#loaded_max').val(parseInt($('#loaded_max').val())+50);

            $('#loadingbar').css("display","none");

            loading = false;

         });

      }

   }

});

И на последок исходный код файла load.php который генерирует строки с текстом.



<?php

$_GET['start'] = preg_replace('~[^0-9]~','',$_GET['start']); // simple force num

for($i=intval($_GET['start']);$i<=($_GET['start']+50);$i++){

   echo 'LINE #'.$i.': Просто какой-то текст.<br/>';

}

?>

Изменение размера изображения средствами JQuery

Следующий фрагмент может пригодится для того, чтобы иметь возможность изменить размер изображений.



$(window).bind("load", function() {

   // IMAGE RESIZE

   $('img').each(function() {

      var maxWidth = 120;

      var maxHeight = 120;

      var ratio = 0;

      var width = $(this).width();

      var height = $(this).height();

   

      if(width > maxWidth){

         ratio = maxWidth / width;

         $(this).css("width", maxWidth);

         $(this).css("height", height * ratio);

         height = height * ratio;

      }

      var width = $(this).width();

      var height = $(this).height();

      if(height > maxHeight){

         ratio = maxHeight / height;

         $(this).css("height", maxHeight);

         $(this).css("width", width * ratio);

         width = width * ratio;

      }

   });

});