Блог старого компьютера

Блог старого компьютера


Jquery

Youtube видео во всплывающем окне

06.05.2015 08:43 Администратор Jquery
Печать PDF

На неком сайте в контенте в товарах и в других компонентах было вставлено youtube видео. Необходимо было сделать так чтоб видео не показывалось на странице, а показывалось во всплывающем окне. Так как у cms не было ни какой нормальной возможности на выходе заменить iframe видео на мой код который открывает всплывающее окно с помощью fancybox, то решено было использовать JQuery. Сообственно ниже привожу код который отключает iframe с видео и под него вставляет ссылку для открытия видео во всплывающем окне. Часть относящуюся к fancybox не привожу, она страндартная и есть на официальном сайте fancyapps.com.

 

Выравнивание блока по вертикали в резиновом блоке

21.08.2014 03:24 Администратор Jquery
Печать PDF

Ситуация следующая, необходимо выровнять блок по горизонтали в блоке высота которого 50%. Изначально для реализации был выбран метод с помощью display:flex и других новых css свойст, но вот беда не все браузеры его поддерживают (к примеру сафари, айфоны и айпады). Тогда решено было написать небольшоай скрипт на jquery который будет собирать информацию о высоте экрана и автоматически расчитывать отсутп сверху.

 

Ожидание на время выполнения аякса или скрипта

19.02.2014 11:40 Администратор Jquery
Печать PDF

Порой когда ждешь выполнения аякс запроса или же просто ждешь окончание какого то js срипта то было бы разумным на это время показать пользователю значек ожидания (набор анимированных gif значков) , чтоб он видел что браузер не завис и то что он заказывал выполняется. Сделать это достаточно просто, а как именно сейчас покажу.

 

Перетаскивание блока на странице

23.01.2014 17:06 Администратор Jquery
Печать PDF

Когда то давно когда для меня js был темным лесом а jquery и подавно то перетасиквание блока на странице казалось чем то мего нереальным и мега крутым. Сейчас практически каждый вебмастер может это выполнить благодаря jquery. Конечно можно и самостоятельно попробовать написать подобное, но это займет достаточно не мало времени и не факт что у вас выдет на столько это хорошо как в проверенном jquery плагине.

 

Оотправляем POST запрос с помощью аякса

10.12.2013 05:13 Администратор Jquery
Печать PDF

Благодаря библиотеке Jquery можно с легкостью отправить аякс запрос с пост данными. Как это сделать я опишу в этом посте. Сложного в этом ничего нет, вообще отправка пост данных ни чем не сложнее чем сделать обычнй аякс, исключением является буквально  одна строчка.

 

Проверка форм на jquery

17.06.2013 13:47 Администратор Jquery
Печать PDF

Довольно часто возникает необходимость в создании формы которую заполняет пользователь. Форму создать много ума не нужно. К форме так же необходимо сделать интерактивную прокерку которая проверяла бы поля на пустоту и если какое то поле не заполненно то форма не отправлялась (код обходит все обязательные поля циклом и проверяет заполнено ли оно), а у форм всплывала подсказка. Для этих случаев я набросал небольшой jquery код для проверки подобных форм. Этот код можно прикрепить пркатически к любой форме без особых сложностей.

 

Ajax - это просто (смена информации без перезагрузки страницы)

06.05.2013 16:35 Администратор Jquery
Печать PDF

Довольно часто на сайте необходимо сделать подгрузку какой либо информации без перезагрузки страницы. Раньше это делалось на чистом js, а код занимал порядка 30 строк (я уперто почему то делал это на js и даже не стремился изучать jquery говоря себе что на jquery каждый дурак сможет, от части для меня это оказалось полезным, сейчас я могу писать используя jquery и не используя его). С появлением jquery много сложностей  с организацией подобных вопросов отпало. Сегодня я хочу вам показать как просто, быстро, и легко используя jquery можно подгружать информацию.

 

Делаем простой слайдер на Jquery (Урок 5 часть 2)

05.03.2013 15:54 Администратор Jquery
Печать PDF
Прошлой темой по jquery мы разобрали как сделать простой слайдер на jquery. В этой теме мы продолжим работу над слайдером и залатаем существующие в нем недочеты. Думаю все кто читал прошлую тему и пробовал слайдер на деле заметили что смена слайдов в слайдере сбивается при хаотичном нажатием на на стрелки перелистывания. Именно от этой неприятной ситуации мы сегодня и будем избавлятся.
 

Делаем простой слайдер на Jquery (Урок 5)

20.02.2013 16:22 Администратор Jquery
Печать PDF

Давно я не писал уроки и не расписывал так как надо что и как работает. Вот сегодня я нашел немного времени и решил рассказать и разжевать как сделать простой, но довольно интересный слайдер на jquery. Как обычно гипер сложного ничего нету так как jquery создан для того чтоб упрощать нам разработку. А представьте что было раньше, для реализации похожего слайдера писался код строк на 50 в котором были рекурсивные функции и разные условия с расчетами сдвига. Урок конечно предназанчен не совсем для новичком, но и не для профессионалов. Ничего так сказать нового я вам не покажу, будем использовать все наработки по jquery из этой категории. Возможно это будет ваш первый настолько стоящий и интересный проект на jquery.

 

Переключение стилей на Jquery

18.02.2013 15:26 Администратор Jquery
Печать PDF
В наше время стало довольно модным делать на сайте смену стилей в один клик. К примеру вы хотите организовать на сайте версию для слабовидящего населения, или же просто хотите сделать на сайте лампочку при нажатии на которую цвета бы инвертировались и сайт принимал темные ночные начертяни. Для переключения стилей будем использовать современную библиотеку jquery.
 

Отметить все чекбоксы jquery

16.02.2013 09:28 Администратор Jquery
Печать PDF
Давно ни чего не писал по причине не хватки времени, к счастью сейчас нашел несколько минут. Сегодня я расскжу и покажу как отметить все нужные checkbox  на странице с помощью замечательного jquery. Пишу я это не просто так, а потому что на днях мне понадобилось реализовать именно эту возможность, а так как скрипт написан почему бы не выложить его сюда.
 

Пауза перед выполнением jquery

30.01.2013 10:25 Администратор Jquery
Печать PDF
Давным давно не смотрел обновлением функций jquery, а где с неделю назад поглядел. И нашел для себя довольно полезную функцию с помощью которой можно сделать паузу после выполнения эффекта, либо повтороно выполнить эффект через секунду. Так сказать пауза перед выполнением чего либо. В библиотеке jquery c версии старше чем 1.4 появилась функция delay() с помощью которой такую задачу можно выполнить без лишних заморочек. Раньше же я использовал js функцию setTimeout()
 

Прокрутка страницы вверх jquery

20.01.2013 13:54 Администратор Jquery
Печать PDF

Не раз мы видели кнопку прокрутки страницы вверх, она сейчас есть практически на всех сайтах (вконтакте, хабрахабр, итд). Данная кнопка безусловно полезна и удобна когда на странице размещено много текста и фотографий, и нужно ввернутся вверх страницы к примеру для того чтоб выбрать другой раздел. Раньше к примеру лет 6 назад ничего подобного на сайтах не было, хотя уже тогда была возможность реализовать данную кнопку которая бы прокручивала страницу вверх. Так что можно считать эту кнопку просто модой которой сейчас придерживаются все. Так же к примеру прокрутить страницу вверх за один клик можно и другим путем, воспользоваться кнопкой "Home" на клавиатуре, что еще раз доказывает что это мода, и такой модный аксессуар должен быть и на наших сайтах. Сегодня я вам покажу как сделать подобную кнопку для прокрутки на вашем сайте.

 

Плавная смена цвета при наведении jquery

09.01.2013 10:33 Администратор Jquery
Печать PDF
В догонку к прошлому посту по jquery решил написать еще один который так же строится с помощью функции animate. По сути и тот и этот пост довольно схожи, но у новичков и не знающих людей возникает вопрос почему плавная смена прозрачности, размеров, отступов происходит, а вот смена цвета нет хотя впринципе и код то для их использования одинаковый. На самом деле все очень просто сама библиотека jquery может работать только с плавным изменением числовых значений, а цвет у нас к таким значениям не относится и по этому в этом случае необходимо воспользоваться дополнительным плагином для jquery, он называется  jquery.color. Данный плагин можно найти на просторах интернета ну или скачать из примеров который я приложу.
 

Анимация формы поиска на jquery

09.01.2013 04:00 Администратор Jquery
Печать PDF
Как обычно по утру зайдя на своб почту от яндекса я увидел новое оформление. Само оформление меня не привлекло, но понравилась как у них при фокусе форма поиска увеличивала свою длинну. И решил я в одном из своих проектах использовать нечто подобное. Для написания данной анимации я использовал jquery, что сократило написание кода до нескольких минут.
 

Всплывающее окно на jquery

30.12.2012 16:00 Администратор Jquery
Печать PDF

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

 

jQuery конфликутует с другими библиотеками

30.12.2012 10:05 Администратор Jquery
Печать PDF
Довольно часто бывает что при вставке какого то копонента или модуля на сайт, этот модуль или компонент отказывается работать, хотя на тестовой площадке все отлично работало. Причина скорее всего в конфликте билиотек. К примеру  jQuery конфликтует с MooTools. Так же если вы видите в консоли ошибок  Uncaught TypeError: Property ‘$’ of object [object DOMWindow] is not a function то сомневаться в этом практически не стоит.
 

Вертикальное выпадающее меню на Jquery

03.11.2012 09:26 Администратор Jquery
Печать PDF

В данной статье опишу простое вертикальное выпадающее меню на Jquery, которое я уже не первый раз использую в своих проектах на joomla. Код довольно простой и разобраться в нем сможет каждый новичек, а так же сможет переделать либо подточить под свой проект. В данной статье не буду описывать как заствить этот код работать с меню joomla, а покажу лишь основной исполняющий код Jquery.

 

Всплывающая подсказка у формы ввода на jquery

19.10.2012 07:21 Администратор Jquery
Печать PDF

Продолжаем довольно модную и популярную тему про jquery, но на этот раз это скорее не урок, а готовое решение. Довольно часто нужно сделать поля ввода более интересными и информативными, и даже тут к нам придет на помощь jquery. В данной статье я опишу как сделать всплывающую подсказку которая появляется при условии что форма находится в фокусе.

 

Jquery "при наведении на... " (Урок 4)

03.10.2012 04:50 Администратор Jquery
Печать PDF

Название статьи звучит несколько загадочно, но это не говорит о том что мы будем говорить о чем то хитром и невыполнимом. В стаье я покажу простой пример как на Jquery при наведении курсора мыши на блок изменить его вид, либо проделать с ним какие либо операции. Зачастую такая возможность нужна при создании меню дабы обозначить элемент на котором стоит ваша мышь.

 


Страница 1 из 2

Поиск

Голосование

Что Вы думаете на счет битрикса?