/ Сайтостроение / Scripts & jquery

Scripts & jquery

68

Тройной таб

Тройной таб

Сделаем таб с тройным уровнем вложенности. Уверен, что данное решение можно сделать проще и изящнее, но пока не хватает скила. Нужно сделать следующее: В данном функционале есть 3 уровня табов: Читать далее »

Квиз-форма

Квиз-форма

Создадим квиз-форму без использования какого-либо плагина на чистом html, css, jQuery и php. В данной записи приведу пример квиза по ремонту помещения. В квизе использованы различные варианты полей (текст, radio, Читать далее »

Набирающиеся цифры

Набирающиеся цифры

Нашел простое решение на jQuery чтобы сделать набирающиеся цифры при загрузке страницы. Доработал решение viewportChecker, чтобы цифры набирались только при появлении блока с ними на экране. Верстка: Тут важны класс Читать далее »

Datetimepicker

Datetimepicker

Datetimepicker — скрипт для создания продвинутого поля ввода даты и времени. Здесь буду рассматривать решение от Kartik Visweswaran. Для работы необходимо подключить сам скрипт и стили: jquery.datetimepicker.full.min, jquery.datetimepicker.min Инициализация скрипта Читать далее »

Lazyload + srcset

Lazyload + srcset

Недавно начал использовать библиотеку Lazyload от Daniel ‘Eisbehr’ Kern. Работает лучше чем вторая версия от Mika Tuupola. Особенности Lazyload Многие параметры схожи с версией Mika Tuupola (MT), инициализируется так: Корректно Читать далее »

Скрипты бронирования Travelline

Скрипты бронирования Travelline

Настраиваем скрипты Трэвел Лайн и интегрируем в них Яндекс цели и прочие инструменты интернет-маркетинга. Форма поиска TL Данная форма обычно устанавливается на всех страницах сайта чтобы вести на страницу бронирования Читать далее »

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Шапка при прокрутке вверх

Шапка при прокрутке вверх

Делаем шапку, которая скрывается при прокрутке вниз и появляется при прокрутке вверх. Верстка и стили header нужно добавить class=»nav-down». Особенность стилей в том, что header должен быть fixed, a body Читать далее »

Отложенная загрузка видео

Отложенная загрузка видео

Как сделать отложенную загрузку изображений описано здесь. Теперь сделаем отложенной загрузку видеороликов, в частности подгружаемых с видеохостингов YOUtube и Vimeo. Отложенная загрузка iframe YOUtube Из исходного iframe потребуется только ID Читать далее »

Посты — метки на карте

Посты — метки на карте

Пытаясь реализовать удобный функционал по созданию меток на интерактивной карте я пришел к следующей системе. Заводим произвольный тип записи и таксономии чтобы структурировать и удобно манипулировать городами и точками. Основа Читать далее »

Заявка на товар

Заявка на товар

Бывает так, что нам не нужно непосредственно продавать товар через сайт, а только лишь получить на него заявку. Данный механизм прост: нам нужно создать форму обратной связи в которую будет Читать далее »

/
Быстрый просмотр товара без плагина

Быстрый просмотр товара без плагина

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

В одной из предыдущих статей мы научились вызывать ajax’ом содержимое записи. Теперь настроим и доработаем данный функционал для товаров woocommerce. Создание функционала Техническая часть (скрипты, стили) остается той же что Читать далее »

Подключаем КЛАДР

Подключаем КЛАДР

Подключаем к сайту систему КЛАДР — это постоянно обновляемая база адресов России. КЛАДР нужен для того, чтобы при вводе первых букв он предлагал варианты заполнения. Причем сделано это довольно интеллектуально, Читать далее »

Движение фона от мыши

Движение фона от мыши

Разберем тему несложного скрипта движения фона, либо чего угодно от движения мыши. Двигающийся фон Делаем фон, желательно на всю ширину экрана для наглядности. <div id="move-bg"> </div> Свойства блока с фоном Читать далее »

Полоса загрузки страницы

Полоса загрузки страницы

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Выводим полосу загрузки, чтобы визуально показать что сайт грузится. Данные изображения «утяжеляют» страницу: NProgress NProgress — довольно минималистичная полоса загрузки, которая гармонично смотрится на любом сайте. Как обычно, подключаем скрипт Читать далее »

Заметки на изображении

Заметки на изображении

Deprecated: Function create_function() is deprecated in /home/t/tiberi6w/opttour.ru/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

Помещаем на изображение заметки поясняющие ту или иную деталь. Данная функция может быть полезна для пояснения каких-либо чертежей или схем, выделения основных преимуществ товара и т.д. Перебрал множество скриптов с Читать далее »

Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его wp_enqueue_script( 'scrollme', get_template_directory_uri() Читать далее »

Блок с горизонтальной прокруткой

Блок с горизонтальной прокруткой

Делаем секцию (блок) с горизонтальной прокруткой. Внутри предполагаются изображения, но может быть все что угодно. Данный блок можно использовать в лэндинге, либо таким образом вводить галерею изображений. jQuery mousewheel plugin Читать далее »

Взаимодействие форм и scripts

Взаимодействие форм и scripts

Для различных задач требуется отслеживать значения форм и полей формы. У каждого поля (input, select, checkbox, radio) есть свои особенности, которые необходимо учитывать. Поле select $('#sort').change(function(){ //функция работает при изменении Читать далее »

window.location

window.location

window.location — это технология java script по управлению URL. Данный функционал дает довольно обширные возможности для разных направлений: фильтр, перемещение по сайту, поиск и т.д. Параметры window.location window.location может получить Читать далее »

Вспомогательная информация

Вспомогательная информация

При наведении на определенную информацию требуется уточняющая вспомогательная информация, какие-либо параметры, описание или какая-либо подсказка.. На сайте КИНОПОИСКА (в старой версии) есть такой функционал при наведении курсора на ссылку с Читать далее »

Версия сайта для печати
Рекомендации для васВерсия сайта для печатиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.