Using jQuery and Ajax To Create PHP Sessions. EOGallery, an AJAX image gallery with slideshow animation effect made with jQuery. Slider Gallery. Слайд-шоу на JQuery | Очередной блог фрилансера. Любой владелец интернет-ресурса (даже самого скромного), размещающий фотографии или картинки, рано или поздно задумывается о том, как бы получше организовать их отображение. А все для вас дорогие читатели, чтобы вам понравилось, чтобы вам было удобно, чтобы вы захотели сюда вернуться.
И в сегодняшней статье, мы рассмотрим три различных способа организации слайд-шоу, с помощью моих любимых плагинов к JQuery. Как и прежде, для их использования вам не понадобятся какие-либо специальные знания JavaScript, несмотря на то, что плагины очень просты в применении, они произведут прекрасное впечатление на ваших пользователей. JQuery SlideView Организуемое сладй-шоу содержит миниатюры картинок, кнопки навигации и конечно картинки оригинального размера.
Изображения сменяются при наведении мыши на миниатюры картинок или при нажатии на кнопки навигации. Плагин очень прост в использовании, при этом организует весьма симпатичное слайд-шоу. После этого понадобится вот такая разметка: Демо-версия слайд-шоу. Moving Boxes. Правильные ссылки. Гипертекстовая ссылка (или просто ссылка) является одной из базовых конструкций гипертекста и служит для связи одного веб-ресурса с другим. Все прекрасно знают, что такое ссылка и как ее поставить в HTML. (Желающие могут освежить свои знания в первоисточнике: HTML 4.01 Specification: Links.) Но, к сожалению, часто встречаются примеры неправильного использования ссылок и применения их не к месту. Пример 1. Открываем новые окна Рассмотрим простой пример открытия формы обратной связи в новом окне. Часто встречается такой вариант: Он имеет следующие недостатки: Новое окно открывается только при условии, что браузер пользователя поддерживает скрипты, написанные на JavaScript, и эта поддержка включена.
Попробуем разобраться, откуда появилась «традиция» ставить один-единственный символ решетки у ссылки в атрибуте href при обработке события onclick. Другим часто встречающимся вариантом является использование протокола javascript:, например, href="javascript:void(0)" или href=" Кеш vs. getElementById() Функцией getElementById() пользуются чаще других. Но если на странице слишком много элементов, которые требуется неоднократно найти, скрипт работает непозволительно медленно. Многократно проверенный способ улучшить ситуацию — предварительно создать массив и поместить в него указатели на все элементы, к которым программа обращается наиболее часто. Вместо непосредственного вызова getElementById() следует сформировать массив ссылок и в дальнейшем применять именно его: Например, ускорение жизненно необходимо на странице с инкрементальным поиском по нашему портфолио. Оцените пользу от кеша, перекрашивая тысячу звезд (изменение скорости заметно на глаз, но педанты могут увеличить число точек или измерить время).
Наибольший прирост производительности получается в MSIE. Про наши «админы» Как узнать положение элемента на странице (определение координат элемента)? - Примеры JavaScript - HTML, CSS, JavaScript - Web-технологии - CyberGuru.ru. Function getElementPosition(elemId){ var elem = document.getElementById(elemId); var w = elem.offsetWidth; var h = elem.offsetHeight; var l = 0; var t = 0; while (elem) { l += elem.offsetLeft; t += elem.offsetTop; elem = elem.offsetParent; } Функция возвращает объект со свойствами left, top, width, height, определяющими координаты элемента относительно верхнего угла страницы, а так же его размеры.
Пример: pos = getElementPosition("myDiv"); var left = pos.left; var top = pos.top; ... Читайте также: HTML / XHTML Standard Event Attributes. .offset. Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document. .offset()Returns: Object Description: Get the current coordinates of the first element in the set of matched elements, relative to the document. version added: 1.2.offset()This method does not accept any arguments. The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is more useful. .offset() returns an object containing the properties top and left.
Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element. Additional Notes: Demo: Example: Click to see the offset. FadeIn - Русская документация по jQuery. Делает видимыми все элементы набора, используя изменение прозрачности элементов. Также, по завершению операции возможен запуск функции, переданной в аргумент “вызов”. Для данного типа анимации используется лишь изменение прозрачности, подразумевая, что все совпавшие элементы набора уже имеют какие-то значения высоты и ширины.
Аргументы: Примеры: Отображает блоки div один за другим используя эффект fadein (появления), длительность анимации — 600 миллисекунд. По нажатию отображается красный прямоугольник поверх текста. $("a").click(function () { $("div").fadeIn(3000, function () { $("span").fadeIn(100); }); return false; }); Animate, всплывающий div box сделать по центру. Всплывающие окно. Сделать всплывающие div окно при нажатии на кнопку можно использовать как подсказку, полностью подходит под интерфейс сайта , легко настраиваются размеры , стили и место появления , можно обходиться без php скрипт хорошо работает на html страницах размеры и место появления окна можно легко изменить в внутри кода , если внутри ещё сделать стили под сайт то это всплывающее окно гармонично впишется в дизайн сайта и не будет раздражать посетителей т.к это всплывающее окно открывается не автоматически , а по желанию нажимающего кнопку код див окна.
Всплывающие подсказки jQuery. В jQuery плагине clueTip собрано сочетание разных способов показа всплывающих подсказок, что позволяет легко украсить их внешний вид и при этом, обладать множеством возможностей. Установка стандартная и не потребует больших усилий. Для того,чтобы показывать всплывающие подсказки с помощью атрибута title необходимо добавить соответствующую html разметку. Вот как она будет выглядеть: <p><a id="houdini" href="houdini.html" title="Houdini was an escape artist. |He was also adept at prestidigitation. ">Houdini</a></p> Далее, файлы, которые необходимо подключить. После чего, активируем всё то, что мы прописали. Хочу заметить, в нашем случае был задействован вывод всплывающих подсказок с помощью свойства title, но данный плагин имеет возможности применения технологий Ajax.
<p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip! То есть будет подгружаться та информация, которая находится в указанном Вами файле(например, fragment.html) в свойстве rel. Building an AJAX currency converter with PHP, jQuery and Google | CodeForest - web development and programming blog. .val. Get the current value of the first element in the set of matched elements or set the value of every matched element. .val()Returns: String or Number or Array Description: Get the current value of the first element in the set of matched elements. version added: 1.0.val()This method does not accept any arguments.
The .val() method is primarily used to get the values of form elements such as input, select and textarea. In the case of select elements, it returns null when no option is selected and an array containing the value of each selected option when there is at least one and it is possible to select more because the multiple attribute is present. For selects and checkboxes, you can also use the :selected and :checked selectors to get at values, for example: Note: At present, using .val() on textarea elements strips carriage return characters from the browser-reported value. Demo: Example: Find the value of an input box. .val( value )Returns: jQuery Example: Set the value of an input box.
Конвертер валют. Путешественникам и туристам, а так же людям, которые просто часто бывают заграницей очень важно иметь возможность конвертировать валюты и следить за динамикой их изменения. Задача. Сделать удобный конвертер валют для Drupal с расширенными возможностями. Реализация. Конвертер валют способен не просто переводить валюту из одной в другую, но помимо этого учитывать процент, который непременно вычтут при конвертации, а так же осуществлять конвертацию на любую из прошедших дат. В дополнение модуль отображает текущие курсы валют ежедневного и ежемесячного обновления по отношению к российскому рублю, показывая динамику изменений по сравнению с предыдущим днем или месяцем в процентах и денежных единицах.
Архив валют покажет в удобном виде на любую дату курс, в том числе для неиспользующихся валют, для общего ознакомления. Так же конвертер содержит информацию по всем мировым валютам (в том числе, уже не использующимся): название, территория распространения, цифровой и буквенный код. Детали. Создание AJAX конвертора курсов валют при помощи PHP, jQuery и Google. Если вы не знаете, то я вам открою страшную тайну! Помимо основных функций поисковой системы Google предоставляет ещё и множество других услуг. Одна из них это калькулятор с расширенными возможностями. Как это можно использовать? Ответ в этой статье. Что нам нужно для того, чтобы закодить данный конвертор? Давайте же начнём. У нас 2 выпадающих меню с наименованиями валют, поле для суммы и кнопка. Теперь сделаем AJAX запрос получения и отображения результата конвертирования: Мы делаем ajax запрос к файлу convert.php и если всё прошло успешно выводим результат в div.
А вот и convert.php Этот код в принципе не сложный, но я бы хотел пояснить вот что: Этот код действительно интересный. Её можно использовать как для неизвестных ресурсов, так и для введённых пользователем данных. Благодаря filter_input вы можете фильтровать: Если фильтрация произошла успешно, функция вернёт чистое значение. Всё готово! Yahoo! Smush.it™ Обработчик или источник события scroll — JQuery. Материал из JQuery .scroll() Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие.
Метод имеет три варианта использования: .scroll(handler(eventObject)):jQueryv:1.0 handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject. .scroll(eventData, handler(eventObject)):jQueryv:1.4.3 Вызывает событие scroll, у выбранных элементов страницы. Убрать установленный обработчик можно с помощью метода unbind(). Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования scroll(), можно найти в описании этих методов. Узнать/поменять величину прокрутки можно с помощью методов .scrollTop(), .scrollLeft(). Пример Ссылки. Таблицы стилей CSS - Русская документация по jQuery. 11.02 Окна Web-обозревателя. Автор: Denisido Дата: 2010-12-06 Первым делом нужно еще раз отметить, что консорциумом W3C на данный момент не было прописано четких правил стандартизации свойств и методов объекта Window для разных Web-обозревателей.
Поэтому одни поддерживают свои свойства и методы, другие, соответственно, свои. Исходя из этого мы возьмем скрипт из предыдущего урока и в дальнейшем будем подключать его ко всем необходимым страницам: ссылка на файл Размеры и положение окна браузера Начнем с того, что узнаем координаты окна Web-обозревателя. Запустить! Размеры окна браузера можно определить с помощью свойств outerWidth и outerHeight объекта Window. Метод moveTo() Данный метод задает местоположение окна браузера. Метод moveBy() Данный метод выполняет смещение местоположения окна браузера. Метод resizeTo() Этот метод изменяет размеры окна браузера Метод resizeBy() Метод изменяет размеры окна браузера на заданные значения. Полосы прокрутки scrollWidth Это свойство возвращает полную ширину страницы: scrollHeight.
Scroll() - школа XHTML. .scroll( handler(объектСобытия) ) Описание: Привязывает обработчик события к событию "scroll" JavaScript, или вызывает данное событие на элемент. .scroll( handler(объектСобытия) ) Функция выполняется каждый раз, когда вызывается событие. .scroll( [ данныеСобытия ] , обработчик(объектСобытия) Добавлена в версию: 1.4.3 Карта данных, которая будет передана в обработчик событий. обработчик(объектСобытия) Функция для выполнения каждый раз, когда событие вызвано. Этот метод является сокращением для . bind ('scroll', handler) в первом варианте, и . trigger ('scroll') во втором. Событие scroll посылается элементу, когда пользователь прокручивает на другое место в элементе. Для примера, рассмотрим HTML: <div id="target" style="overflow: scroll; width: 200px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Обработчик события scroll может быть привязан к любому элементу: Handler for .scroll() called. Примеры.
CSS оформление select. Есть наверное куча плагинов предоставляющие возможность изменения обычных select на необычные, или такие которые хотя бы отображались бы во всех браузерах одинаково. Но нам же это не интересно , сейчас попробуем сделать из обычного селекта необычный т.е. будет выглядеть примерно так: В демке представлено 4 селекта смотрим. Вконтакте извините я спер у вас оформление и цвета селекта Возьмем обычный select с несколькими option примерно вот: <select id="ourselect1"> <option value="eee">Значение 19</option> <option value="222">Значение 18</option> <option value="444">Значение 17</option> <option value="123">Значение 16</option> <option value="122">Значение 15</option> <option value="113">Значение 14</option> <option value="124">Значение 13</option></select> Обернем его в div с классом “sel_wrap”, в начале которого выстроим структуру нашего селекта дивами.
А код получится следующим: Далее приступим к стилям. Здесь уже стили предусматривающие работу javascript’а, и несколько типов селектов. } else { JavaScript скрипты: Canvas - создание многоугольников. Сам себе Web-дизайнер: помощь дизайнеру сайтов. Drawing shapes.