#js #frontend #javascript

Копирование и сохранение текста в файл .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

#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

Отложенная загрузка скриптов, 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/