Метод расчета вертикальных процентов удобно использовать когда дочерний элемент должен при ресайзе сохранять свои пропорции внутри резинового родителя. jsfiddle.net/68Fvf/
Дизайнеры, учитесь верстать (вы сами поймете, что и как надо рисовать)
Верстальщики, учите photoshop (Сотня статей, где упоминаются одни и те же проблеммы, выучите уже наконец-то, где находятся «прозрачность»,«режимы наложения» и «настройки текста»)
И вы будете читать эту статью с улыбкой на лице, как я
А чего вы к psd прицепились?
Дизайнер свои идеи может и на бумаге излогать, и на доске, и в 3dsMax. Дизайн можна описать в текстовом документе и слепить с пластелина. Неважно как, в чем, и чем, суть одна — передать образ, который родился в голове.
Одним людям дано видеть эти образы, другим нет.
Мы все могли бы прожить без дизайна, но только нам бы пришлось испорожняться в кустах, есть руками и жить под открытым небом
Теперь чтобы сверстать сайт, а потом и что-то в нем изменить, нужно будет иметь специалиста по css, специалиста по js и специалиста по вашему придуманному движку.
Мне кажется с такими идеями можна дойти до отдельного языка по оформлению текста, тдельного для блоков и например для изображений и для работы со всем этим пригнать сюда вагон индусов
Было бы хорошо и полезно для вас и остальных, если бы вы проанализировали уже существующие плагины и скрипты подобно вашему, типа тех что указал nick4fake, и написали плагин уже без их недостатков, а еще лучше и с новыми преимуществами:
— определение края экрана (чтобы всегда находится в видимой области)
— адаптивность
— вставка HTML, любой вложенности
— вставка ссылок
ну и т.д.
И событие тоже следует вешать все же через .on(), вдруг контент со ссылкой будут загружать аяксом
Про тормоза тут уже и без меня сказали, добавлю лишь к числу браузеров еще и оперу.
А если конструктивно, то здесь следовало бы поработать с CSS:
1) стилизовать список фильтров вот так:«nav ul», «nav ul li» — это очень не надежно
2) ".work figure a img", ".work figure dl dt" и т.д. — Professor X отдыхает, абсолютно ненужные посредники между ".work" и конечным селектором
3) учитывая адаптивность и принимая во внимание советы Итана Маркотта в книге habrahabr.ru/post/148116/ следует поменять порядок медиа запросов «от меньшего разрешения к большему» и начинать так:
/* Телефоны (в горизонтальном положении) */
@media only screen and (min-width: 610px){/* Телефоны (в горизонтальном положении) и Планшеты (в вертикальном положении) */}
@media only screen and (min-width: 740px){/* Планшеты и телефоны */}
@media only screen and (min-width: 860px){/* Нетбуки, планшеты */}
и т.д.
4) Поиск элементов в js в таком виде $('nav > ul > li').removeClass('current-li') — добавляет еще тормозов.
Намного быстрее будет $('.current-li').removeClass('current-li');
5) Это меня вообще убило $(«nav > ul > li»).click(function(){...})
А по поводу конструктивной критики:
1. Анимация у вас при разных событиях ведь одинаковая, поетому следует написать одну лишь функцию и вызывать ее когда это нужно.
2. Вы постоянно обращаетесь к одним и тем же элементам и у вас постоянно идет поиск по DOM — это неправильно. Следует закешировать эти элементы в переменных
3. Ну и почитайте про событие .on() jsfiddle.net/bYY6Y/71/
jsfiddle.net/68Fvf/
jsfiddle.net/4Fpq2/134/
Вот еще один из таких плагинов masscode.ru/index.php/k2/item/33-lihighlight
Верстальщики, учите photoshop (Сотня статей, где упоминаются одни и те же проблеммы, выучите уже наконец-то, где находятся «прозрачность»,«режимы наложения» и «настройки текста»)
И вы будете читать эту статью с улыбкой на лице, как я
Дизайнер свои идеи может и на бумаге излогать, и на доске, и в 3dsMax. Дизайн можна описать в текстовом документе и слепить с пластелина. Неважно как, в чем, и чем, суть одна — передать образ, который родился в голове.
Одним людям дано видеть эти образы, другим нет.
Мы все могли бы прожить без дизайна, но только нам бы пришлось испорожняться в кустах, есть руками и жить под открытым небом
Мне кажется с такими идеями можна дойти до отдельного языка по оформлению текста, тдельного для блоков и например для изображений и для работы со всем этим пригнать сюда вагон индусов
— определение края экрана (чтобы всегда находится в видимой области)
— адаптивность
— вставка HTML, любой вложенности
— вставка ссылок
ну и т.д.
И событие тоже следует вешать все же через .on(), вдруг контент со ссылкой будут загружать аяксом
А если конструктивно, то здесь следовало бы поработать с CSS:
1) стилизовать список фильтров вот так:«nav ul», «nav ul li» — это очень не надежно
2) ".work figure a img", ".work figure dl dt" и т.д. — Professor X отдыхает, абсолютно ненужные посредники между ".work" и конечным селектором
3) учитывая адаптивность и принимая во внимание советы Итана Маркотта в книге habrahabr.ru/post/148116/ следует поменять порядок медиа запросов «от меньшего разрешения к большему» и начинать так:
/* Телефоны (в горизонтальном положении) */
@media only screen and (min-width: 610px){/* Телефоны (в горизонтальном положении) и Планшеты (в вертикальном положении) */}
@media only screen and (min-width: 740px){/* Планшеты и телефоны */}
@media only screen and (min-width: 860px){/* Нетбуки, планшеты */}
и т.д.
4) Поиск элементов в js в таком виде $('nav > ul > li').removeClass('current-li') — добавляет еще тормозов.
Намного быстрее будет $('.current-li').removeClass('current-li');
5) Это меня вообще убило $(«nav > ul > li»).click(function(){...})
И неожиданное спасибо за yandex.st — не знал.
Для одноуровневого меню masscode.ru/index.php/k2/item/40-limenurespeasy
И для меню с бесконечной вложенностью masscode.ru/index.php/k2/item/41-limenuresphard
1. Анимация у вас при разных событиях ведь одинаковая, поетому следует написать одну лишь функцию и вызывать ее когда это нужно.
2. Вы постоянно обращаетесь к одним и тем же элементам и у вас постоянно идет поиск по DOM — это неправильно. Следует закешировать эти элементы в переменных
3. Ну и почитайте про событие .on()
jsfiddle.net/bYY6Y/71/
jsfiddle.net/bYY6Y/57/