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/

Лайт бокс для всех изображений блога
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/

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/

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/

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/

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

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

Полностью адаптируемый видео бэкграунд. Включая примеры с 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

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

Как построить счетчик пароля в 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 будет следующим:

Введение в JSON (нотация объектов JavaScript)
07.05.2020
#JavaScript #WEB

JSON (нотация объектов JavaScript) – это облегченный открытый формат обмена данными, который использует читаемый человеком текст для передачи объектов данных, состоящих из пар атрибут – значение. Это подмножество JavaScript. Он использует соглашения, знакомые программистам семейства языков C, таких как C, C ++, C #, Java, JavaScript, Perl, Python. JSON – это текстовый формат. Следовательно, это…

https://techblog.sdstudio.top/json-introduction/

Лучший способ загрузить внешний JavaScript
09.05.2020
#JavaScript #jQuery #WEB #WordPress

Не так давно я наткнулся на данный пост о загрузке JavaScript без блокировки путем создания динамического тега. Когда теги находятся в потоке HTML-документа, браузер должен прекратить рендеринг и дождаться загрузки и выполнения файла сценария, прежде чем продолжить ( пример ). Создание нового тега с помощью JavaScript позволяет избежать этой проблемы, поскольку он выходит за рамки документа,…

https://techblog.sdstudio.top/luchshij-sposob-zagruzit-vneshnij-javascript/

Перевод чисел с использованием PHP и JavaScript
09.05.2020
#JavaScript #WEB #Примеры

У вас есть проблемы с переводом чисел в их эквивалентные знаки на разных языках? Не волнуйся! Этот пост поможет вам в переводе чисел. Прежде чем я начну, давайте немного поговорим о числовом представлении чисел. Наиболее распространенной системой символьного представления чисел являются арабские цифры (также называемые индуистскими арабскими цифрами) – 0, 1, 2, 3, 4, 5,…

https://techblog.sdstudio.top/english-number-translation-php-js/

Перетащите ajax-файл с помощью DropzoneJS и PHP
10.05.2020
#JavaScript #WEB

Хотите внедрить перетаскивание файлов AJAX? Это никогда не было проще. С DropzoneJS и PHP это очень просто. DropzoneJS или Dropzone.js – это легковесная библиотека javascript с открытым исходным кодом, которая позволяет загружать файлы с помощью перетаскивания и предварительного просмотра изображений. Мы начнем этот пост с базовой установки Dropzone . Затем мы сделаем базовую обработку файлов…

https://techblog.sdstudio.top/drag-drop-file-upload-dropzonejs-php/

HTTP, Ajax Polling, SSE, Websocket - связь клиент-сервер
11.05.2020
#JavaScript #jQuery #WEB #WEB_PHP

1 февраля 2018 г. Сервер – это все, что предоставляет услугу, а клиент – это тот, кто получает услугу. Основываясь на ряде подходов и методов, связь клиент-сервер может быть классифицирована по различным классификациям. В этой статье мы подробно рассмотрим следующие методы взаимодействия клиент-сервер. – Простые HTTP-запросы – Аякс Поллинг – Сервер отправил события – Websocket…

https://techblog.sdstudio.top/client-server-communication-http-polling-sse-websockets-comets/

Улучшение внутренних ссылок с помощью предварительного просмотра всплывающей подсказки
18.05.2020
#GitHub #JavaScript #jQuery #WEB #WordPress #Все_для_разработки_плагинов #Плагины

Одним из улучшений для сайта является предварительный просмотр подсказки по внутренней ссылке. Моей мотивацией для создания этого было привлечь больше внимания и полезности к внутренним ссылкам, уменьшая при этом заметность внешних ссылок. Инструмент, который я в итоге создал, весьма минимален. В конце этой статьи вы найдете его как бесплатный плагин WordPress с нулевой конфигурацией! Короче…

https://techblog.sdstudio.top/internal-link-tooltip-preview/

Анимация объекта при прокрутке
13.04.2021
#CSS #JavaScript

В недавнем проекте я хотел включить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее. Это короткое руководство будет посвящено простому и короткому способу добавления анимированного скроллера. Если вы создаете небольшой веб-сайт или проект и…

https://techblog.sdstudio.top/animacija-obekta-pri-prokrutke/

Изучаем основы Vue с Vue 3
21.04.2021
#JavaScript #WEB #Полезные_сайты

Цель статьи – научить вас основам Vue с использованием Vue 3. Но не волнуйтесь! Если вы изучите эти фундаментальные строительные блоки Vue, вы сможете создавать приложения, используя любую версию Vue. Прежде чем двигаться дальше, я хочу обрисовать в общих чертах, что вы узнаете, следуя этому руководству. Вы научитесь: Создайте простое приложение Vue Списки рендеринга Render…

https://techblog.sdstudio.top/izuchaem-osnovy-vue-s-vue-3/