Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Смена стилей страницы при изменении размера окна браузера (https://javascript.ru/forum/css-html/23300-smena-stilejj-stranicy-pri-izmenenii-razmera-okna-brauzera.html)

goooooch 19.11.2011 16:37

Смена стилей страницы при изменении размера окна браузера
 
Как сделать смену стилей отдельных элементов страницы при изменении размера окна браузера, как например у самизнаетекого на главной сделано. Я имею ввиду последние работы из портфолио. В зависимости от ширины окна там выводится разное количество элементов в строке. http://www.artlebedev.ru/

ksa 19.11.2011 17:09

Цитата:

Сообщение от goooooch
как например у самизнаетекого на главной сделано.

Так там все на скриптах... Это не вёрстка.

Как вариант, ловят событие онресайз... Вычисляют размеры блоков... Поскольку у них всех
float: left;

видимые блоки показываются, остальных не видно, потому как у блока-контейнера
overflow: hidden;

Примерно такой алгоритм...

goooooch 19.11.2011 17:44

ну да, это понятно, а как это сделать?
предположим, что хтмл такого вида
<div style="width:100%; overflow:hidden" id="container">
<div style="float:left; clear:right" class="incontainer"></div>
<div style="float:left; clear:right" class="incontainer"></div>
<div style="float:left; clear:right" class="incontainer"></div>
<div style="float:left; clear:right" class="incontainer"></div>
</div>


на сайте-образце ширина вложенных блоков в %, причем, как я понял, сумма длин = 100%.

ksa 19.11.2011 18:36

Цитата:

Сообщение от goooooch
а как это сделать?

5000р...

trikadin 19.11.2011 18:46

Цитата:

Сообщение от ksa
Так там все на скриптах... Это не вёрстка.

А я склонен думать, что это вёрстка. Не смотрел код, но вообще, мне кажется, это можно без скриптов провернуть... Блоки с float'ом сами соскальзывают. И всё, собственно...

ksa 19.11.2011 18:47

Цитата:

Сообщение от trikadin
А я склонен думать, что это вёрстка.

Там style у элементов меняются всякий раз при ресайзе...

Цитата:

Сообщение от trikadin
это можно без скриптов провернуть...

Если 100% как у них - нет...

Цитата:

Сообщение от trikadin
Блоки с float'ом сами соскальзывают. И всё, собственно...

Всё да не всё. :)
Если присмотришся - они еще и по горизонтали "подстраивают" отступы...

trikadin 19.11.2011 18:49

Цитата:

Сообщение от ksa
Там style у элементов меняются всякий раз при ресайзе...

Ага, уже посмотрел firebug'ом... Мда. Был неправ))


Часовой пояс GMT +3, время: 12:41.