Блог арт-директора

Столкнулись с такой задачей: дизайн сайта ограничивает количество текста в высоту (на сайте текст выводится на листики А4, которые по задумке должны иметь настоящие пропорции, так что «растягивать» их в высоту нельзя.

Делать постраничный вывод текст на PHP — накладно из-за и без того сложной структуры URL. Решили делать на Javascript.

Идея:

• Определить максимально допустимую высоту блока (без растяжения по высоте)
• Разбить высоту блока с текстом на подблоки допустимой высоты
• Показывать необходимый подблок, остальные скрывать

Все просто. И занимает не так уж много времени в реализации.

Реализация:

Есть 2 пути реализации:

1. Действительно скрывать не нужные блоки через значение display
2. Сделать что-то вроде видоискателя проектора, и проходящего мимо него пленки, когда у нас есть 2 блока: контайнер текста и контейнер контейнера. Мы просто сдвигаем контейнер текста внутри контейнера контейнера, тем самым обнажая нужную часть блока.

Мы выбрали второй способ (он быстрее выполняется на клиенте, а значит больше нам подходит).

Итак, у нас должен быть такой html:

<div id=pagewrap><!--Контейнер контейнера (объектив)-->

<div id=page> <!--Здесь полный текст, который нужно вывести постранично --> </div>

</div>

<div id=pages><!--Блок, в который мы добавим ссылки-переключатели страниц--></div>

Теперь Javascript:

$(document).ready(function(){

…говорим, чтоб выполнилось сразу после полной загрузки страницы…

$('#pageWrap').css('overflow','hidden').css('position','relative');

$('#pager').css('position','absolute').css('left','0px').css('top','0px');

[/soursecode]

...устанавливаем css для контейнера с текстом и объектива...

Объектив должен скрывать все, что вылазит за края (overflow: hidden), а контейнер текста должаен быть абсолютно позиционирован, чтобы «ползать» по всему объективу.

[sourcecode language="javascript"]

var pages=$('#pager').height()/pageHeight;

totalPages=pages;
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 876px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[/soursecode]</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 876px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">[sourcecode language="javascript"]</div>
[/soursecode]

...считаем количество страниц...

[sourcecode language="javascript"]

for(i=0;i<=pages;i++)

{

var a=document.createElement('a');

a.href='#';

if(i==0) a.className='curPage ';

a.onclick=function()

{

showPage(this.id.replace('_page',''));

}

a.id=i+'_page';

a.innerHTML=i+1;

a.className+=' pagination';

$('#pages').append(a);

}

[/soursecode]

...создаем ссылки на страницы...

[sourcecode language="javascript"]

});

Так. Осталась только функция showPage(i), которая смещает контейнер текста относительно объектива.

function showPage(i)

{

$('#pager').css('top',-i*pageHeight);

$('.pagination').removeClass('curPage');

$('#'+i+'_page').addClass('curPage');

curPage=i;

}

Здесь мы просто умножаем максимально допустимую высоту контейнера текста на номер страницы i и смещаем контейнер текста вверх на получившееся количество пикселов.

Да. чтоб все работало мы еще использовали вот эти глобальные переменные:

var pageHeight=200;

var totalPages=0;

var curPage=0;

В конце поста можно скачать полный пример.

Решение, конечно, не доработанное, так-как некоторые строчки выводятся половинками (половина на 1-й страница, половина — на 2-й), но это можно решить внедрив систему подсчета высоты контейнера и переноса строки на следующую страницу.

Подсчет высоты котейнера, например:

$('#pager').children().each(function(i){

var pageHeight=0;

var z=0;

//Считаем высоту контейнеров

if(i>lastElem &amp;amp;&amp;amp; i<elemCount)

{

while(pageHeight<200)

{

pageHeight+=$(this).height();

z++;

}

alert(pageHeight+' '+z);

curCount=z;

lastElem+=curCount;

return false;

}

И вот пример: Скачать

Также по теме:

1. Постраничный вывод текста на JQuery и PHP Итак… Задача таже, что и в прошлой статье, но теперь...
2. Когда mod_rewrite бессилен Сегодня все привыкли к приянтному на глаз формату URL (человеко...
3. Почитать: Кнопки на CSS Новая отличная статья от креативного агентства «chili» по CSS. Кнопки...