ИльяКомментарии к записи Таймер для сайта e-timer.ru отключены
Таймер для сайта от e-timer Таймер для сайта — модуль от e-timer.ru — является бесплатным генератором таймера отсчета даты для сайта вашего сайта, который можно настроить онлайн. Подобные таймеры используют на сайтах в случае, если требуется необходимость показать посетителям сколько осталось времени до конца акции, начала мероприятия или окончания праздника. Таймеры обратного отсчета достаточно давно стали неотъемлемой частью Landing Page и «продающих сайтов». Таймер заставляет аудиторию действовать с определенной целью, загнать во временные рамки, создав эффект срочности и/или что-то типа дефицита товара. Но поиск и настройка подобных модулей может занимать достаточно много времени. На данном сервисе процесс подключение таймера упроститься до пары шагов: Вам потребуется установить дату или установить автоматический перезапуск; Настроить стилизацию таймера; Разместите полученный код на своем сайте.
ИльяКомментарии к записи Скрыть элемент при клике за его пределами Jquery отключены
Как же cкрыть элемент при клике за его пределами Jquery? Благодаря этого способа можно использовать для создании прототипа потери фокуса к блочным элементам на вашей веб-странице (прототип события blur который по сущности своей не распространяется на все блочные элементы в определенных видах браузеров). Рассмотрим такой пример, что у нас на странице имеется элемент с class = white, обратной формой для пользователя. И данный элемент должен пропасть, если пользователь кликнет мышью по любому месту в черном блоке страницы, за исключением самого данного элемента с классом white. Данную задачу можно решить обработкой клика мыши на элементе black. А в самом обработчике, нужно будет проверить, не является ли источником события наш элемент с class = white или не является одним из его потомков: $(function(){ $(«.black»).click(function(event) { if ($(event.target).closest(«.white»).length) return; $(«.black»).css(«display»,»none»); event.stopPropagation(); }); }); Продемонстрируем данный пример на рабочем примере: <!DOCTYPE html><br /><br /> <html><br /><br /> <head><br /><br /> </head><br /><br /> <body></p><br… Читать далее »
ИльяКомментарии к записи Cookie в JQuery. отключены
Для простоты, легкости работы при чтении, удалении и записи coockie используем плагин JQuery. jquery.cookie Установка Вначале подключаем библиотеку JQuery, после чего запускаем наш скрипт (если вы не осуществляете упаковку скриптов как — то еще): <script src=»/path/to/jquery.cookie.js»></script> Применение плагина: Создаем coockie сессию: $.cookie(‘name’, ‘value’); Создадим сессию с сроком хранения 7 дней с момента ее создания: $.cookie(‘name’, ‘value’, { expires: 7 }); Создадим сессию с сроком хранения, действующую на всем сайте: $.cookie(‘name’, ‘value’, { expires: 7, path: ‘/’ }); Получение данных из cookie: $.cookie(‘name’); // => «value» $.cookie(‘nothing’); // => undefined Получить все доступные значения cookie: $.cookie(); // => { «name»: «value» } Удаляем cookie: // Возврнем true, если cookie был успешно удален, в противном случае false $.removeCookie(‘name’); // => true $.removeCookie(‘nothing’); // => false // Используем только одни и те же атрибуты (путь, домен), как в том cookie что было написано ранее $.cookie(‘name’, ‘value’, { path: ‘/’ }); //… Читать далее »
ИльяКомментарии к записи AJAX загрузка файлов на сервер с помощью jQuer отключены
В этой заметке вы узнаете, как реализовать AJAX загрузку файлов на сервер с использованием jQuery. Это не так уж сложно! Не знаю точно, но что-то мне подсказывает, что до появления jQuery загрузка файлов на сервер по AJAX технологии была чем-то очень непонятным, а значит крайне сложным. Но сегодня с появлением jQuery даже не обладающий опытом веб-мастер может сделать это без особых усилий. Однако, так или иначе, разобраться все же придется. И сейчас я попробую очень коротко и понятно объяснить вам, как это делается, а чтобы проще было воспринимать, урок содержит только нужное и разбит на шаги. Замечу заранее, что эта статья вряд ли поможет, если вы совсем плохо разбираетесь в jQuery и PHP, базовые знания обязательны. И, пожалуй, обязательно иметь хоть какой-то опыт в загрузке файлов (картинок) на сервер с обычной HTML формы, по крайней мере нужно представлять как это работает. Ну, меньше слов, приступим! Для начала предположим, что у нас есть такой HTML… Читать далее »
ИльяКомментарии к записи Оптимизация jQuery.animate отключены
Задача Анимировать несколько объектов одновременно. К примеру нужно переместить несколько объектов, а по окончанию движения изменить им цвет. Для этого используем jQuery.animate. Решение фиговое Javascript 1 $(«#kv2»).animate({left: 550, width: 100},1000); 2 $(«#kv3»).animate({top: 450, width: 100},1000); 3 $(«#kv4»).animate({left: 550, top: 450, width: 100},1000); 4 5 setTimeout(function() {$(«div»).css(«background»,»green»);}, 1001); Проблема данного кода заключается в том, что каждый animate запускает свой таймер со своими перерисовками экрана. Чтобы число перерисовок сократить используем один animate и его функцию step. Функция step будет выполняться на каждом шаге анимации. Дополнительно воспользуемся функцией complete, которая сработает один раз по завершению анимации: Javascript 01 $(«#kv2»).animate( 02 { 03 /* 04 на значение данного параметра будут опираться вычисления для остальных объектов и свойств. 05 выбираем с которым проще работать и меньше математических действий 06 */ 07 left: 550 08 }, 09 { 10 duration: 1000, 11 step: function(now, fx) 12 { 13 $(«#kv2»).css({«width»: 50+(now-250)/6+»px»}); // вычисляем ширину данного блока… Читать далее »
ИльяКомментарии к записи Как дождаться окончания анимации в jQuery отключены
В этой статейке, я покажу как можно быстро и просто заблокировать действия до завершения анимации, вызванной с помощью jQuery aminate() Очень часто бывает жизненно необходимо дождаться завершения анимации, случаи бывают разные — каруселька, галерея и многое другое. Раньше я изобретал «велосипед» — добавлял всевозможные таймеры, блокировал страницу, и тд. Но сегодня полистав документацию jQuery, я наткнулся на интересную возможность функции animate(). Оказывается, помимо параметров анимации и скорости, эта функция может вызывать действия по завершению анимации. Используя новые знания, я быстро набросал пример, который показывает, как можно заблокировать повторное выполнение анимации, пока не закончится старая. Ниже приведен подробно прокомментированный код: $(document).ready(function(){ // создаем действия при клике на кнопку var animateTest = function() { var widthElement = parseInt($(this).width()); var heightElement = parseInt($(this).height()); var stepZoom = 50; var speedAnimate = 1000; // перед запуском анимации снимаем все действия с кнопки // чтобы пользователь не мог сделать повторные клики $(this).unbind(‘click’); // запуск анимации $(this).animate(… Читать далее »
ИльяКомментарии к записи Конфликт версий Jquery отключены
Сегодня при верстке нового сайта столкнулся с проблемой. На сайте присутствует как карусель так и сладйер. А проблема возникла в том что для карусели используется jquery плагин работающий только с версией jquery 1.6, и чуток выше, а на слайдере используется версия jquery 1.9. Соответственно если подключить только старую библиотеку, то не работает слайдер сайта, а с новой не работает карусель. Первый шаг это поиск альтернативного плагина, но тут мои поиски окончились ничем, ничего подобного к сожалению не нашел. При поиске плагина нашел много интересных, красивые движения, «превьюшки» и еще куча мелочей. По сути мой способ решить конфликт между разными версиями jquery не изобретая велосипед, многие о нем знают, но например использовали не совсем для подобной задачи. Собственно речь идет про jQuery.noConflict(), который я думаю многие использовали как минимум при работе с jquery и mootools, здесь же конфликт возникает из-за того что обе библиотеки используют знак $. У меня же просто jquery… Читать далее »
Сразу приведу пример. Представим простой интернет магазин, а именно страницу каталога с товарами. У каждого товара есть кнопка «подробнее», при нажатии на которую, появляется плашка с информацией о товаре. Но у каждого товара есть своя такая плашка, которая скрытая и появится только по нажатии на кнопку. Так вот, окно открылось, но как его закрыть? Можно конечно создать кнопку «закрыть», но представьте, как это не удобно. Пользователь обычно кликает за область нашего окна и вот именно так и нужно его закрывать. Для начала, к примеру, создадим три товара, с одинаковым общим классом. 1 2 3 4 5 6 7 8 9 10 11 12 <div class=»product-one»> <button class=»button»>Подробнее</button><br/> <div class=»button_div»>Текст, который скрывается</div> </div> <div class=»product-one»> <button class=»button»>Подробнее</button><br/> <div class=»button_div»>Текст, который скрывается</div> </div> <div class=»product-one»> <button class=»button»>Подробнее</button><br/> <div class=»button_div»>Текст, который скрывается</div> </div> Затем подключаем библиотеку jquery и вставляем следующий скрипт 1 2 3 4 5 6 7 8 9 10 11 12… Читать далее »
