Ответы пользователя по тегу JavaScript
  • Как написать masonry сетку без сторонних плагинов?

    Evanre
    @Evanre
    Front-end developer
    Если не подходят колонки, то выводите посты в 3 разных блока. Выставляете эти блоки в ряд. Все. (если нет возможности вывести блоки нужным порядком и в контейнерах, есть простенький легковесный плагин salvattore, который сделает это за вас).

    Если нужен подход как у оригинального плагина от desandro. Самостоятельно писать смысла нет. Слишком долго + требует значительных знаний js. Есть более легковесные варианты:
    Shuffle и quicksand. Они помимо самой сетки еще умеют сортировать\фильтровать элементы (как Isotope).
    Ответ написан
    Комментировать
  • Настройка окружения для front end?

    Evanre
    @Evanre
    Front-end developer
    На хабре есть одна полезнейшая статья, на которой учился сам.
    Статья относительно старая, но именно она мне в свое время "открыла глаза". У меня на полном серьезе после ее прочтения было такое же выражения лица, как у пацана на картинке)) Прошло 2 года но моя сборка фронта принципиально не изменилась. npm, gulp, sass, и т.д. Для сборки чисто фронта использую свой Blank-project, который изначально вышел из этой статьи.

    Все зависит от поставленных задач и того, под что вы собираете фронтенд. Я например сейчас в 90% случаев собираю его под WordPress, поэтому вместо html сходу использую php и т.д..
    Ответ написан
    Комментировать
  • Верстка сайта, возможно ли так организовать структуру и переходы(в описании) ??

    Evanre
    @Evanre
    Front-end developer
    Не могу сказать точно, может такие варианты и есть, но js в любом случае нужен. Самый простой вариант сделать что-то вроде табов. При клике по ссылке прятать остальные блоки, и показывать текущий (в css по умолчанию скрываем все секции и показываем первую). Вариант на jquery:

    $('.menu-item a').on('click', function(e)) { // Событие клика по ссылке в меню
    	e.preventDefault(); // Отменияем действие ссылки по умолчанию (переход по ссылке)
    	var section = $(this).attr('href'); // id нужного контейнера (#section-1)
    	$('.sections').slideUp(); // Скрываем все секции
    	$(section).slideDown(); //Показываем нужный контейнер
            // Можно использовать любой вариант скрытия показа в jquery - slide, fade, show\hide
    });

    А вообще, будь я на вашем месте, для меня это был бы отличный случай посидеть и нормально разобраться с Ajax'ом.
    Ответ написан
    1 комментарий
  • Как грамотно сделать date- и timepicker?

    Evanre
    @Evanre Автор вопроса
    Front-end developer
    Решил проблему с помощью отличного плагина Flatpickr. Он делает именно то что мне было нужно: плагин детектит мобильные устройства и для них подставляет нативный инпут. Очень гибкие настройки, поддерживает и пикер дат и времени.
    Надеюсь, кому-то пригодится.
    Ответ написан
    Комментировать
  • Как подгружаются изображения на adidas.ru?

    Evanre
    @Evanre
    Front-end developer
    Ничего особенного не заметил, если Вы говорите о подгрузке увеличенных изображений, то используется библиотека EasyZoom, которая использует lazy load подгрузку увеличенных изображений (в картинке помимо src с обычного размера фоткой еще передается дата атрибут с ссылкой на фотку большого размера ).
    Ответ написан
    Комментировать
  • Горизонтальное меню в одну строку смещение активного элемента относительно остальных?

    Evanre
    @Evanre
    Front-end developer
    Если делать правильно, то только с помощью бекенда. Сервер уже должен отдавать менюшку, где первым пунктом будет стоять нужная меюшка с активным классом, ну или хотя-бы просто с активным классом. Если получится второй вариант, то с помощью js просто переместить пункт в начало либо css (display: flex + order: -1). Городить костыли и определять с помощью js на какой странице Вы находитесь - не есть хорошо. Это можно сделать, но будет говнокод. Нужно больше вводных данных, ссылка, какой бекенд и т.д.
    Ответ написан
    Комментировать
  • Как отследить логику подключения js и css в шаблоне wordpress?

    Evanre
    @Evanre
    Front-end developer
    1. ВК Аналитика настроена криво.
    2. Устраните ошибки в js коде, с ними сайт в принципе работать не будет. У меня даже прелоадер на главной не удалился.
    3. Оптимизируйте загрузку скриптов: уберите не нужное, по максимуму опустите все скрипты из шапки в футер. Читайте доки по wp. Ищите функцию wp enqueue script в теме, там есть аргумент который определяется в каком месте сайта будет грузиться скрипт, так же оберните скрипты в в условные операторы, например если скрипт нужен только на главной то используйте что-то вроде этого:
    if ( is_front_page() ) {
        wp_enqueue_script( $handle, $src, $deps, $ver );
    }


    Этот сайт Вам очень пригодится wp-kama.
    Ответ написан
    5 комментариев
  • Как фиксить высоту на iphone?

    Evanre
    @Evanre
    Front-end developer
    Нужно повесить не большой скрипт на событыие ресайза окна. Код звучит примерно так: При каждом событии ресайза окна взять высоту документа и присовить это значение высоте блока.
    Рабочий пример тут.
    Сам код js
    window.addEventListener('resize', function() {
    		var container = document.getElementById('block');
    		container.style.height = window.innerHeight + 'px';
    	}); // Listen for resize
    Ответ написан
    Комментировать
  • Можно ли как-нибудь починить overflow у svg path?

    Evanre
    @Evanre
    Front-end developer
    Дело не в overflow. Сам svg объект выходил за рамки артборда codepen. Откройте иллюстратор и там посмотрите.
    Ответ написан
  • Как вы собираете свой проект?

    Evanre
    @Evanre
    Front-end developer
    Да просто, Gulp дает практически не ограниченные возможности по сборке. Просто собирайте непосредственно шаблоны CMS. Вот замечательный пример интеграции галпа в WordPress.
    Ответ написан
    Комментировать
  • Как сделать такое меню?

    Evanre
    @Evanre
    Front-end developer
    Конкретно в Вашем примере на Envato обычный постраничный лендинг. Это не меню. Но если Вам нужно именно большое меню то ищите в гугле по запросу megamenu.
    Ответ написан
    Комментировать
  • Как изменить длину select относительно выбранного option?

    Evanre
    @Evanre
    Front-end developer
    Нативный селект, никак. По крайней мере без js - либо фиксированный width, либо auto по самому длинному option.
    Если с js то есть 2 варианта либо что-то такое, либо сторонняя js\jquery библиотека вроде такой.

    ps. Кстати а зачем Вам это? Кому нужен прыгающий select на странице? Если у Вас есть селект в котором куча option разной длинны, и Вам не нужен длинный select - просто ограничте его width. Тогда сам select будет нужной длинны, а список с option подстроится по самому длинному элементу.
    Ответ написан
    Комментировать
  • Как получить строку из scss файла в gulp'e?

    Evanre
    @Evanre
    Front-end developer
    У Gulp'a есть свои пакеты которые собирают спрайты. Собственно все пути прописываете в самом gulpfile.js. Вот можете посмотреть на примере моего gulpfile.js . Там все подробно расписано. Будут вопросы - спрашивайте в комментах под ответом.
    Ответ написан
    Комментировать
  • Реально ли "урезать" JQuery?

    Evanre
    @Evanre
    Front-end developer
    www.jqueryconfig.com конфигуратор jQuery, именно то, что вам нужно.
    Ответ написан
    Комментировать
  • Как сделать переключение между элементами?

    Evanre
    @Evanre
    Front-end developer
    Судя по описанию, это самыу простые табы. codepen.io/anon/pen/yYGyPX
    Ответ написан
    Комментировать
  • Gulp.js - file to import not found or unreadable. В чем проблема?

    Evanre
    @Evanre
    Front-end developer
    Gulp засекает изменение начинает парсить файл раньше чем он успевает сохраниться. У меня подобное встречалось как в Gulp, так и в обычной командной строке c sass --watch. В моем случае вылечилось переносом проекта с hdd на ssd. Если у Вас нет ssd, либо копайте в сторону задержки срабатывания watcher'a либо создавайте локальный раздел на оперативке (при условии конечно что ее достаточно).
    Ответ написан
    1 комментарий