Блог Чуденкова Алексея, заметки с тегом: jquery

jQuery: иконка показать пароль в поле при вводе

Thu, 12 Mar 2020 17:27:24 +0300

$(this).toggleClass("help-eye help-eye-off");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

jQuery: запретить вводить пробелы в E-Mail

Mon, 10 Feb 2020 14:05:01 +0300

Защита от дурака, который может скопировать и вставить почту с пробелами или хуже того ещё и написать её с пробелами.

$("#input_Id").change(function()
     $(this).val($(this).val().replace(/ +/g, ''))
});

Shopify: add quantity button to cart

Sat, 01 Feb 2020 13:35:31 +0300

Добавить в cart-template.liquid

<input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' />
<input type="number" name="updates[]" id="updates_{{ item.id }}" class="quantity" value="{{ item.quantity }}" />
<input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' />

Добавить в Assets cart.js и его содержание:

jQuery(document).ready(function(){
    $('.qtyplus').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal)) {
            $('input[id='+fieldName+']').val(currentVal + 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
    $(".qtyminus").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        var currentVal = parseInt($('input[id='+fieldName+']').val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $('input[id='+fieldName+']').val(currentVal - 1);
        } else {
            $('input[id='+fieldName+']').val(0);
        }
    });
});

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

jQuery: readmore.js настройки

Sat, 16 Nov 2019 19:41:42 +0300

$('.content').readmore({
    speed: 435,
    maxHeight: 100,
    moreLink: '<a href="#">Подробнее</a>',
    lessLink: '<a href="#">Скрыть</a>',
    afterToggle: function(trigger, element, more) {
        if(more) {
            $(".content span").css("background", "none");
        }
        if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

Настройки readmore.js по-русски:

Speed — скорость разворачивания/сворачивания в милесекундах. Оптимально 500.
maxHeight — высота отображаемого блока в пикселях.
moreLink — название ссылки «подробнее».
lessLink — название ссылки «спрятать».

Далее мне необходимо сделать так, чтобы поверх текста был градиент, который не обрубал текст на указанных пикселях в maxHeight, а плавно сходил на «нет». Для этого я сделал span внутри элемента и добавил в него стили:

.content span{ 
    background: linear-gradient(0deg, #f3f3f3, transparent);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }

Соответственно при нажатии стили так и остаются, поэтому необходимо удалять фон при нажатии на кнопку «Подробнее». И для этого я написал условие:

if(more) {
            $(".content span").css("background", "none");
        }

Но возникла ещё одна загвоздка, когда нажимаем кнопку «Скрыть», то фон не возвращался, поэтому было написано следующее условие:

if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });

JS: Плавный скролл по якорям на jQuery

Sun, 06 May 2018 01:00:25 +0300

Создаем блок с идентификатором, в котором есть ссылка на якорь.
Добавим скрипт, например, для блока с идентификатором menu:

$(document).ready(function(){
	$("#menu").on("click","a", function (event) {
		event.preventDefault(); //опустошим стандартную обработку
		var id  = $(this).attr('href'), //заберем айдишник блока с параметром URL
			top = $(id).offset().top; //определим высоту от начала страницы до якоря
	$('body,html').animate({scrollTop: top}, 1000); //сделаем прокрутку за 1 с
	});
});

Ф5, жмём кнопочки, любуемся.

Альтернативный вариант без использования идентификатора menu:

$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},1000),!1}})});

Ещё один вариант без использования jQuery:

var linkNav = document.querySelectorAll('[href^="#"]'), //выбираем все ссылки к якорю на странице
    V = 1;  // скорость, может иметь дробное значение через точку (чем меньше значение - тем больше скорость)
for (var i = 0; i < linkNav.length; i++) {
    linkNav[i].addEventListener('click', function(e) { //по клику на ссылку
        e.preventDefault(); //отменяем стандартное поведение
        var w = window.pageYOffset,  // производим прокрутка прокрутка
            hash = this.href.replace(/[^#]*(.*)/, '$1');  // к id элемента, к которому нужно перейти
        t = document.querySelector(hash).getBoundingClientRect().top,  // отступ от окна браузера до id
            start = null;
        requestAnimationFrame(step);  // подробнее про функцию анимации [developer.mozilla.org]
        function step(time) {
            if (start === null) start = time;
            var progress = time - start,
                r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t));
            window.scrollTo(0,r);
            if (r != w + t) {
                requestAnimationFrame(step)
            } else {
                location.hash = hash  // URL с хэшем
            }
        }
    }, false);
}

Owl Carousel плавный скроллинг

Tue, 20 Mar 2018 00:27:10 +0300

По умолчанию в owl carousel слайдер как-то грубо перелистывает картинки.
Лечится так:

$('.class').owlCarousel({
            smartSpeed:1000
        })