yardim

Если хотите узнать как правильно, то вот так: В чем отличия от вашего примера: Не понятно зачем вы тогглите вот тут класс "active" которы вообще не делает никакой абсолютно полезной работы: http://joxi.ru/eAO0x6NFx7qn0r А позже вот здесь на нативном js (нативном - это значит, без использования jQuery или других стронних библиотек) делаете, в сущности, то же самое, что делает вот этот jquery-метод toggleClass http://joxi.ru/GrqdDB9uQ8JJEA . Только в этот раз вы добавляете класс "is-active", на который у вас уже навешаны стили, в отличие от класса "active", о котором я говорил выше. Следовательно, все, что нужно было вам сделать, чтобы это было правильно, так это заменить класс "active" вот этот: http://joxi.ru/eAO0x6NFx7qn0r на класс "is-active" отсюда http://joxi.ru/L21pqJdu8WZJvm . И тогда можно удалить непонятно откуда (скорее всего из того же jQuery) выдернутую функцию и к тому же зааглифаенную (читать, что такое uglify) и весь тот лишний несусветный бред, который вы настроили вокруг этой выдернутой функции: http://joxi.ru/v29dzynu3OkWym . Ну и, разумеется, мой пример вам в помощь.

На ум приходит только пара вложенных элементов с :before :after у каждого, спозиционированных абсолютом и развернутых как надо трансформом, у каждой из сторон шестиугольника и имеющих нужные тени.

У Вас в вашем цсс файле лишняя скобка фигурная: http://joxi.ru/YmEDaWVSZ8Eb5r . Это во-первых. А во-вторых, если Вы хотите, чтобы везжало нормально, то лучше анимировать не высоту, а margin. Задайте блоку, который хотите анимировать отрицательный левый марджин в -100%. Родителю задайте overflow: hidden, чтобы блок отодвинувшийся был скрыт. Ну а по ховеру марджин в 0. И уберите абсолюты и релативы. Иначе ваш блок будет всегда высотой в 0. Почему? Потому что, когда вы блоку задаете абсолют, он перестает влиять на другие блоки вокруг, включая своего родителя, и родитель схлопнется в 0, не зависимо от того, что Вы ему указали позишен релатив, хоть 10 релативов. А потом вы дочернему задаете высоту 100%. Получается, что вы задаете высоту 100% от 0. Это сколько? Правильно, ноль. Да, и лучше даже вместо марджина использовать свойство трансформ с функцией транслэйт, что позволит анимации быть более производительной. Но тут уже надо будет иметь ввиду, что в старых браузерах работать трансформ не будет. Для старья все-равно придется использовать старый-добрый margin.

Честно говоря, проще не стало. Что на скрине является Вашим блоком, каков конечный результат Вы хотите увидеть, по прежнему не понятно. Можно более развернутый скрин? И ссылка на сайт имеется? Какой блок Вы хоть вставляете? Тот маленький, на котором teaser написано?

Что касается замечаний: У Вас на десктопе почему-то скрыта навигация, хотя на превьюшке дизайна она есть (дизайн, кстати, скачать так и не удалось - ссылки битые). Диз: http://joxi.ru/Vrwl8BoIK1EP4m Верстка Ваша: http://joxi.ru/Vm67xOySxGlaQ2 . Также я бы не задавал элементам стили какие-либо вот так: http://joxi.ru/EA4vzRNhD314Xm. Имеется ввиду именно хэдер. А что если вы будете использовать хэдер в каком-то блоке? И, например, нужно будет прижимать кверху его? Будете перебивать верхний марджин? Также лучше не писать вот так: http://joxi.ru/V2VKLNnH0bPjLA . А что если в контейнере понадобится использовать не section тэг, а див, например? Нужно будет лезть в цсс и менять название тэга на див? Лучше назначить класс каждому элементу, тогда не придется лезть в цсс и постоянно его править - не важно, какой элемент Вы используете, у него всегда будет этот класс с определенными стилями. Также проблема может возникнуть, если вы пожелаете вдруг вложить в эту секцию другую секцию, у которой стили унаследуются, что, скорее всего, будет не нужно и Вы снова будете их перебивать какими-то своими. В общем, лучше не используйте имена тэгов в качестве цсс-селекторов. Ну а в целом сверстано неплохо. Побольше практики и все будет отлично! Мой совет - попробуйте сверстать многостраничный сайт, покажите его друзьям и спросите, что бы они хотели улучшить в нем, чтобы Вам пришлось что-то переделать(а ведь в реальности клиент всегда просит что-то подправить), тогда вы прочувствуете все приведенные мной советы на практике.

Можете как-то проиллюстрировать желаемый результат? Картинку что-ли прикрепить? И что значит Ваша фраза: "как только не пробовал он постоянно либо выше сайта либо под сайтом создается", - тоже не особо понятна. А конкретно кто "он"? И выше или ниже какого "сайта"?

А на чем пишешь-то хоть? На ноде?

У вас не работает тут вот это условие: Вот так сработает (усоверщенствовал свой пример): $('a').on('click', function(){ var $parent = $(this).closest('.parent'), $aCollection = $parent .find('a') .not($parent.find('.parent a')); console.log($aCollection); });

А можно увидеть конкретный пример применительно к данному случаю? Либо я чего-то не понял, либо так не получится просто, если, конечно я правильно разобрался с постановкой задачи. Просто по этому методу в любом случае выберутся все узлы <a>. А нам нужны все, за исключением тех, которые лежат в div.parent.second На мой взгляд можно еще так: var $aCollection = $('.parent a').not( $('.parent .parent a') ); console.log($aCollection); // -> искомые узлы <a>

Если тебе интересно творчесвто Джоджа Мартина, то понравится и цикл романов Мориса Дрюона "Проклятые короли". Это историческая проза. Собственно, творчество самого Джорджа, а именно "Песнь Льда и Пламени". Также из российских писателей очень уважаю творчество Алексея Пехова. Еще понравились циклы романов Виталия Зыкова. Еще рекомендую романы "1984" и "451 градус по Фаренгейту" - это уже бессмертная классика

Что значит скачать готовый код? )) jQuery плагин - это тоже готовый код. Но можно работать с ним год, и полностью не знать, как этот плагин работает. Всех даже свойств его не знать. Не говорю про то, как он устроен. А вот платят специалистам именно за то, что они знают куда этот код тыкать как раз. Если это так просто, то чего вы сами не возьмете, и не начнете тыкать?

Не совсем понял, что значит "варианты раскладки"?

Да, сейчас увидел, что у вас блок index_27 меняет позицию. Согласен, тут либо JS поможет, либо flex.

Ну, и где вы тут видите совет использовать бутстрап? Я написал, что можно флоатами обойтись, а бутстрап привел лишь в качестве примера ввиду того, что там на флоаты используются в сетке. А что касается конкретики, так что вам, может сайт еще сверстать за вас? Вы пришли сюда за советом, так принимайте, либо не принимайте, это ваше дело. Я вам говорю, что можно было бы тут без флексбокса обойтись, учитывая вашу практику хайдить лишние элементы, либо флоатами, либо инлайн-блоками. При чем без JS. Вот с этим товарищем я согласен: Он говорил вам суть одно и то же, что и я пытаюсь сказать. Но только он приводит пример именно по бутстрапу, я же не фанат оного, поэтому реализовал бы без него. Суть в том, что вы не разбиваете просто на строки контент, а блоки идут у вас один за другим в контейнере, в общем, так же, как и у вас сейчас. На мобайлах хайдите лишние просто, и все. Так доступно?

По-моему это вы потеряли контекст Совет использовать бутстрап? Я не советовал вам бутстрап использовать, Боже вас упаси Я лишь привел пример, а не давал совет

Не слышал ни разу, что CSS на СЕО влияет.

Что в вашем понимании является хаотично? А где у вас элементы-то на сайте перемещаются из строки в строку? По-моему у вас тупо лишние хайдятся, о чем я уже говорил. При чем все поголовно, если я ничего не пропустил.

Эм, нет. Там скорее про разделение css на несколько основных независимых частей, типа Base, Layout, Modules, State, Theme. Интересная штука, на мой взгляд более логичная, нежели БЭМ. Ознакомьтесь, если интересно. Ну, структура накладывает отпечаток на файловую структуру - это, конечно, тоже По поводу этого - да. Можно флоатами. Посмотреть тот же бутстрап, там грид весь на флоатах был реализован. Также есть замечательное значение свойства display - inline-block. Мне больше он нравится тем, что элементы не выпадают из потока. Тут, думаю, не стоило мудрить. У вас были проблемы с производительностью разве? Во-первых, если много элементов в слайдере, в таком случае их лучше аяксом подгружать. Насколько помню, овл это позволяет. Во-вторых, овл использует css3 трансформации для манипуляций, что позволяет исплользовать аппаратные ресурсы машины, так что с производительностью должно быть все гуд. В-третьих, вы задаете высоту жестко слайдеру. А если высота картинки изменится? Если контента больше забьется? В общем, задавать высоту в css - это последнее, что стоит делать. Впрочем, как и использовать абсолют. Ну и наконец, если вы заботитесь о производительности на мобильных, то можно хотябы для них написать эти свойства, а не применять и к дестопу их тоже. А я и не говорил, что он влияет на скорость работы Только в том случае, если будет сипользоваться неправильно и повлечет за собой увеличение количества кода - тогда безусловно. Будете грузить лишние байты. Тут вы меня не поняли, наверное. Страница, как ни крути, грузится быстрее не станет https://toster.ru/q/98637. Отрисовываться - да. Но грузится - нет. Все равно вы грузите те же байты текста и ходите запросами на сервер за картинками, когда встречается урл.

Добавлю ложку дегтя, с Вашего позволения, которая, надеюсь, поможет Вам в проффессиональном росте 1. Возможно, ИЕ у меня неправильный, конечно, какой-то, но вот такая ситуация: http://joxi.ru/823pxaOF6agqdA. При чем это 11й. 2. Плюс, добавил бы немного интерактива по ховеру, это хороший тон в верстке, даже если не отображено в дизайне: http://joxi.ru/1A5px3bFKzpyX2. А так не понятно, кликабельно оно, или просто для прикола. 3. Не очень понимаю суть флексбокса тут. Зачем делать флекс, и получать в ие9 вот такую картину http://joxi.ru/1A5px3bFKzpyX2(пускай его и нет в требованиях), если можно сделать все без него, достигнув такого же результата, но при этом все будет более отказоустойчивым? Так и стили попроще станут, и действительно не надо будет писать такие классы для каждого блока индивидуальные, типа index_content--1 .... index_content--over-dofiga. 4. Также я не приветствую практику hide--phone классов. Хотя, тут скорее к дизайнеру вашему претензия. Html грузится все равно на мобайлах и от того, что вы его просто захайдите, быстрее страница грузится не станет. Ладно еще, если это какие-то декоративные блоки, или якобы отрывок с другой страницы, куда можно перейти и увидеть полную картину предположительно, как тут http://joxi.ru/xAe0DnGfYbLKP2. Но прятать контентые блоки не есть хорошо, я думаю. Получается, вы обделяете своих мобильных пользователей при той же скорости загрузки. 5. По поводу хорошо БЭМ или плохо. Думаю, если вы 100% понимаете зачем он Вам тут, и чем он вам поможет, то хорошо. Если нет, думаю, лучше не использовать. Иначе получите раздутый, громоздкий, медлительный код, который плохо поддерживается. 6. По поводу импортов в цсс. Тут писали. Не знаю, где они были, не нашел, возможно, автор уже исправил. Но если использовать лесс, то общепринятой практикой является компиляция всех лесс в 1 цсс. Импорты соответственно должны прописываться в лесс, а на выходе будет один монолитный цсс и никаких импортов (это уже скорее просто совет). 7. Еще не понял сути вот этого: http://joxi.ru/n2Y5aQ8Ij7wK12. Зачем абсолют-то тут? По карусели: owl не плох, но советую попробовать также slick. Думаю, хватит о плохом, поговорим о хорошем 1. Порадовали приятные анимации. 2. Использование и внедрение новых технологий типа флекс похвально. Однако, ИМХО, лучше делать это точечно, а не строить на нем лейаут сайта. 3. Также похвально пробовать методологии типа БЭМ. Но советую посмотреть и на другие, типа SMACSS. Наверное, достаточно

Увидеть бы где-то это в живую. Потому что исходя из Ваших кусочков кода ничего не ясно, честно говоря. А то Вы вчера говорите, что проблема только в StackBlur и Canvas. Сегодня уже fotorama у Вас появилась. Как же вы хотите не предоставив полной картины, чтобы Вам помогли? У себя я протестил, проблем со StackBlur и Canvas нету никаких, можете мой полный код у себя проверить, если мне не верите. Значит, проблема в каком-то другом месте Вашего кода, и без видения картины в целом, сомневаюсь, что Вам кто-либо сможет помочь. Возможно вообще на бекенде трабл у Вас, в таком случае не один фронтендер без разворачивания проекта локально вам точно не поможет. Только на догадках. Одна из догадок состоит в том, что вам стоит запихнуть Ваш блур в коллбэк фоторамы, если я правильно понял идею вообще.

Вечер добрый! Подозреваю, Вы тестили в хроме свое творенье? Если так, то попробуйте протестить в другом браузере, например, ФФ. Конкретно Ваш пример я не тестил, но тестил немного модифицированный мною: HTML: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="wrap"> <img src="img.png" alt="" id="img"> </div> <div id="canvasInner"> <canvas id="canvas"></canvas> </div> <script src="jquery-1.11.3.js"></script> <script src="stackblur.min.js"></script> <script src="script.js"></script></body></html>JS: jQuery(function ($) { var canvas = $('#canvas').get(0); var ccimg = canvas.getContext('2d'); var img = $('#img').get(0); ccimg.drawImage(img, 0, 0); StackBlur.canvasRGB(canvas, 0, 0, canvas.width, canvas.height, 8);});Думаю, все заработает Это связано с тем, что у Хрома спецефический алгоритм работы с локальными файлами, который может выражаться вот в таких косяках, как произошел у Вас. Так бывает, когда вы просто открываете html файл в браузере. Для того, чтобы такого не происходило, можно включить в хроме параметр --allow-file-access-from-files. Об этом можно почитать тут: http://stackoverflow.com/questions/18586921/how-to-launch-html-using-chrome-at-allow-file-access-from-files-mode. Ну, а если не хочется танцевать с бубном вокруг хрома, то просто поднимите локальный сервер, например, OpenServer (http://open-server.ru/) или xampp, откройте свой ваш проект на этом сервере, и будет Вам счастье Все будет работать