{
    "version": "https:\/\/jsonfeed.org\/version\/1",
    "title": "Блог Чуденкова Алексея, заметки с тегом: jquery",
    "home_page_url": "https:\/\/blog.chudenkov.ru\/tags\/jquery\/",
    "feed_url": "https:\/\/blog.chudenkov.ru\/tags\/jquery\/json\/",
    "icon": "https:\/\/blog.chudenkov.ru\/user\/userpic@2x.jpg",
    "author": {
        "name": "Чуденков Алексей",
        "url": "https:\/\/blog.chudenkov.ru\/",
        "avatar": "https:\/\/blog.chudenkov.ru\/user\/userpic@2x.jpg"
    },
    "items": [
        {
            "id": "78",
            "url": "https:\/\/blog.chudenkov.ru\/",
            "title": "jQuery: иконка показать пароль в поле при вводе",
            "content_html": "<pre class=\"e2-text-code\"><code>$(this).toggleClass(&quot;help-eye help-eye-off&quot;);\r\n  var input = $($(this).attr(&quot;toggle&quot;));\r\n  if (input.attr(&quot;type&quot;) == &quot;password&quot;) {\r\n    input.attr(&quot;type&quot;, &quot;text&quot;);\r\n  } else {\r\n    input.attr(&quot;type&quot;, &quot;password&quot;);\r\n  }\r\n});<\/code><\/pre>",
            "date_published": "2020-03-12T17:27:24+03:00",
            "date_modified": "2020-03-12T17:27:37+03:00",
            "_date_published_rfc2822": "Thu, 12 Mar 2020 17:27:24 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "78",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "75",
            "url": "https:\/\/blog.chudenkov.ru\/all\/jquery-zapretit-vvodit-probely-v-e-mail\/",
            "title": "jQuery: запретить вводить пробелы в E-Mail",
            "content_html": "<p>Защита от дурака, который может скопировать и вставить почту с пробелами или хуже того ещё и написать её с пробелами.<\/p>\n<pre class=\"e2-text-code\"><code>$(&quot;#input_Id&quot;).change(function()\r\n     $(this).val($(this).val().replace(\/ +\/g, ''))\r\n});<\/code><\/pre>",
            "date_published": "2020-02-10T14:05:01+03:00",
            "date_modified": "2020-02-10T14:05:21+03:00",
            "_date_published_rfc2822": "Mon, 10 Feb 2020 14:05:01 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "75",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "71",
            "url": "https:\/\/blog.chudenkov.ru\/all\/shopify-add-quantity-button-to-cart\/",
            "title": "Shopify: add quantity button to cart",
            "content_html": "<p>Добавить в cart-template.liquid<\/p>\n<pre class=\"e2-text-code\"><code>&lt;input type='button' value='-' class='qtyminus' field='updates_{{ item.id }}' \/&gt;\r\n&lt;input type=&quot;number&quot; name=&quot;updates[]&quot; id=&quot;updates_{{ item.id }}&quot; class=&quot;quantity&quot; value=&quot;{{ item.quantity }}&quot; \/&gt;\r\n&lt;input type='button' value='+' class='qtyplus' field='updates_{{ item.id }}' \/&gt;<\/code><\/pre><p>Добавить в Assets cart.js и его содержание:<\/p>\n<pre class=\"e2-text-code\"><code>jQuery(document).ready(function(){\r\n    $('.qtyplus').click(function(e){\r\n        e.preventDefault();\r\n        fieldName = $(this).attr('field');\r\n        var currentVal = parseInt($('input[id='+fieldName+']').val());\r\n        if (!isNaN(currentVal)) {\r\n            $('input[id='+fieldName+']').val(currentVal + 1);\r\n        } else {\r\n            $('input[id='+fieldName+']').val(0);\r\n        }\r\n    });\r\n    $(&quot;.qtyminus&quot;).click(function(e) {\r\n        e.preventDefault();\r\n        fieldName = $(this).attr('field');\r\n        var currentVal = parseInt($('input[id='+fieldName+']').val());\r\n        if (!isNaN(currentVal) &amp;&amp; currentVal &gt; 0) {\r\n            $('input[id='+fieldName+']').val(currentVal - 1);\r\n        } else {\r\n            $('input[id='+fieldName+']').val(0);\r\n        }\r\n    });\r\n});<\/code><\/pre><p>Не забыть подключить JS с условием если вы находитесь на странице корзины, чтобы не перегружать сайт лишними скриптами.<\/p>\n",
            "date_published": "2020-02-01T13:35:31+03:00",
            "date_modified": "2020-02-01T13:35:26+03:00",
            "_date_published_rfc2822": "Sat, 01 Feb 2020 13:35:31 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "71",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "67",
            "url": "https:\/\/blog.chudenkov.ru\/all\/jquery-readmore-js-nastroyki\/",
            "title": "jQuery: readmore.js настройки",
            "content_html": "<pre class=\"e2-text-code\"><code>$('.content').readmore({\r\n    speed: 435,\r\n    maxHeight: 100,\r\n    moreLink: '&lt;a href=&quot;#&quot;&gt;Подробнее&lt;\/a&gt;',\r\n    lessLink: '&lt;a href=&quot;#&quot;&gt;Скрыть&lt;\/a&gt;',\r\n    afterToggle: function(trigger, element, more) {\r\n        if(more) {\r\n            $(&quot;.content span&quot;).css(&quot;background&quot;, &quot;none&quot;);\r\n        }\r\n        if(! more) {\r\n            $(&quot;.content span&quot;).css(&quot;background&quot;, &quot;linear-gradient(0deg, #f3f3f3, transparent)&quot;);\r\n            $('html, body').animate({\r\n                scrollTop: element.offset().top\r\n            },{\r\n                duration: 100\r\n            });\r\n        }\r\n    }\r\n});<\/code><\/pre><p>Настройки readmore.js по-русски:<\/p>\n<ol start=\"1\">\n<li>Speed — скорость разворачивания\/сворачивания в милесекундах. Оптимально 500.<\/li>\n<li>maxHeight — высота отображаемого блока в пикселях.<\/li>\n<li>moreLink — название ссылки «подробнее».<\/li>\n<li>lessLink — название ссылки «спрятать».<\/li>\n<\/ol>\n<p>Далее мне необходимо сделать так, чтобы поверх текста был градиент, который не обрубал текст на указанных пикселях в maxHeight, а плавно сходил на «нет». Для этого я сделал span внутри элемента и добавил в него стили:<\/p>\n<pre class=\"e2-text-code\"><code>.content span{ \r\n    background: linear-gradient(0deg, #f3f3f3, transparent);\r\n    position: absolute;\r\n    display: block;\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 10000;\r\n  }<\/code><\/pre><p>Соответственно при нажатии стили так и остаются, поэтому необходимо удалять фон при нажатии на кнопку «Подробнее». И для этого я написал условие:<\/p>\n<pre class=\"e2-text-code\"><code>if(more) {\r\n            $(&quot;.content span&quot;).css(&quot;background&quot;, &quot;none&quot;);\r\n        }<\/code><\/pre><p>Но возникла ещё одна загвоздка, когда нажимаем кнопку «Скрыть», то фон не возвращался, поэтому было написано следующее условие:<\/p>\n<pre class=\"e2-text-code\"><code>if(! more) {\r\n            $(&quot;.content span&quot;).css(&quot;background&quot;, &quot;linear-gradient(0deg, #f3f3f3, transparent)&quot;);\r\n            $('html, body').animate({\r\n                scrollTop: element.offset().top\r\n            },{\r\n                duration: 100\r\n            });<\/code><\/pre>",
            "date_published": "2019-11-16T19:41:42+03:00",
            "date_modified": "2019-11-16T19:41:37+03:00",
            "_date_published_rfc2822": "Sat, 16 Nov 2019 19:41:42 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "67",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "36",
            "url": "https:\/\/blog.chudenkov.ru\/all\/plavny-skroll-po-yakoryam-na-jquery\/",
            "title": "JS: Плавный скролл по якорям на jQuery",
            "content_html": "<ol start=\"1\">\n<li>Создаем блок с идентификатором, в котором есть ссылка на якорь.<\/li>\n<li>Добавим скрипт, например, для блока с идентификатором menu:<\/li>\n<\/ol>\n<pre class=\"e2-text-code\"><code>$(document).ready(function(){\r\n\t$(&quot;#menu&quot;).on(&quot;click&quot;,&quot;a&quot;, function (event) {\r\n\t\tevent.preventDefault(); \/\/опустошим стандартную обработку\r\n\t\tvar id  = $(this).attr('href'), \/\/заберем айдишник блока с параметром URL\r\n\t\t\ttop = $(id).offset().top; \/\/определим высоту от начала страницы до якоря\r\n\t$('body,html').animate({scrollTop: top}, 1000); \/\/сделаем прокрутку за 1 с\r\n\t});\r\n});<\/code><\/pre><ol start=\"3\">\n<li>Ф5, жмём кнопочки, любуемся.<\/li>\n<\/ol>\n<p>Альтернативный вариант без использования идентификатора menu:<\/p>\n<pre class=\"e2-text-code\"><code>$(function(){$(&quot;a[href*=#]:not([href=#])&quot;).click(function(){if(location.pathname.replace(\/^\\\/\/,&quot;&quot;)==this.pathname.replace(\/^\\\/\/,&quot;&quot;)&amp;&amp;location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$(&quot;[name=&quot;+this.hash.slice(1)+&quot;]&quot;),t.length)return $(&quot;html,body&quot;).animate({scrollTop:t.offset().top},1000),!1}})});<\/code><\/pre><p>Ещё один вариант без использования jQuery:<\/p>\n<pre class=\"e2-text-code\"><code>var linkNav = document.querySelectorAll('[href^=&quot;#&quot;]'), \/\/выбираем все ссылки к якорю на странице\r\n    V = 1;  \/\/ скорость, может иметь дробное значение через точку (чем меньше значение - тем больше скорость)\r\nfor (var i = 0; i &lt; linkNav.length; i++) {\r\n    linkNav[i].addEventListener('click', function(e) { \/\/по клику на ссылку\r\n        e.preventDefault(); \/\/отменяем стандартное поведение\r\n        var w = window.pageYOffset,  \/\/ производим прокрутка прокрутка\r\n            hash = this.href.replace(\/[^#]*(.*)\/, '$1');  \/\/ к id элемента, к которому нужно перейти\r\n        t = document.querySelector(hash).getBoundingClientRect().top,  \/\/ отступ от окна браузера до id\r\n            start = null;\r\n        requestAnimationFrame(step);  \/\/ подробнее про функцию анимации [developer.mozilla.org]\r\n        function step(time) {\r\n            if (start === null) start = time;\r\n            var progress = time - start,\r\n                r = (t &lt; 0 ? Math.max(w - progress\/V, w + t) : Math.min(w + progress\/V, w + t));\r\n            window.scrollTo(0,r);\r\n            if (r != w + t) {\r\n                requestAnimationFrame(step)\r\n            } else {\r\n                location.hash = hash  \/\/ URL с хэшем\r\n            }\r\n        }\r\n    }, false);\r\n}<\/code><\/pre>",
            "date_published": "2018-05-06T01:00:25+03:00",
            "date_modified": "2018-05-31T02:52:12+03:00",
            "_date_published_rfc2822": "Sun, 06 May 2018 01:00:25 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "36",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css",
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        },
        {
            "id": "11",
            "url": "https:\/\/blog.chudenkov.ru\/all\/owl-carousel-plavny-skrolling\/",
            "title": "Owl Carousel плавный скроллинг",
            "content_html": "<p>По умолчанию в owl carousel слайдер как-то грубо перелистывает картинки.<br \/>\nЛечится так:<\/p>\n<pre class=\"e2-text-code\"><code>$('.class').owlCarousel({\r\n            smartSpeed:1000\r\n        })<\/code><\/pre>",
            "date_published": "2018-03-20T00:27:10+03:00",
            "date_modified": "2018-03-20T00:27:08+03:00",
            "_date_published_rfc2822": "Tue, 20 Mar 2018 00:27:10 +0300",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "11",
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "system\/library\/highlight\/highlight.js",
                    "system\/library\/highlight\/highlight.css"
                ],
                "og_images": []
            }
        }
    ],
    "_e2_version": 3365,
    "_e2_ua_string": "E2 (v3365; Aegea)"
}