Рубрика: JS

For phone masking use this webstool.ru/jquery.maskedinput.html

jQuery( "ul[aria-label='Shoe Size'] li[data-value='39']" ).click()

Иногда бывает ситуация, когда у блоков, к которым нет доступа необходимо удалить ссылки. Например, если вы имеете дело с сайтом, созданном на cms вордпресс, в котором блоки на странице набросаны плагином конструктором контента. Блок выглядит как нужно, содержит необходимую пользователю информацию, но с иконок или заголовков идут ссылки, предусмотренные стандартным компонентом плагина.  А ссылки эти не нужны, из-за них страница теряет вес.

Решить данную ситуацию поможет javascript.  Сделать это можно с помощью кода:

Array.prototype.forEach.call(document.querySelectorAll('.darna-icon-box a, .darna-process a'), el => {
  if (!el.value) {
    el.removeAttribute("href");
  }
})

Достоинство кода в том, что в операторе выбора можно через запятую указать все ссылки, у которых необходимо удалить href.

В формах заявки на сайтах всегда есть поле ввода для телефона. Чтобы пользователь не мог ввести туда сторонних символов используется скрипт maskedinput. Но проблема в том, что если просто подключить данный скрипт, то пользователь может начать ввод телефона с любой позиции. Точнее будет сказать — с той, в которую попадет нажав мышь. Следующий код поможет это исправить, он будет ставить курсор в начало строки ввода.

$(function () {
    $.mask.definitions['9'] = '';
    $.mask.definitions['d'] = '[0-9]';
    $('input[type="tel"]').mask("+7(ddd) ddd-dd-dd");
});
$.fn.setCursorPosition = function(pos) {
    if ($(this).get(0).setSelectionRange) {
      $(this).get(0).setSelectionRange(pos, pos);
    } else if ($(this).get(0).createTextRange) {
      var range = $(this).get(0).createTextRange();
      range.collapse(true);
      range.moveEnd('character', pos);
      range.moveStart('character', pos);
      range.select();
    }
  };
  $('input[type="tel"]').click(function(){
    $(this).setCursorPosition(3);  // set position number
  });

В данном примере сначала производится маскирование номера телефона. Поле ввода телефона должно иметь атрибут type=»tel». И курсор будет ставиться в третью позицию после +7(

 

 

Существует большое количество различных скриптов, которые реализуют функционал слайдера и галереи изображений.

На вкус и цвет товарищей нет, но данный скрипт по праву является одним из самых популярных в данной категории. Подключается он с помощью двух строк, добавленных в код страницы сайта:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css" integrity="sha256-P8k8w/LewmGk29Zwz89HahX3Wda5Bm8wu2XkCC0DL9s=" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script>

Читать далее «fancybox 3 подключить»

Для анализа юзабилити сайта и эффективности отдельных элементов страниц используют цели.  В приведенном ниже коде для отслеживания события клика по кнопке используется jquery:

$("#sendMessage_OneClick").click(function(e) {			 
			 gtag('event', 'click', {
				 'event_category': 'quick_shop',
				 'event_label': 'quick-button'
			 });
			 yaCounter19340647.reachGoal('quick_shop');return true;
 });

Очень часто цели метрики вешают прямо на элемент. То есть прямо на кнопку добавляют событие onsubmit с кодом от ЯМ или ГА. Но такой подход очень тяжел, не всегда быстро и легко найти место в шаблоне, где можно привязать метрику к необходимому элементу.

Данный скрипт используется для того, чтобы на экранах с большим разрешением (стандартное разрешение ретина 2880 x 1800) заменять картинки на их копии с лучшим качеством.  Например:

<img src="images/boi.jpg" data-at2x="images/boi_retina.jpg">

В данном случае на обычных экранах будет подключаться картинка  images/boi.jpg, а на ретина экранах boi_retina.jpg. Естественно последнее изображение имеет лучшее качество(соответственно и больший вес). Скрипт анализирует наличие у тегов атрибута

data-at2x

И в случае необходимости использует его. Подключен скрипт должен быть перед закрывающимся тегом body

<script src="js/retina-1.1.0.min.js"></script>

 

Кнопка вверх актуальна для одностраничных сайтов, так как они имеют длинное тело. А также при просмотре сайтов, с большим количеством материала с мобильных устройств. Для добавления кнопки на сайт необходимо в верстку добавить элемент с id=»scrollup».  При наведении на этот элемент он будет осветляться. Показываться кнопка будет только при прокрутке страницы, заданной в теле скрипта(сейчас стоит смещение 550 пикселей). Читать далее «Кнопка вверх для сайта»