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

Scripts & jquery

62

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Учимся использовать 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 может получить Читать далее »

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

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

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

Автоматическое меню, оглавление, измененное состояние меню

Автоматическое меню, оглавление, измененное состояние меню

Меню с изменяемым состоянием может применяться для различных задач, в т.ч. для меню лэндинга или для оглавления длинной страницы. Такое меню состоит из хэш-ссылок для перемещения по самой странице. Смысл Читать далее »

Товары улетающие в корзину

Товары улетающие в корзину

Сделаем товары woocommerce улетающими в корзину, при нажатии кнопки «В КОРЗИНУ». Основной скрипт Включаем jquery функцию $(document).ready(function(){ $(".ajax_add_to_cart").on("click",function(){ id = $(this).parent('li').attr("id"); $("#"+id).find("img") .clone() .css({'position' : 'absolute', 'z-index' : '11100', top: Читать далее »

slick — функционал карусели

slick — функционал карусели

slick — комплексное решение по созданию функционала карусели, в различных ее проявлениях. Демо и типовые варианты, и исходники можно посмотреть/скачать здесь. Отсекаем лишнее В базовой комплектации у slick присутствует несколько Читать далее »

Галерея изображений в виде карусели

Галерея изображений в виде карусели

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели. Для этого подключаем функционал карусели slick, и создать скрипт инициализации $(document).ready(function() Читать далее »

/
Варианты при вводе запроса в поиск

Варианты при вводе запроса в поиск

При вводе поискового запроса удобно чтобы сразу выводились несколько вариантов с ссылками на страницы с искомым словосочетанием. Реализуем это минимальными действиями. Подлючение скрипта и стилей Подключаем все необходимые стили и Читать далее »

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