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

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

Слайдер до-после без использования плагинов

Слайдер до-после без использования плагинов

17/08/2019

Сегодня рассмотрим как можно создать слайдер сравнения изображений (до/после) без использования плагинов с помощью JavaScript и jQuery. Разметка. Обёртка с id image-comparison и двумя изображениями. Подключим jQuery <div id="image-comparison"> <img src="./img/1.jpeg" alt="alt"> <img src="./img/2.jpeg" alt="alt"> </div> <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> Стили .image-comparison { position: relative; display: inline-block; width: 520px; width:...

Вычитание дат JavaScript

Вычитание дат JavaScript

11/08/2019

Рассмотрим, как вычесть из одной даты другую, т.е. найти разницу в количестве дней между двумя датами, используя JavaScript. Проделаем следующее: Создадим два объекта типа Date() Объявим функцию, например, diffDates() для подсчёта разницы в днях Вызовем функцию, передав в неё параметры - две даты, разницу между которыми необходимо подсчитать...

Локальная сеть через WI-FI

Локальная сеть через WI-FI

07/08/2019

Рассмотрим, как настроить локальную сеть через WI-FI в Windows 10. Для примера, будем настраивать сеть между компьютером и ноутбуком. Хотя это может быть компьютер - компьютер, или даже десять компьютеров - порядок действий останется тем же 1. Настройка сетевого профиля Первое, что нам необходимо сделать, это настроить сетевой...

Проверьте действительность вашей лицензии ESET

Проверьте действительность вашей лицензии ESET

31/07/2019

Не удалось авторизовать обновление. Проверьте действительность вашей лицензии. - так звучит сообщение об ошибке в ESET Internet Security Чтобы устранить данную ошибку необходимо изменить лицензионный ключ на другой. Для этого в главном окне программы выберем пункт справка и поддержка и нажмём изменить лицензию. Затем в открывшемся окне выбрать...

Отправка чекбоксов на почту

Отправка чекбоксов на почту

28/07/2019

Рассмотрим, как отправить input type checkbox на почту при помощи PHP. Значения выбранных чекбоксов будут приходить на e-mail в виде строки с запятой после каждого значения чекбокса. Чтобы объединить группу из несколько чекбоксов в один массив, необходимо добавить к name квадратные скобки [ ] <input type="checkbox" value="HTML" name="Технологии[]">...

Input type number стилизация

Input type number стилизация

25/07/2019

Сегодня рассмотрим как можно стилизовать input type number. А если быть точным, то как его создать таким, каким душе угодно. Разметка <div class="inputTN"> <input class="inputTN__input"type="text" pattern="^[0-9]+$" value="0"> <div class="inputTN__top"></div> <div class="inputTN__bottom"></div> </div> Стилизация .inputTN { position: relative; } .inputTN__input { border-radius: 7px; padding-left: 10px; padding-right: 20px; border: 1px...

Печать HTML таблицы с помощью JavaScript

Печать HTML таблицы с помощью JavaScript

16/07/2019

Рассмотрим, как вывести HTML таблицу на печать с помощью JavaScript и jQuery HTML-разметка <button id="printTable">Печать таблицы</button> <table id="printMe"> <style> @media print { /* Стили для печати */ #printMe .hidden { display:none; } /* что не надо печатать */ #printMe { font-size:14px; border: 1px solid #987; border-collapse: collapse; border-spacing:...

Регистрация и авторизация в php с JSON Web Token

Регистрация и авторизация в php с JSON Web Token

20/06/2019

Сегодня мы реализуем форму регистрации, входа, выхода и обновления учётной записи пользователя, используя JSON Web Token Что такое JWT? Файловая структура Настройка базы данных Создание API для регистрации пользователей Создание API для входа пользователей Создание API для валидации JWT Создание API для учетных записей пользователей Создание интерфейса для...

Как вставить svg картинку на свой сайт

Как вставить svg картинку на свой сайт

08/06/2019

Рассмотрим способы вставки SVG изображений: через тег img, инлайново, base64, теги object и embed; а также как вставить SVG картинку через CSS. Вставка SVG в HTML SVG через тег img Inline SVG HTML SVG data URI / base64 SVG через тег object Вставка SVG через CSS SVG через...

Вывод произвольных полей ACF

Вывод произвольных полей ACF

11/05/2019

Рассмотрим вывод произвольных полей, созданных в Advanced Custom Fields для WordPress. А так же, как вывести произвольные поля для терминов таксономии, например, "Рубрики" в шаблоне category.php Содержание: текст, число, область текста, файл, медиа; изображение: массив; ссылка; id; галерея; повторитель; объект записи; группа; вывод поля, если оно заполнено; вывод...

SVG анимация

SVG анимация

01/05/2019

Сегодня поговорим об анимации SVG. Реализуем следующее: при клике на svg-изображение, будет проигрываться анимация. А также попутно познакомимся с тегами <g></g> и <defs></defs>. Для примера я скачал svg картинку. Анимация внутри SVG Нам необходимо выполнить следующие действия. Загрузить svg изображение на страницу с помощью тега <embed>. Сгруппировать необходимые...