Создаем адаптивную страницу портфолио с фильтрами

[@zlebnik]

Слишком уж похоже на вот это.

[@dpigo]

habrahabr.ru/post/157563/

[@ilusha_sergeevich]

Эх… не видел этот пост. Столько мучался… Закрыть в черновиках?

[@dpigo]

Можно попробовать найти отличия (если таковые имеются) и сделать на них упор. Как минимум скрыть простыни кода спойлерами.

[@ilusha_sergeevich]

Хотя я все намного подробнее расписал, может начинающим будет полезно

[@ilusha_sergeevich]

Отличия есть, но не большие. Оригинал статьи на tutsplus, там есть несколько не правильных стилей. Например

@media only screen and (max-width: 610px) {
.container {
width: 460px;
}
header {
font-size: 400%;
}

Я не знаю зачем западный коллега поставил font-size: 400%, потому что на iPhone меню на весь экран.

Не были обнулены некоторые стили, к примеру в Safari все описание в <dl> подчеркивалось синим цветом, так как не было a {text-decoration: none;}

[@dpigo]

Если это не оригинал статьи, да еще и автор оригинального кода не вы, почему нет ссылок на автора или пост не оформлен как перевод?

[@ilusha_sergeevich]

глупый ответ… но не знаю почему. Сотню постов видел на Хабре со Smashing Magazine или Tutsplus где не указывалось что перевод. Да и я сам не обращаю внимания на это. Приношу свои извинения, я ни в коем случае не хотел выдать эту идею за свою, и присвоить себе все лавры… Сейчас добавлю

[@NekitoSP]

Вы не видели тот пост?) Да вы с автором того поста одинаково мыслите. Код на 99% идентичен…

[@josser]

Зашел из Сафари. Тормозюкает, и ноутбук взлетает

[@t80]

у меня и в хроме тормозит на i7

[@ademaro]

Это в «переводе» тормозит, в оригинале норм: webdesigntutsplus

[@AndryX]

i7, хром тормозит безбожно

[@baltazorbest]

AMD A10-5800k
16gb озу
хром 23.0.1271.97
убунту 12.04

тормозит жутко…

[@smileonl]

По мне так фильтры не какие-то не информативные, я бы скрывал всё что не относится к категории и перестраивал оставшееся :)

[@MuhaMed]

фильтрация не работает на фришном Amazon S3

[@sith]

Ой. А я зачем-то на flash сделал 14your.com

[@timokhin]

Создаем резиновую страницу портфолио с яваскриптом и тормозами

[@ShpuntiK]

Тормоза в chrome убивают, а в ff скролбар дефолтный, так что смысла менять его — нет…

[@yurik417]

Про тормоза тут уже и без меня сказали, добавлю лишь к числу браузеров еще и оперу.

А если конструктивно, то здесь следовало бы поработать с 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 — не знал.

[@reimax]

ubuntu 12.04, хром. Жутко тормозит. Если делать ресайз окна, вообще ад…

[@boodda]

Винда + опера, все нормально ничего не тормозит на демо.Хром — да, мрак.

[@radist2s]

Если бы автор отключил бесполезный css-фильтр sepia со всех видимых работ, то все бы работало в разы быстрее, и пост бы лучше был принят сообществом.
Короче классический пример использования технологии ради технологии.

[@ilusha_sergeevich]

Да… Технологии требуют жертв :)