JavaScript-JQuery: Как копировать текст по клику на него
#JavaScript #Вебмастеринг #сайтостроение #JQuery #Оптимизацияработы
❓Задача. Есть рутинная задача копировать текст из одного html-документа и вставлять на сайт. Каждый раз неудобно выделять и нажимать Ctrl+C, когда этик строк тысячи.

✅ Решение. Можно использовать JavaScript для облегчения этой задачи. Необходимо сделать так, чтобы по клику на строку копировалось в буфер обмена ее содержимое (текст). Естественно, нужно использовать какую-то программу из менеджеров буфера обмена (например ClipX), чтобы за раз проклацать несколько строк и можно было переходить на другую вкладку куда мы переносим текст и уже там вставляем как нужно из буфера обмена.

Решение по копированию текста по клику реализуется на JavaScript с использованием JQuery. Используем Код №1. Естественно свой html-документ нужно подготовить, чтобы каждая копируемая строка (текст) находилась в каком-то теге.
См. полную статью
💾 https://qfurs.ru/?p=1910

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

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

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

Показать-скрыть элемент, развернуть-свернуть под кат на 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

 КАРУСЕЛЬ С РАЗНЫМ ВИДОМ КОНТЕНТА: видео, текст, 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

Подборка слайдеров сравнения "До и После" с использованием CSS, JavaScript или jQuery [Before After Slider]
#CSS #JavaScript #jQuery #Slider
🚀 Смотреть https://wpcraft.top/slajder-sravneniya-do-i-posle-podborka-na-css-i-js/