Кнопка «Показать еще» на ajax. Подгрузка контента

Введение

Кнопка 'Показать еще' на ajax. Подгрузка  контентаВ этой статье будет рассмотрена возможность реализации, наверняка, всем известного функционала — ajax подгрузка данных с сервера. Работу такого функционала хорошо демонстрирует кнопка «Показать еще», которая без перезагрузки страницы получает данные с сервера и отображает их на странице. Для примера можно выводить, например, новости. Как раз дамп тестовой таблицы новостей у меня есть в статье Пагинатор. Постраничный вывод данных на php.
Читать далее «Кнопка «Показать еще» на ajax. Подгрузка контента»

Простой пример табов на jQuery

Введение

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

Простая всплывашка на jQuery

Введение

Простая всплывашка на jQueryЗачастую на сайтах приходится выводить всевозможные информативные окна — попапы, или как их еще называют всплывашки. Попапы могут быть использованы для вывода различных сообщений, для ввода пользователем информации и тд. Сейчас сайты становятся все более интерактивными и такие всплывашки используются чаще и чаще. В связи с этим, я решил набросать статейку, в которой покажу как можно быстро с помощью jQuery самом реализовать попап без использования других библиотек.
Читать далее «Простая всплывашка на jQuery»

Простая форма обратной связи на php и ajax

Введение

Простая форма обратной связи на php и ajaxНедавно я уже писал про форму обратной связи на php, но немного подумав, я решил ее немного модернизировать. Сейчас очень много где используется технология ajax, которая позволяет отправлять запросы на сервер без перезагрузки страницы. Давайте тоже не будем отставать от прогресса и сделаем отправку данных с нашей формы обратной связи средствами ajax.
Читать далее «Простая форма обратной связи на php и ajax»

Кнопка наверх и вниз для сайта как в ВКонтакте

Введение

Кнопка наверх и вниз для сайта как в ВКонтактеЯ раньше уже писал статью — Кнопка «наверх» для сайта как в ВКонтакте. Но прошло время и ВКонтакте кнопка обновилась, и добавился новый функционал, теперь появилась возможность кроме скроллинга вверх, еще и возвращаться назад к контенту. Нужно идти в ногу со всеми, и не отставать в развитии, поэтому я решил расширить свой старый код.
Читать далее «Кнопка наверх и вниз для сайта как в ВКонтакте»

Поворот тени элемента в сторону курсора на javascript

В этой коротенькой статье, я хочу показать как можно реализовать поворот тени элемента в сторону курсора средствами javascript. Для поворота тени будем использовать css. По сути тут все упирается в математику: получаем координаты элемента, координаты курсора, находим третью точку и строим треугольник. Потом получаем угол в треугольнике. После получения угла нам нужно будет узнать в каком квадранте находится курсор и высчитать уже необходимый угол. На рисунке я схематично изобразил процесс:
Читать далее «Поворот тени элемента в сторону курсора на javascript»

Прелоадер на месте еще не подгруженной картинки

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

Как дождаться окончания анимации в jQuery

Как дождаться окончания анимации в jQueryВ этой статейке, я покажу как можно быстро и просто заблокировать действия до завершения анимации, вызванной с помощью jQuery aminate()
Очень часто бывает жизненно необходимо дождаться завершения анимации, случаи бывают разные — каруселька, галерея и многое другое.
Раньше я изобретал «велосипед» — добавлял всевозможные таймеры, блокировал страницу, и тд. Но сегодня полистав документацию jQuery, я наткнулся на интересную возможность функции animate(). Оказывается, помимо параметров анимации и скорости, эта функция может вызывать действия по завершению анимации.
Читать далее «Как дождаться окончания анимации в jQuery»

Получение данных из xml с помощью jQuery

Получение данных из xml с помощью jQueryСегодня я хочу показать, как можно с помощью javascript(с применением библиотеки jQuery), можно получить и обработать XML файл.
Получение xml-файла можно реализовать с помощью ajax`a, а после получения содержимого xml его легко можно «разобрать» средствами jQuery, теми же самыми, что используются для поиска и обращения к элементам на странице.
Читать далее «Получение данных из xml с помощью jQuery»

Пример работы с checkbox. Выбрать все, отменить все и получить выбранные

Пример работы checkbox. Выбрать все, отменить все и получить выбранныеВ этой статейке я покажу как можно с помощью библиотеки jQuery работать с чекбоксами. А именно выбрать все, отменить все и получить номера выбранных checkbox`ов.
Для начала, давайте выведем на страницу пять чекбоксов и три кнопки — «Снять все чекбоксы», «Выбрать все чекбоксы» и «Получить номера выбранных». Html код будет выглядеть так:
Читать далее «Пример работы с checkbox. Выбрать все, отменить все и получить выбранные»