JavaScript - Отложенная загрузка внешних скриптов или добиваемся повышения в глазах Google Page Speed
02.03.2017
#JavaScript #jQuery #PageSpeed_Insights #WEB #WordPress #WordPress_jQuery
Достаточно часто при тестировании скорости страницы появляется потребность в отложенной загрузке внешних скриптов подключенных к странице. В поисках решения данной проблемы я наткнулся на весьма интересный вариант решения данного вопроса, за которое отдельная благодарность его автору Patrick Sexton.Ниже приведен код который необходимо вставить в конец страницы перед закрывающим body () function downloadJSAtOnload() { var element = document.createElement("script");…
https://techblog.sdstudio.top/javascript-otlozhennaja-zagruzka-vneshnih-skriptov-ili-dobivaemsja-povyshenija-v-glazah-google-page-speed/
02.03.2017
#JavaScript #jQuery #PageSpeed_Insights #WEB #WordPress #WordPress_jQuery
Достаточно часто при тестировании скорости страницы появляется потребность в отложенной загрузке внешних скриптов подключенных к странице. В поисках решения данной проблемы я наткнулся на весьма интересный вариант решения данного вопроса, за которое отдельная благодарность его автору Patrick Sexton.Ниже приведен код который необходимо вставить в конец страницы перед закрывающим body () function downloadJSAtOnload() { var element = document.createElement("script");…
https://techblog.sdstudio.top/javascript-otlozhennaja-zagruzka-vneshnih-skriptov-ili-dobivaemsja-povyshenija-v-glazah-google-page-speed/
jQuery - Как открыть все внешние ссылки (кроме внутренних) в новой вкладке
21.07.2017
#JavaScript #jQuery #WEB #WordPress
Данный срипт будет весьма полезен для не больших проектов. При помощи его все внешние ссылки которые присутствуют на сайте, будут открываться в новой вкладке. /* Открытие всех внешних ссылок в новой вкладке */ jQuery( document ).ready(function( $ ) { $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation();…
https://techblog.sdstudio.top/jquery-kak-otkryt-vse-vneshnie-ssylki-krome-vnutrennih-v-novoj-vkladke/
21.07.2017
#JavaScript #jQuery #WEB #WordPress
Данный срипт будет весьма полезен для не больших проектов. При помощи его все внешние ссылки которые присутствуют на сайте, будут открываться в новой вкладке. /* Открытие всех внешних ссылок в новой вкладке */ jQuery( document ).ready(function( $ ) { $('a').each(function() { var a = new RegExp('/' + window.location.host + '/'); if(!a.test(this.href)) { $(this).click(function(event) { event.preventDefault(); event.stopPropagation();…
https://techblog.sdstudio.top/jquery-kak-otkryt-vse-vneshnie-ssylki-krome-vnutrennih-v-novoj-vkladke/
jQuery - плавный скрол к якорю при переходе с другой страницы сайта или по прямой ссылке
25.10.2017
#JavaScript #jQuery #WordPress #WordPress_jQuery #Все_для_разработки_плагинов #Все_для_разработки_шаблонов
За данный скрипт очень благодарен humster_spb первый его вариант опубликован здесь. Скрипт: jQuery(document).ready(function($) { var myHash = location.hash; //получаем значение хеша location.hash = ''; //очищаем хеш if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение $('html, body').animate( {scrollTop: $(myHash).offset().top - 110} , 700); //скроллим за полсекунды location.hash = myHash; //возвращаем хеш }; }); В строке «.top…
https://techblog.sdstudio.top/jquery-plavnyj-skrol-k-jakorju-pri-perehode-s-drugoj-stranicy-sajta-ili-po-prjamoj-ssylke/
25.10.2017
#JavaScript #jQuery #WordPress #WordPress_jQuery #Все_для_разработки_плагинов #Все_для_разработки_шаблонов
За данный скрипт очень благодарен humster_spb первый его вариант опубликован здесь. Скрипт: jQuery(document).ready(function($) { var myHash = location.hash; //получаем значение хеша location.hash = ''; //очищаем хеш if(myHash[1] != undefined){ //проверяем, есть ли в хеше какое-то значение $('html, body').animate( {scrollTop: $(myHash).offset().top - 110} , 700); //скроллим за полсекунды location.hash = myHash; //возвращаем хеш }; }); В строке «.top…
https://techblog.sdstudio.top/jquery-plavnyj-skrol-k-jakorju-pri-perehode-s-drugoj-stranicy-sajta-ili-po-prjamoj-ssylke/
Лайт бокс для всех изображений блога
14.11.2017
#JavaScript #WordPress #WordPress_jQuery #Плагины
Для того что бы изображения (которые имеются массово в наших записях ) блога не открывались во весь экран тем самым заводя посетителя на черный экран новой вкладки, а открывались в приятных лайтбоксах имеется у меня решение ниже: В начале пропишем данный код в файл function.php: //START MediaDoma.com - автоматическое добавление rel="lightbox" к ссылкам на картинки…
https://techblog.sdstudio.top/lajt-boks-dlja-vseh-izobrazhenij-bloga/
14.11.2017
#JavaScript #WordPress #WordPress_jQuery #Плагины
Для того что бы изображения (которые имеются массово в наших записях ) блога не открывались во весь экран тем самым заводя посетителя на черный экран новой вкладки, а открывались в приятных лайтбоксах имеется у меня решение ниже: В начале пропишем данный код в файл function.php: //START MediaDoma.com - автоматическое добавление rel="lightbox" к ссылкам на картинки…
https://techblog.sdstudio.top/lajt-boks-dlja-vseh-izobrazhenij-bloga/
Липкое меню с прозрачностью до начала скрола страницы
08.02.2018
#JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_jQuery
При создании лендингов, бывает необходимость отобразить первый (еще его называют главным) экран с бэкграундом во всю высоту экрана, из-за чего могут возникать трудности с меню и логотипом расположенным в данном меню. В данной записи я приготовил небольшой скрипт и стили для решения данной задачи. Здесь все просто, как только пользователь открывает страницу меню становится полностью…
https://techblog.sdstudio.top/lipkoe-menju-s-prozrachnostju-do-nachala-skrola-stranicy/
08.02.2018
#JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_jQuery
При создании лендингов, бывает необходимость отобразить первый (еще его называют главным) экран с бэкграундом во всю высоту экрана, из-за чего могут возникать трудности с меню и логотипом расположенным в данном меню. В данной записи я приготовил небольшой скрипт и стили для решения данной задачи. Здесь все просто, как только пользователь открывает страницу меню становится полностью…
https://techblog.sdstudio.top/lipkoe-menju-s-prozrachnostju-do-nachala-skrola-stranicy/
Bootstrap 3 - Создание мобильного меню для WordPress
11.02.2018
#CSS #HTML #JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_HTML #WordPress_jQuery #Все_для_разработки_шаблонов
Как организовать скрытие меню в бутерброд? На этот вопрос далеко не все веб мастера могут найти внятный вопрос, в данной записи я попытаюсь ответить на него приведя пример кода. В коде который используется в данном примере, мной использовались стили и скрипты Bootstrap, которые можно взять из CDN по ссылкам ниже. CDN Bootstrap LINK: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js…
https://techblog.sdstudio.top/bootstrap-3-sozdanie-mobilnogo-menju-dlja-wordpress/
11.02.2018
#CSS #HTML #JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_HTML #WordPress_jQuery #Все_для_разработки_шаблонов
Как организовать скрытие меню в бутерброд? На этот вопрос далеко не все веб мастера могут найти внятный вопрос, в данной записи я попытаюсь ответить на него приведя пример кода. В коде который используется в данном примере, мной использовались стили и скрипты Bootstrap, которые можно взять из CDN по ссылкам ниже. CDN Bootstrap LINK: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js…
https://techblog.sdstudio.top/bootstrap-3-sozdanie-mobilnogo-menju-dlja-wordpress/
fullPage.js - Работаем с веб плагином в WordPress
12.02.2018
#JavaScript #jQuery #King_Composer #WEB #WordPress #Плагины
fullPage.js — Простая в использовании библиотека для создания полноэкранных прокручивающихся веб-сайтов (также называемых веб-сайтами одной страницы или сайтами одной страницы). Это позволяет создавать полноэкранные прокручивающиеся веб-сайты, а также добавлять некоторые ландшафтные слайдеры внутри разделов сайта. Скажу честно продукт который сделали разработчики fullPage.js является невероятно красивым и очень дизайнерски привлекательным решением. В данной записи я соберу…
https://techblog.sdstudio.top/fullpage-js-rabotaem-s-veb-plaginom-v-wordpress/
12.02.2018
#JavaScript #jQuery #King_Composer #WEB #WordPress #Плагины
fullPage.js — Простая в использовании библиотека для создания полноэкранных прокручивающихся веб-сайтов (также называемых веб-сайтами одной страницы или сайтами одной страницы). Это позволяет создавать полноэкранные прокручивающиеся веб-сайты, а также добавлять некоторые ландшафтные слайдеры внутри разделов сайта. Скажу честно продукт который сделали разработчики fullPage.js является невероятно красивым и очень дизайнерски привлекательным решением. В данной записи я соберу…
https://techblog.sdstudio.top/fullpage-js-rabotaem-s-veb-plaginom-v-wordpress/
SocialLocker – даем доступ к контенту только через Social Sharing
21.11.2018
#CMS #Grav #JavaScript #jQuery #WEB
В ходе работы мне приходиться посещать довольно много блогов, и то, что я видел на многих из них, – это “панелька” для скрытия контента. Принцип работы данной панельки достаточно прост. Например, чтобы разблокировать кнопку загрузки файла, или прочесть определенную часть страницы необходимо нажать на одну из кнопок шаринга на данной панели. Данная панель в GitHub’e…
https://techblog.sdstudio.top/sociallocker-daem-dostup-k-kontentu-tolko-cherez-social-sharing/
21.11.2018
#CMS #Grav #JavaScript #jQuery #WEB
В ходе работы мне приходиться посещать довольно много блогов, и то, что я видел на многих из них, – это “панелька” для скрытия контента. Принцип работы данной панельки достаточно прост. Например, чтобы разблокировать кнопку загрузки файла, или прочесть определенную часть страницы необходимо нажать на одну из кнопок шаринга на данной панели. Данная панель в GitHub’e…
https://techblog.sdstudio.top/sociallocker-daem-dostup-k-kontentu-tolko-cherez-social-sharing/
jQuery – Как сделать одинаковую высоту всех блоков по самому высокому из них
07.12.2018
#CodePen #JavaScript #jQuery #WEB #WordPress #WordPress_jQuery
Согласитесь когда высота блоков одинаковых по сути элементов на веб странице идет в разнобой – это не есть хорошо. В начале разработки я “кошмарился” с данными блоками при помощи @mediaquery в CSS стилях и убивал огромное количество времени что бы все это дело привести к более мение качественному виду. Но появился отличный плагин jQuery который…
https://techblog.sdstudio.top/blog/jquery-kak-sdelat-odinakovuiu-vysotu-vsekh-blokov-po-samomu-vysokomu-iz-nikh
07.12.2018
#CodePen #JavaScript #jQuery #WEB #WordPress #WordPress_jQuery
Согласитесь когда высота блоков одинаковых по сути элементов на веб странице идет в разнобой – это не есть хорошо. В начале разработки я “кошмарился” с данными блоками при помощи @mediaquery в CSS стилях и убивал огромное количество времени что бы все это дело привести к более мение качественному виду. Но появился отличный плагин jQuery который…
https://techblog.sdstudio.top/blog/jquery-kak-sdelat-odinakovuiu-vysotu-vsekh-blokov-po-samomu-vysokomu-iz-nikh
jQuery – Как найти элемент (блок, div) с определенным текстом
12.12.2018
#CodePen #JavaScript #jQuery #WEB #WordPress #WordPress_jQuery
При создании сайтов а именно при написании скриптов веб разработчики часто сталкиваются с необходимостью найти определенный текст, а если быть точнее то найти блок с определенным текстом. В данном примере мы разберем как именно можно найти блок с текстом и произвести с ним определенные манипуляции. Задача Необходимо найти блок с текстом “featured”и удалить span блок…
https://techblog.sdstudio.top/blog/jquery-kak-naiti-element-div-s-opredelennym-tekstom
12.12.2018
#CodePen #JavaScript #jQuery #WEB #WordPress #WordPress_jQuery
При создании сайтов а именно при написании скриптов веб разработчики часто сталкиваются с необходимостью найти определенный текст, а если быть точнее то найти блок с определенным текстом. В данном примере мы разберем как именно можно найти блок с текстом и произвести с ним определенные манипуляции. Задача Необходимо найти блок с текстом “featured”и удалить span блок…
https://techblog.sdstudio.top/blog/jquery-kak-naiti-element-div-s-opredelennym-tekstom
Полностью адаптируемый видео бэкграунд. Включая примеры с JS и CSS (Full Background)
01.01.2019
#CodePen #CSS #HTML #JavaScript #jQuery #WEB
Видео бекграунд – полностью адаптивный Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе. И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы…
https://techblog.sdstudio.top/blog/web-polnostiu-adaptiruemyi-video-backgraund-s-js-i-css-full-background
01.01.2019
#CodePen #CSS #HTML #JavaScript #jQuery #WEB
Видео бекграунд – полностью адаптивный Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе. И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы…
https://techblog.sdstudio.top/blog/web-polnostiu-adaptiruemyi-video-backgraund-s-js-i-css-full-background
JavaScript – Анимация появления блоков для Landing Page и не только при помощи fm.revealator.jquery.js
17.01.2019
#JavaScript #WEB
Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы. Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта. Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид…
https://techblog.sdstudio.top/blog/javascript-animaciya-poyavleniya-blokov-dlya-landing-page-i-ne-tolko-pri-pomoshi-fmrevealatorjqueryjs
17.01.2019
#JavaScript #WEB
Начну с того что данная анимация должна применяться не на всех подряд сайтах, а так же не советую применять анимацию для главного экрана страницы. Главный экран – сразу появляющаяся верхняя часть страницы при загрузке сайта. Но в общем, для многих сайтов данная анимация не чем не повредит, и даже придаст динамичность, новизну и приятный вид…
https://techblog.sdstudio.top/blog/javascript-animaciya-poyavleniya-blokov-dlya-landing-page-i-ne-tolko-pri-pomoshi-fmrevealatorjqueryjs
Как построить счетчик пароля в React
24.04.2020
#JavaScript #jQuery #WEB
Введение Введение Пароли обычно используются для аутентификации пользователей в большинстве веб-приложений. Из-за этого важно, чтобы пароли сохранялись безопасным способом. На протяжении многих лет такие методы, как одностороннее хеширование паролей , использовались для сокрытия реального представления паролей, хранящихся в базе данных. Хотя хеширование паролей является отличным шагом к обеспечению безопасности паролей, пользователь по-прежнему представляет собой серьезную…
https://techblog.sdstudio.top/kak-postroit-schetchik-parolja-v-react/
24.04.2020
#JavaScript #jQuery #WEB
Введение Введение Пароли обычно используются для аутентификации пользователей в большинстве веб-приложений. Из-за этого важно, чтобы пароли сохранялись безопасным способом. На протяжении многих лет такие методы, как одностороннее хеширование паролей , использовались для сокрытия реального представления паролей, хранящихся в базе данных. Хотя хеширование паролей является отличным шагом к обеспечению безопасности паролей, пользователь по-прежнему представляет собой серьезную…
https://techblog.sdstudio.top/kak-postroit-schetchik-parolja-v-react/
Создайте простой калькулятор JavaScript для основных арифметических операций
04.05.2020
#JavaScript #jQuery #WEB
ДомJavaScriptJQueryСоздайте простой калькулятор JavaScript для основных арифметических операций В этой статье мы создадим простой калькулятор с использованием JavaScript, который может выполнять основные арифметические операции. Шаги для создания простого JavaScript калькулятора 1. Выберите подходящий текстовый редактор. Сейчас мы будем использовать Notepad ++. 2. HTML будет следующим:
04.05.2020
#JavaScript #jQuery #WEB
ДомJavaScriptJQueryСоздайте простой калькулятор JavaScript для основных арифметических операций В этой статье мы создадим простой калькулятор с использованием JavaScript, который может выполнять основные арифметические операции. Шаги для создания простого JavaScript калькулятора 1. Выберите подходящий текстовый редактор. Сейчас мы будем использовать Notepad ++. 2. HTML будет следующим: