Все статьи сайта Only-to-top.ru Страница 3

HTML, CSS, SASS, JavaScript, jQuery, PHP. Работа с Wordpress, Gulp, а также другие инструменты и технологии для создания современных сайтов

JavaScript: Информация О Нажатой Клавише 👇🏽

JavaScript: Информация О Нажатой Клавише 👇🏽

16/10/2019

В данной статье рассмотрим, как получить информацию о нажатой клавише клавиатуры или кнопки мыши, а также как выполнять необходимые действия (нужный код) при нажатии определенных сочетаний клавиш или кнопок (правый/левый клик мыши). Чтобы получить информацию, о том какая кнопка клавиатуры нажимается в данный момент, воспользуемся следующим кодом: function...

CSS: Обрезать Текст ✂️

CSS: Обрезать Текст ✂️

12/10/2019

Рассмотрим, как обрезать текст с помощью CSS. Сначала обрежем строку с текстом и добавим многоточие, а затем рассмотрим как обрезать текст по высоте (многострочный текст) Обрежем текст, если он не помещается в строке. .crop-line { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } Обрезать текст по высоте (многострочный текст)...

Яндекс Метрика API: Счётчик Просмотров

Яндекс Метрика API: Счётчик Просмотров

08/10/2019

В данном руководстве рассмотрим работу с API Метрики от Яндекса. Создадим счётчик просмотров страниц (статей). Первое и самое важное, без чего невозможно продолжать - у вас должен быть подключен счётчик Яндекс.Метрики. Далее порядок действий следующий: получить OAuth-токен; сформировать запрос для получения данных; организовать сохранение полученных данных на вашем...

CSS to iFrame: Как Изменить CSS в iFrame

CSS to iFrame: Как Изменить CSS в iFrame

03/10/2019

Добавление CSS стилей на родительской странице не работает для тегов iFrame. Из данного руководства вы узнаете, как с помощью JavaScript изменить CSS стили в iFrame, а также как добавить новые (подключить с помощью link). Пусть у нас есть iFrame с id='iframeName' <iframe id="iframeName" src="./iframe.html"></iframe> Чтобы добавить новые стили...

Клик вне элемента (блока)

Клик вне элемента (блока)

30/09/2019

Рассмотрим, как отловить клик вне элемента с помощью jQuery, а затем на чистом JavaScript. Это может понадобится, например, для всплывающих окон или для закрытия меню при клике за его пределами. Клик вне элемента jQuery Рассмотрим, как отловить клик за пределами блока Пример: имеем блок, пусть это будет всплывающее...

jQuery to JS - Переход к нативному JavaScript

jQuery to JS - Переход к нативному JavaScript

24/09/2019

Переходим от библиотеки jQuery на чистый JavaScript. В статье вы найдёте следующие JavaScript методы: выбор элементов, перемещение по DOM-дереву, работа с атрибутами, событиями, классами; создание и удаление элементов, а также многое другое. Воспользуйтесь поиском ниже. Выбор элементов jQuery $(el); JavaScript document.querySelector(el); document.querySelectorAll(el); jQuery Выбор элемента по id $('#id');...

Микроразметка сайта

Микроразметка сайта

23/09/2019

Рассмотрим, два стандарта микроразметки сайта: Schema.org и Open Graph на примере меню, хлебных крошек, сайдбара, картинок, подвала сайта и многое другое. Микроразметка необходима для лучшего понимания роботами структуры сайта. Это в свою очередь позволяет поисковым системам формировать более привлекательный и содержательный сниппет (краткое описание в поисковой выдаче). С...

Отправка Данных Формы Используя Fetch API

Отправка Данных Формы Используя Fetch API

17/09/2019

Fetch API - это современный подход для создания асинхронных запросов. Рассмотрим, как отправить данные формы на сервер, используя Fetch API. Научимся отправлять файл вложением (прикреплять к письму файл) вместе с другими полями формы. 1. Что такое fetch(). 2. Отправка формы с помощью Fetch API. 2.1 Fetch API FormData....

AJAX загрузка постов в WordPress

AJAX загрузка постов в WordPress

14/09/2019

Рассмотрим, как реализовать кнопку AJAX загрузки постов в WordPress. Т.е. загрузка постов будет осуществляться при нажатии на кнопку "загрузить еще" без перезагрузки страницы. Примерный код для страницы шаблона вывода постов. <?php $mypost_Query = new WP_Query( array( 'post_type' => '{тип_записи}', # post, page, custom_post_type 'post_status' => 'publish', # статус...

Плавное появление блока CSS

Плавное появление блока CSS

07/09/2019

Рассмотрим, как можно реализовать плавное появление блока при наведении с помощью CSS Пример HTML структуры. Два блока: первый видимый, при наведении на который будем плавно показывать второй (скрытый) элемент. <div class="o2t-element">i</div> <div class="o2t-element--hidden">Скрытый элемент</div> Всплывающий блок может содержать абсолютно любой контент: текст, картинку, видео и т.п. Магия CSS...

Лучшие плагины для WordPress

Лучшие плагины для WordPress

01/09/2019

Подборка лучших плагинов для WordPress 2021 года. Рекомендую обратить внимание всем разработчикам, а также владельцам сайтов, данные плагины значительно упростят и ускорят как разработку так и ведение сайтов на WordPress. Cyr-To-Lat - автоматическая транслитерация URL (RU в EN) Опции и произвольные поля Redux — Gutenberg Blocks Library &...