Раскрывающаяся HTML-таблица по клику
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend
❓Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику
✅ Решение. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1 (см. статью)
💾 https://wpcraft.top/?p=2637
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend
❓Задача. Есть длинная таблица и нужно сделать, чтобы часть таблицы скрывалась и раскрывалась по клику
✅ Решение. Настроить скрытие лишних строк в таблице возможно использовав только средствами CSS и HTML. Код №1 из Примера №1 (см. статью)
💾 https://wpcraft.top/?p=2637
Плавающий блок на CSS при прокрутке
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend
❓Задача. Необходимо настроить на сайте сайдбар так чтобы он прилипал при прокрутке страницы. Называют это ещё как «плавающий блок».
✅ Решение. Реализуется плавающий блок с помощью CSS-свойства position: sticky и top: 0 (вместо top могут быть и bottom, left, right с различными значениями) как в Код №1. Значение свойства top — это некий порог после которого блок начнет прилипать и двигаться в месте с прокруткой до того момента который позволяет ему двигаться родительский блок
CSS прилипающего блока:
/* Плавающий блок */
#my-sticky-block {
position: sticky;
top: 30px;
}
💾 https://wpcraft.top/?p=2707
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend
❓Задача. Необходимо настроить на сайте сайдбар так чтобы он прилипал при прокрутке страницы. Называют это ещё как «плавающий блок».
✅ Решение. Реализуется плавающий блок с помощью CSS-свойства position: sticky и top: 0 (вместо top могут быть и bottom, left, right с различными значениями) как в Код №1. Значение свойства top — это некий порог после которого блок начнет прилипать и двигаться в месте с прокруткой до того момента который позволяет ему двигаться родительский блок
CSS прилипающего блока:
/* Плавающий блок */
#my-sticky-block {
position: sticky;
top: 30px;
}
💾 https://wpcraft.top/?p=2707
Сортировка HTML-таблицы на JavaScript
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend #javascript #HTMLТаблицы
❓Задача. Необходимо сделать возможным сортировку HTML-таблицы по столбцам
✅ Решение. Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.
(см. статью)
💾 https://wpcraft.top/?p=2628
#CSS #Вебмастеринг #сайтостроение #HTML #Таблицы #Frontend #javascript #HTMLТаблицы
❓Задача. Необходимо сделать возможным сортировку HTML-таблицы по столбцам
✅ Решение. Для сортировки таблицы можно использовать библиотеку tablesort.js. Она не сложная и без jQuery. Там же, на официальном сайте можно и посмотреть как настраивать.
(см. статью)
💾 https://wpcraft.top/?p=2628
HTML: Как сделать отступ при скролле к якорю
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #scroll_margin_top #taget
❓Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются н якоря в соответствующих заголовках, например ссылка <a href="#id-1">Заголовок 1</a> и заголовок <h2 id="id-1">Заголовок 1</h2>. Когда нажимаем на ссылку с заголовком, экран перемещается к заголовку с тегом h2 и якорем id=id-1. Экран установится так, что заголовок будет у самого верхнего края. Это не всегда хорошо выглядит. Например, если есть фиксированая, липкая шапка, то заголовок будет ею перекрываться. Поэтому лучше сделать чтобы был отступ от якоря при скролле к нему.
✅ Решение 1. Можно использовать в CSS свойство scroll-margin-top — задает высоту отступа, которую нужно использовать при скролле к элементу. Работает во всех современных браузерах, кроме IE-11 и ранних версиях. Пример в Коде №1? используем псевдокласс :target (применяется к целевому элементу):
:taget { scroll-margin-top: 2rem; }
✅ Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ:
:taget {
padding-top: 50px;
margin-top: -50px;
}
💾 https://wpcraft.top/?p=2683
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #scroll_margin_top #taget
❓Задача. Есть блок с содержанием в статье. Оглавления в виде ссылок ссылаются н якоря в соответствующих заголовках, например ссылка <a href="#id-1">Заголовок 1</a> и заголовок <h2 id="id-1">Заголовок 1</h2>. Когда нажимаем на ссылку с заголовком, экран перемещается к заголовку с тегом h2 и якорем id=id-1. Экран установится так, что заголовок будет у самого верхнего края. Это не всегда хорошо выглядит. Например, если есть фиксированая, липкая шапка, то заголовок будет ею перекрываться. Поэтому лучше сделать чтобы был отступ от якоря при скролле к нему.
✅ Решение 1. Можно использовать в CSS свойство scroll-margin-top — задает высоту отступа, которую нужно использовать при скролле к элементу. Работает во всех современных браузерах, кроме IE-11 и ранних версиях. Пример в Коде №1? используем псевдокласс :target (применяется к целевому элементу):
:taget { scroll-margin-top: 2rem; }
✅ Решение 2. Другой вариант — использование для элемента с якорем положительный верхний внутренний отступ и отрицательный верхний внешний отступ:
:taget {
padding-top: 50px;
margin-top: -50px;
}
💾 https://wpcraft.top/?p=2683
Верхние и нижние индексы: HTML-теги, таблица
#HTML #Вебмастеринг #сайтостроение #индексы #frontend
❓В отношении текста под индексом понимают смещенные символы вниз или вверх относительно базовой линии текста. Они в основном применяются в научно-техническом контенте.
✅ Надстрочные символы:
Латинские: ᴬ ᴮ ᴯ ᴰ ᴲ ᴲ ᴳ ᴴ ᴵ ᴶ ᴸ ᴹ ᴻ ᴼ ᴽ ᴿ ᵀ ᵁ ᵂ ᵃ ᵅ ᵆ ᵇ ᵈ ᵊ ᵍ ᵏ ᵂ ᵂ ᵃ ᵆ ᵇ ᵉ ᵍ ᵏ ᵐ ᵂ ᵃ ᵐ ᵐ ᵐ ᵐ ᵑ ᵒ ᵓ ᵖ ᵗ ᵘ ᵚ ᵛᶛ ᶝ ᶞ ᶟ ᶠ ᶡ ᶢ ᶤ ᶤ ᶥ ᶦ ᶧ ᶩ ᶪ ᶫ ᶭ ᶮ ᶯ ᶱ ᶲ ᶳ ᶴ ᶵ ᶶ ᶸ ᶹ ᶺ ᶻ ᶼ ᶾ ᶲ ᶳ ᶴ ᶶ ᶷ ᶹ ᶺ ᶻ ᶽ ᶾ ᶾ ᶳ ᶴ ᶶ ᶸ ᶹ ᶻ ᶼ ᶾ ᶾ ᶾ ᶿ
Греческие: ᵝ ᵞ ᵟ ᵠ
Кириллица: ᵸ
Другие: ᵎ ᵔ ᵕ ᵙ ᵜ
Подстрочные символы:
Латинские: ᵢ ᵣ ᵤ ᵥ
Греческие: ᵦ ᵧ ᵨ ᵩ ᵪ
(см. полную статью)
💾 https://wpcraft.top/?p=1930
#HTML #Вебмастеринг #сайтостроение #индексы #frontend
❓В отношении текста под индексом понимают смещенные символы вниз или вверх относительно базовой линии текста. Они в основном применяются в научно-техническом контенте.
✅ Надстрочные символы:
Латинские: ᴬ ᴮ ᴯ ᴰ ᴲ ᴲ ᴳ ᴴ ᴵ ᴶ ᴸ ᴹ ᴻ ᴼ ᴽ ᴿ ᵀ ᵁ ᵂ ᵃ ᵅ ᵆ ᵇ ᵈ ᵊ ᵍ ᵏ ᵂ ᵂ ᵃ ᵆ ᵇ ᵉ ᵍ ᵏ ᵐ ᵂ ᵃ ᵐ ᵐ ᵐ ᵐ ᵑ ᵒ ᵓ ᵖ ᵗ ᵘ ᵚ ᵛᶛ ᶝ ᶞ ᶟ ᶠ ᶡ ᶢ ᶤ ᶤ ᶥ ᶦ ᶧ ᶩ ᶪ ᶫ ᶭ ᶮ ᶯ ᶱ ᶲ ᶳ ᶴ ᶵ ᶶ ᶸ ᶹ ᶺ ᶻ ᶼ ᶾ ᶲ ᶳ ᶴ ᶶ ᶷ ᶹ ᶺ ᶻ ᶽ ᶾ ᶾ ᶳ ᶴ ᶶ ᶸ ᶹ ᶻ ᶼ ᶾ ᶾ ᶾ ᶿ
Греческие: ᵝ ᵞ ᵟ ᵠ
Кириллица: ᵸ
Другие: ᵎ ᵔ ᵕ ᵙ ᵜ
Подстрочные символы:
Латинские: ᵢ ᵣ ᵤ ᵥ
Греческие: ᵦ ᵧ ᵨ ᵩ ᵪ
(см. полную статью)
💾 https://wpcraft.top/?p=1930
Как сделать оглавление (содержание) для статей автоматически
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #javascript #Wordpress
❓Задача. Необходимо сделать вывод оглавлений (содержания) статей в постах автоматически. Сложность заключается в том что на странице часть контента выводится не через функцию the_content(), а выше нее по шаблону.
✅ Решение. Для WordPress есть хорошие плагины для вывода содержания статьи, но они работают с функцией the_content() и выведут только те заголовки, которые попали в неё. Поэтому в данной ситуации лучше будет использовать JavaScript.
1 Автоматическое создание и вывод содержания статьи с помощью JavaScript и jQuery
2 Автоматический вывод оглавлений статьи в WordPress
3 Подборка решений оглавлений статей в HTML
(см. статью)
💾 https://wpcraft.top/?p=2654
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #javascript #Wordpress
❓Задача. Необходимо сделать вывод оглавлений (содержания) статей в постах автоматически. Сложность заключается в том что на странице часть контента выводится не через функцию the_content(), а выше нее по шаблону.
✅ Решение. Для WordPress есть хорошие плагины для вывода содержания статьи, но они работают с функцией the_content() и выведут только те заголовки, которые попали в неё. Поэтому в данной ситуации лучше будет использовать JavaScript.
1 Автоматическое создание и вывод содержания статьи с помощью JavaScript и jQuery
2 Автоматический вывод оглавлений статьи в WordPress
3 Подборка решений оглавлений статей в HTML
(см. статью)
💾 https://wpcraft.top/?p=2654
Как сделать список в 2 и больше колонок на CSS и HTML
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #Список
❓Задача. Часто необходимо сделать список в две колонки. Эту задачу можно решить несколькими способами.
✅ Решение 1. Через свойство float и display.
.my-class li {
display:block;
width:49%;
float:left;
}
✅ Решение 2. Для вывода списка по несколько колонок можно использовать CSS3-свойства
column-count или column-width. Первое — задет количество колонок, а второе — ширину колонки и таким образом заполняет свободное пространство. А свойство column-gap задет интервал между колонками (по-умолчанию — 1 1em). данные свойства можно применяь не только к спискам но и другим тегам.
ul style="column-count: 3"
(см. статью)
💾 https://wpcraft.top/?p=2292
#CSS #Вебмастеринг #сайтостроение #HTML #Frontend #Список
❓Задача. Часто необходимо сделать список в две колонки. Эту задачу можно решить несколькими способами.
✅ Решение 1. Через свойство float и display.
.my-class li {
display:block;
width:49%;
float:left;
}
✅ Решение 2. Для вывода списка по несколько колонок можно использовать CSS3-свойства
column-count или column-width. Первое — задет количество колонок, а второе — ширину колонки и таким образом заполняет свободное пространство. А свойство column-gap задет интервал между колонками (по-умолчанию — 1 1em). данные свойства можно применяь не только к спискам но и другим тегам.
ul style="column-count: 3"
(см. статью)
💾 https://wpcraft.top/?p=2292
JavaScript: Делаем 3D-карусель с Cloud 9 Carousel
#Вебмастеринг #сайтостроение #HTML #javascript #3d #Карусели #Слайдеры #frontend
❓Задача. Необходимо сделать 3D-карусель изображений с помощью JavaScript плагина «Cloud 9 Сarousel».
✅ Решение. Плагин «Cloud 9 Сarousel» работает с библиотеками jQuery и Zepto, поддерживает прокрутку колесом мыши (нужно установить плагин mousewheel).
Подключаем jQuery 1.3.0 и выше или Zepto 1.1.1 и выше
Скачиваем и подключаем jquery.cloud9carousel.js или подключаем как внешний файл из источника.
Назначаем контейнеру карусели и его элементам индетификатор и классы для привязки к плагину.
Инициализируем карусель $(elem).Cloud9Carousel(opt). Подробнее в Код №1 (См. статью)
💾 https://wpcraft.top/?p=2936
#Вебмастеринг #сайтостроение #HTML #javascript #3d #Карусели #Слайдеры #frontend
❓Задача. Необходимо сделать 3D-карусель изображений с помощью JavaScript плагина «Cloud 9 Сarousel».
✅ Решение. Плагин «Cloud 9 Сarousel» работает с библиотеками jQuery и Zepto, поддерживает прокрутку колесом мыши (нужно установить плагин mousewheel).
Подключаем jQuery 1.3.0 и выше или Zepto 1.1.1 и выше
Скачиваем и подключаем jquery.cloud9carousel.js или подключаем как внешний файл из источника.
Назначаем контейнеру карусели и его элементам индетификатор и классы для привязки к плагину.
Инициализируем карусель $(elem).Cloud9Carousel(opt). Подробнее в Код №1 (См. статью)
💾 https://wpcraft.top/?p=2936
Вкладки на JavaScript
#Вебмастеринг #сайтостроение #HTML #javascript #jquery #Вкладки #Табы #frontend #tabs
❓Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.
✅ Решение. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1. (См. статью)
+ Подборка примеров
💾 https://wpcraft.top/?p=2996
#Вебмастеринг #сайтостроение #HTML #javascript #jquery #Вкладки #Табы #frontend #tabs
❓Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.
✅ Решение. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1. (См. статью)
+ Подборка примеров
💾 https://wpcraft.top/?p=2996
WORDPRESS: ВЫВОД СПИСКА КАТЕГОРИЙ ССЫЛКАМИ И С ИЗОБРАЖЕНИЯМИ
#wordpress #woocommerce #вебмастеринг #WpCraft #Интернетмагазин #WoocommerceСкрипты #WordpressСкрипты #WordpressМеню #frontend #css
❓Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список, чтобы дочерние категории сворачивались в родительскую.
❓Задача 2. Позже появилась похожая задача, но вывести нужно категории вместе с их прикрепленными изображениями, а подкатегории должны появляться во всплывающем списке при наведении курсора, либо разворачиваться при клике на мобильных экранах.
✅ Решение 1: Используем функцию Wordpress wp_list_categories, которая будет выводить список всех категорий ссылками через шорткод [cats_list]. Сам шорткод добавляем в попап окно. Стилизуем и заставляем разворачиваться наш список.
✅ Решение 2: Используем функцию Wordpress get_categories(), которая будет получать все категории с данными, а далее будем формировать структуру с картинками, названиями и ссылками и выводить через шорткод [cats_list_2]
================
💾 См. статью https://wpcraft.top/?p=3215
Пример 1: https://youtu.be/NEe6o047sPo
Пример 2: https://youtu.be/8Q57u3FjfEM
https://www.youtube.com/watch?v=8Q57u3FjfEM
https://www.youtube.com/watch?v=NEe6o047sPo
#wordpress #woocommerce #вебмастеринг #WpCraft #Интернетмагазин #WoocommerceСкрипты #WordpressСкрипты #WordpressМеню #frontend #css
❓Задача 1. Необходимо сделать шорткод, который выводил бы список всех категорий товаров в магазине на Woocommerce. Также, нужно стилизовать список, чтобы дочерние категории сворачивались в родительскую.
❓Задача 2. Позже появилась похожая задача, но вывести нужно категории вместе с их прикрепленными изображениями, а подкатегории должны появляться во всплывающем списке при наведении курсора, либо разворачиваться при клике на мобильных экранах.
✅ Решение 1: Используем функцию Wordpress wp_list_categories, которая будет выводить список всех категорий ссылками через шорткод [cats_list]. Сам шорткод добавляем в попап окно. Стилизуем и заставляем разворачиваться наш список.
✅ Решение 2: Используем функцию Wordpress get_categories(), которая будет получать все категории с данными, а далее будем формировать структуру с картинками, названиями и ссылками и выводить через шорткод [cats_list_2]
================
💾 См. статью https://wpcraft.top/?p=3215
Пример 1: https://youtu.be/NEe6o047sPo
Пример 2: https://youtu.be/8Q57u3FjfEM
https://www.youtube.com/watch?v=8Q57u3FjfEM
https://www.youtube.com/watch?v=NEe6o047sPo
КАРУСЕЛЬ С РАЗНЫМ ВИДОМ КОНТЕНТА: видео, текст, Youtube
#wordpress #Javascript #JS #OwlCarousel #jQuery #frontend #Carousel #WpCraftTop
❓Задача: Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое можно увидеть, например, при отображении блока с отзывами, где один элемент — текстовый, другой — видео
✅ Решение. Для создания карусели можно взять js-библиотеку Owl Carousel 2 (также нужен jQuery).
Алгоритм создания карусли из разного типа контента:
Создаем HTML-макет карусели и перед самой каруселью подключаем библиотеку Owl-Carousel и jQuery. Если на WordPress, то загружаем файлы Owl-Carousel на сервер и подключаем в functions.php.
Инициализируем карусель. Тут нужно обернуть блоки в классы owl-carousel owl-theme, чтобы стили применялись, а класс carousel_box может быть любым (можно через id).
Добавляем стили для кастомной кнопки. <button class="v_play"></button> может задаваться разными тегами, но должен идти сразу за видео.
Добавляем JS-скрипт, который будет обрабатывать кнопку воспроизведения видео.
...
💾 Код: https://wpcraft.top/?p=4123
#wordpress #Javascript #JS #OwlCarousel #jQuery #frontend #Carousel #WpCraftTop
❓Задача: Нужно сделать на странице сайта карусель (слайдер) с разным типом контента — видео, текст, вставка видео из Youtube. Такое можно увидеть, например, при отображении блока с отзывами, где один элемент — текстовый, другой — видео
✅ Решение. Для создания карусели можно взять js-библиотеку Owl Carousel 2 (также нужен jQuery).
Алгоритм создания карусли из разного типа контента:
Создаем HTML-макет карусели и перед самой каруселью подключаем библиотеку Owl-Carousel и jQuery. Если на WordPress, то загружаем файлы Owl-Carousel на сервер и подключаем в functions.php.
Инициализируем карусель. Тут нужно обернуть блоки в классы owl-carousel owl-theme, чтобы стили применялись, а класс carousel_box может быть любым (можно через id).
Добавляем стили для кастомной кнопки. <button class="v_play"></button> может задаваться разными тегами, но должен идти сразу за видео.
Добавляем JS-скрипт, который будет обрабатывать кнопку воспроизведения видео.
...
💾 Код: https://wpcraft.top/?p=4123
