HTML CSS JS Страница 2

Создание структуры web-страницы, её стилизация и добавление интерактивности

Валидация input

Валидация input

Дата размещения статьи 24/10/2019

Валидация input с помощью HTML, JavaScript, а также стилизация верно и не верно заполненного поля ввода. Валидация input с помощью HTML Для этой задачи воспользуемся атрибутом pattern. При использовании такого подхода, обязательно нужно сообщить пользователю в каком формате необходимо вводить в данное конкретное поле (с помощью label и/или...

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

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

Дата размещения статьи 16/10/2019

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

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

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

Дата размещения статьи 12/10/2019

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

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');...

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

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

Дата размещения статьи 07/09/2019

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

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

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

Дата размещения статьи 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() для подсчёта разницы в днях Вызовем функцию, передав в неё параметры - две даты, разницу между которыми необходимо подсчитать...

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:...