КАК СКАЧАТЬ ЗАЩИЩЕННОЕ ВИДЕО С VIMEO PLAYER НА КОМПЬЮТЕР
#лайфхак #КакСкачать #Вебмастеринг #сайтостроение #HTML #программирование
❓ЗАДАЧА. Необходимо было из кабинета трансляции курса сохранить видео на компьютер, чтобы посмотреть потом. Но видео оказалось защищенным (приватным) и размещено без прямой ссылки на файл через Vimeo player..
✅ Алгоритм скачивания с видео с Vimeo player:

1 - Открыть страницу с видео.
2- Открыть инспектор кода в браузере (F12).
3 - Найти ссылку которая начинается на «blob», на подобие этого video tabindex="-1" src="blob:https://player.vimeo.com/1a1aaaac-661e-4aaa-1aa1-aa1111111a11" preload="none" width="300" height="150">
4 - Отредактировать, т.е. заменить «blob» на «x», а потом обратно «x» на «blob». Ссылка изменится на файл с расширением mp4. Также может быть так, что ссылка изменится сразу сама и ненужно будет менять обратно на с «x» на «blob».
5 - Выбрать в настройках видеоплеера нужное качество видео.
6 - Скопировать или открыть данную ссылку из п.4 и сохранить видео.
💾 https://qfurs.ru/?p=2169

Шпаргалка CSS Flexbox: Flex-префиксы для кросбраузерности
#CSS #Вебмастеринг #сайтостроение #HTML #программирование
✅ CSS Flexbox (флексы) — модель верстки, которая делает более удобным решение таких вопросов как:

Создание всех колонок в макете одинаковой высоты, даже если заполнение у них разное.
Оформление всех дочерних элементов контейнера таким образом, чтобы они распределили между собой доступную ширину или высоту, в независимости от того, сколько ширины или высоты доступно.
Вертикальное выравнивание блока внутри родителя.
💾 https://qfurs.ru/?p=2180

Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры
#CSS #Вебмастеринг #сайтостроение #HTML #программирование #Javascript #popup #Всплывающееокно
✅ Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).

Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript. + В статье есть подборка разных примеров.
💾 https://qfurs.ru/?p=2320

Раскрывающаяся HTML-таблица по клику
#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

Сортировка HTML-таблицы на JavaScript
#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

Верхние и нижние индексы: HTML-теги, таблица
#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

Как сделать список в 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

Как проверить ввод данных адреса Email и номера телефона
#Вебмастеринг #сайтостроение #HTML #javascript #email #phone #РегулярныеВыражения
❓Задача. Необходимо решение для проверки поля ввода на соответствие формату email-адреса почты и номера телефона при отправке формы.

✅ Решение. На Javascript можно реализовать проверку вводимой информации с помощью регулярных выражений. Используем Код №1 из Примера №1. Телефон проверяем так, чтобы первая была «+» или цифра, остальные — цифры, скобки и пробелы.

Суть в том, что на кнопку вешаем событие и при клике вызываем функции, которые получают содержимое полей и проверяют соответствие содержимого (в примере это функции ValidPhone и ValidEmail). В каждой функции мы содаем регулярные выражения (шаблоны), согласно котором будут проверяться вводимые данные.
Метод для регулярного выражения — .test(str) ищет совпадение и возвращает true/false, в зависимости от того, нашел ли он его или нет.
💾 https://wpcraft.top/?p=2872

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

Вкладки на JavaScript
#Вебмастеринг #сайтостроение #HTML #javascript #jquery #Вкладки #Табы #frontend #tabs
❓Задача. Нужно сделать вкладки и настроить переключение между ними с помощью JavaScript.

✅ Решение. Этот вариант подойдет если вкладки верстаются с нуля или есть возможность добавить свои классы и индетификаторы в код Примеру №1 и Коду №1. (См. статью)

+ Подборка примеров
💾 https://wpcraft.top/?p=2996

Копирование и сохранение текста в файл .txt на JavaScript
#Программирование #JavaScript #вебмастеринг #WpCraft #JS #HTML
❓Задача. Реализовать скачивание текста в текстовом файле .txt из определенного элемента на странице.

✅ Решение: На JavaScript можно сделать скачивание контента в виде текстового файла так:

 /* Сохраняемый контент */
let btnDownloadText = document.querySelector("#btn-dwnld-txt");
 
/* Вешаем на событие клика кнопки функцию */ 
btnDownloadText.addEventListener("click", downloadText);
 
/* Сохранить строку без html-тегов и скачать в файле */ 
function downloadText() { 
 let copytext = document.querySelector('#example-text').textContent; // id элемента с контентом #example-text 
 let el = document.createElement('a'); 
 el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(copytext)); 
 el.setAttribute('download', 'my-text.txt'); 
 el.style.display = 'none'; 
 document.body.appendChild(el); 
 el.click(); 
 document.body.removeChild(el); 
 }

💾 Подробнее см. статью https://wpcraft.top/?p=3445

Показать-скрыть элемент, развернуть-свернуть под кат на jQuery
#Программирование #JavaScript #вебмастеринг #jQuery #WpCraft #JS #HTML
❓Задача. Есть блок с плиткой тегов, который имеет на разных страницах разное количество элементов. Когда этих элементов много и они не помещаются в одну строку. Нужно под блоком добавить кнопу «Развернуть-Свернуть»

✅ Решение: Подробнее в статье.

<script> 
 // Скрипт свернуть развернуть элемент 
 $(document).ready(function() { 
  var closeHeight = '80px';  // Высота блока в свернутом виде 
  var moreText  = 'Развернуть'; 
  var lessText = 'Свернуть'; 
  var duration = '1500';  // Продолжительность анимации 
  var easing = 'linear'; 
  var collapsElement = '#tags-tiles'; // Идентификатор или класс элемента, который будет сворачиваться 
   
  var current = $(collapsElement); // Получаем элемент, который будет сворачиваться 
   
  // Если элемент больше нужной высоты, то добавляем Развернуть/Свернуть 
  if (current.height() > parseInt(closeHeight)){ 
   current.data('fullHeight', current.height()).css('height', closeHeight); 
   current.after('<a href="javascript:void(0);" class="more-link closed">' + moreText + '</a>'); 
  
   var openSlider = function() { 
    link = $(this); 
    var openHeight = link.prev(collapsElement).data('fullHeight') + 'px'; 
    link.prev(collapsElement).animate({'height': openHeight}, {duration: duration }, easing); 
    link.text(lessText).addClass('open').removeClass('closed'); 
    link.unbind('click', openSlider); 
    link.bind('click', closeSlider); 
   } 
 
   var closeSlider = function() { 
    link = $(this); 
    link.prev(collapsElement).animate({'height': closeHeight}, {duration: duration }, easing); 
    link.text(moreText).addClass('closed').removeClass('open'); 
    link.unbind('click'); 
    link.bind('click', openSlider); 
   } 
   
   $('.more-link').bind('click', openSlider); 
  } 
 }); 
</script>

💾 Подробнее см. статью https://wpcraft.top/?p=3669

Как обернуть HTML-элемент в тег noindex
#Программирование #JavaScript #вебмастеринг #WpCraft #JS #HTML
❓Задача. Нужно с помощью JavaScript добавить тег комментарий в код HTML, обернуть конкретный элемент в тег <!--noindex-->.

✅ Решение: Скрипт:

<script>
/* Обернуть элемент по id в тег noindex */

let elem = document.querySelector('#my-elem');
elem.insertAdjacentHTML('beforebegin', '<!--noindex-->');
elem.insertAdjacentHTML('afterend', '<!--/noindex-->');
</script>

💾 Подробнее см. статью https://wpcraft.top/?p=3848

КАК СДЕЛАТЬ МАСКУ ВВОДА ТЕЛЕФОНА В HTML НА JAVASCRIPT
#wordpress #Javascript #JS #ContactForm7 #CF7 #HTML #WpCraftTop

❓Задача: На всех формах где есть поле ввода для телефона добавить ввод номера по маске.

✅ Решение. Используем плагин для jQuery «Masked Input Plugin for jQuery». Соответственно, должен быть jQuery подключен.
Алгоритм настройки маски телефоная для формы:
1 - Скачать библиотеку и загрузить файл плагина 'jquery.maskedinput.min.js' на сервер.
2 - Подключить библиотеку.
3- Добавить скрипт с настройками для каких форм применять.

...
💾 Код: https://wpcraft.top/?p=3873

Отложенная загрузка скриптов, Youtube, iframe, video
#javascript #js #html #pagespeed #lazyload #оптимизациясайт #WpCraftTop
❓Задача. На сайте могут добавляться скрипты (часто внешние), iframe и другие элементы, которые добавляют на страницу различные элементы или функциональности, например: электронные читалки, аудиоплееры, виджет чата, видео-плеер и прочее. Как правило это влияет на скорость загрузки сайта и оценку в Pagespeed.web.dev, т.к. внешние скрипты подгружают свои элементы, шрифты и скрипты. В большинстве случаев нет необходимости загружать такие скрипты сразу при загрузке страницы.
✅ Достаточно отложить их загрузку и инициализировать только при каком-то событии. Например при клике на кнопку или движении мыши.
А также можно использовать Intersection Observer API.

Смотреть: https://wpcraft.top/otlozhennaya-zagruzka-skriptov-youtube-iframe-video-html/

💻 Специальные символы HTML
#вебмастер #Woo #HTML #сайты #Шпаргалки
©| 🔍 | ☎️ | ⌛️ | ✉️ | 🔥 | 🔔 | 🔒 | ❄️ | ★ | 💳 | ⏰

💾 Вся таблица

Как отправить форму со страницы без настройки на сервере
#HTML #Form
🔴 Отправить данные формы из HTML нельзя, нужно настраивать обработку отправку на сервере (обычно через php). Это требует некоторых навыков, а так же могут быть сложности на самом хостинге.
🟢 Бесплатное решение через API:
1. Перейти на https://web3forms.com.
2. Создать ключ доступа.
3. На почту придет ключ.
4. Форме задаем action="https://api.web3forms.com/submit" method="POST"
5. Создать скрытое поле с access_key и указываем в нем ключ.

💾 https://wpcraft.top/html-forma-otpravka-formy-bez-php/

<form id="subscribe" action="https://api.web3forms.com/submit" method="POST">
    <input type="hidden" name="access_key" value="xxxx-xxxx-xxxx-xxxx-xxxx">
    <input type="checkbox" name="botcheck" class="hidden" style="display: none;">
<input type="hidden" name="redirect" value="https://mywebsite.com/thanks.html">
    <input type="email" id="email" class="input input-email" name="email" required>
    <button type="submit">Подписаться</button>
</form>