Архив рубрики: JavaScript, Ajax, Jquery

Разработка на JavaScript, Ajax, Jquery

В данном разделе расположены все новшества с работой на JavaScript, Ajax, Jquery которые помогут вам создать лучший адаптивный сайт! Читаем и учимся!

Как создать колонки одинаковой высоты с помощью jQuery и JS

      Комментарии к записи Как создать колонки одинаковой высоты с помощью jQuery и JS отключены
создания колонок одинаковой высоты

Давайте разберемся в вопросе, который будет интересен всем, кто занимается созданием сайтов, которые одинаково хорошо смотрятся на любых устройствах. Это особенно важно, когда дело доходит до гибкости и отзывчивости веб-страниц. Вот простой пример: представьте себе сайт с двумя колонками, где одна для текста, а другая — это боковая панель. Наша задача — сделать так, чтобы боковая панель всегда была одного размера, вне зависимости от размера экрана, а основной текст мог адаптироваться и менять свои размеры. Как же нам это сделать? Решение простое: для боковой панели используем абсолютное позиционирование, а для текста — большой отступ справа, чтобы оставить место для панели. Но тут нас поджидает ловушка: что если боковая панель окажется выше, чем колонка с текстом? Тогда она может выступить за пределы общей композиции сайта, что выглядит неаккуратно. Именно такие моменты заставляют нас прибегать к использованию jQuery или JavaScript для выравнивания высоты колонок, поскольку с помощью CSS справиться с этой задачей… Читать далее »

Сканирование QR-кода HTML5 с помощью javascript

QR-код – это очень распространенная техника кодирования информации в виде изображений. Он очень часто используется в физических магазинах для идентификации товаров, подобно тому, как используется штрих-код. Эта библиотека позволяет сканировать QR-код в веб-приложениях с помощью веб-камеры или камеры на смартфонах. Это простая библиотека размером 52 Кб, написанная на чистом js. В 2015 году я написал библиотеку для сканирования QR-кодов на основе HTML5 в качестве расширения jQuery. Недавно я заметил, что на моем проекте на Github и демонстрационной странице наблюдается постоянный трафик. Когда я углубился в суть происходящего, мне стало стыдно за плохой дизайн и устаревшую поддержку последних HTML API вокруг Camera. Недавно я исправил некоторые проблемы и подверг рефакторингу библиотеку javascript, которая теперь не зависит от jQuery и поддерживает API на основе Promise. В этой статье я объясню, как использовать новую версию библиотеки, некоторые изменения и их причины, а также существующие проблемы и планы по их устранению. Если говорить громко, то основными… Читать далее »

WebSocket

Протокол WebSocket (стандарт RFC 6455) предназначен для решения любых задач и снятия ограничений обмена данными между браузером и сервером. Он позволяет пересылать любые данные, на любой домен, безопасно и почти без лишнего сетевого трафика. Пример браузерного кода Для открытия соединения достаточно создать объект WebSocket, указав в нём специальный протокол ws.: var socket = new WebSocket(«ws://javascript.ru/ws»); У объекта socket есть четыре колбэка: один при получении данных и три – при изменениях в состоянии соединения: socket.onopen = function() { alert(«Соединение установлено.»); }; socket.onclose = function(event) { if (event.wasClean) { alert(‘Соединение закрыто чисто’); } else { alert(‘Обрыв соединения’); // например, «убит» процесс сервера } alert(‘Код: ‘ + event.code + ‘ причина: ‘ + event.reason); }; socket.onmessage = function(event) { alert(«Получены данные » + event.data); }; socket.onerror = function(error) { alert(«Ошибка » + error.message); }; Для посылки данных используется метод socket.send(data). Пересылать можно любые данные. Например, строку: socket.send(«Привет»); …Или файл, выбранный в форме: socket.send(form.elements[0].file); Просто, не правда ли? Выбираем, что переслать, и socket.send()…. Читать далее »

XSS и ошибки разработчиков на веб-сервисах

      Комментарии к записи XSS и ошибки разработчиков на веб-сервисах отключены

Сначала разберем, что такое XSS и его виды.   XSS — Cross-Site Scripting — Одна из множества уязвимостей веб приложений, которая позволяет внедрить вредоносный код, на страницу. Есть 2 типа XSS:   Активная — XSS, которая статично находится на странице Пассивная — XSS, которая динамично отображается на странице, при определенном запросе   За несколько лет работы в сфере информационной безопасности, я смог набраться опыта и могу рассказать о некоторых нетипичных видах XSS. Данные типы уязвимостей довольно распространены на современных веб-сервисах, но к сожалению из-за своей необычности, они скрылись в тени. Начнем с ошибочных представлений разработчиков:   Разработчик думает, что XSS — это инъекция только в HTML-сущность и только. Данное ошибочное мнение складывается изо дня в день. На самом же деле, XSS могут быть не только в HTML, они могут быть почти везде, к примеру даже в картинке. Разработчик уверен, что отфильтровав спец символы, можно защититься от XSS. Данные мнение частично… Читать далее »

Скрыть элемент при клике за его пределами Jquery

      Комментарии к записи Скрыть элемент при клике за его пределами 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… Читать далее »

Работа с AJAX в WordPress

      Комментарии к записи Работа с AJAX в WordPress отключены
Работа с AJAX в WordPress

Как же правильней осуществляется работа с AJAX в WordPress AJAX — достаточно полезна и удобна в работе с html страницами. С помощью нее реально создавать понастоящему красивые визуальные приложения. Если проще, то с его помощью  возможно создавать всевозможную передачу данных “без обновления страницы”: загрузку новых или дополнительных записей без обновления страницы, сохранение в базу комментариев WordPress без обновления страницы и т.д. У WP создан свой достаточно удобный интерфейс при работе с AJAX. Нам требуется только написать функцию и обратиться к ней с помощью ajax. Сделать это можно так: add_action(‘wp_ajax_send’,’action_send’); Где send — имя нашего хука, а action_send — имя функции, которую мы будем вызывать. В данном случае эта запись будет отработывать только при авторизованном пользователи, но если требуется использовать данную функцию для всех пользователей сайта то выглядит это вот так: add_action(‘wp_ajax_send’, ‘action_send’); add_action(‘wp_ajax_nopriv_send’,’action_send’); Для использования самого AJAX запроса можно воспользоваться встроенной функцией в jQuery. $.ajax({ url: «/wp-admin/admin-ajax.php», //url, к которому… Читать далее »

Cookie в JQuery.

      Комментарии к записи 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: ‘/’ }); //… Читать далее »

Краткий список WYSIWYG редакторов

      Комментарии к записи Краткий список WYSIWYG редакторов отключены

Как то понадобился WYSIWYG редактор, я знал о его функционале, но не знал как правильно его искать. Через какое-то время он нашелся… И чтобы облегчить работу себе и остальным ниже приведен список. TinyMCE Одним из популярных визуальных редакторов, обладает большим функционалом. Присутствует множество дополнений, по умолчанию идет в сборке множество плагинов. (Браузеры: Mozilla 1.3+, MSIE 5.5+, Opera 9.0+, Safari, Chrome) [Официальный сайт | Демо] CKeditor Полностью повторяет функционал TinyMCE. (Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт] CLEditor Незамудренный визуальный редактор, не балует своим функционал, но функционал осуществлен качественно и без ошибок. (Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Camino 1.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт] NicEdit Очень схож с CLEditor. Включает в себя стандартный функционал. (Браузеры: Firefox 1.5+, Opera 9.50+, Safari 3.0+, Internet Explorer 5.5+, Google Chrome) [Официальный сайт] elRTE Достаточно качественный визуальный редактор.Широкий функционал и качественное осуществление. (Браузеры:… Читать далее »