https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array
Рубрика: JS
Как предотвратить повторную отправку формы при обновлении страницы (F5 / CTRL + R)
|
1 2 3 4 5 |
<script> if ( window.history.replaceState ) { window.history.replaceState( null, null, window.location.href ); } </script> |
Показать список контента по 5 блоков
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// подгрузка контента на главной let items = document.querySelectorAll(".block_2_items_right .item"); let more = document.querySelector(".block_34_add_more"); let currentIndex = 5; more.addEventListener("click", function() { for (let i = currentIndex; i < currentIndex + 5; i++) { if (i >= items.length) { more.style.display = 'none'; break; } items[i].classList.remove("hide"); } currentIndex += 5; if (currentIndex >= items.length) { currentIndex = 0; } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class="block_2_items_right"> <a href="javascript:;" data-fancybox data-src="#order_form" class="item">Головная боль</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item">Слабая концентрация</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item">Замена звуков или слов</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item">Заикание</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item">Затруднения в адаптации</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Движение головы</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Ограниченные социальные навыки</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Повышенная чувствительность</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Сложности произноения звуков или слогов</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Трудности в организации</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Сложности в школе</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Частые ошибки</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Задержка развития речи</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Спастические движения</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Вырывания волос</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Ограниченные и повторяющиеся интересы</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Непроизвольное издавание звуков</a> <a href="javascript:;" data-fancybox data-src="#order_form" class="item hide">Отсутствие эмоционального контакта</a> </div> <div class="block_34_add_more">Показать еще...</div> |
|
1 2 3 |
.full_block_2 .item.hide { display: none; } |
Slick.js: Скрыть слайдер, пока изображения не загрузятся
Решением является чистый CSS. Во-первых, вы добавляете CSS в свою слайдерную оболочку:
|
1 2 3 4 5 6 |
.your-slider-wrapper { opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease; } |
После того, как слайдер инициализирован, slick добавляет класс .slick-initialized к wrapeper. Вы …
Прокрутите страницу вверх в ванильном JavaScript
|
1 2 3 |
<div class="up_scroll"> <img src="<?=get_template_directory_uri();?>/img/up-arrow.svg" alt="up" width="32px" height="32px"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.up_scroll { position: fixed; background: #ff6610; width: 32px; height: 32px; bottom: 20px; right: 20px; visibility: hidden; cursor: pointer; z-index: 10; } .up_scroll img { padding: 5px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const scrollBtn = document.querySelector(".up_scroll"); const btnVisibility = () => { if (window.scrollY > 400) { scrollBtn.style.visibility = "visible"; } else { scrollBtn.style.visibility = "hidden"; } }; document.addEventListener("scroll", () => { btnVisibility(); }); scrollBtn.addEventListener("click", () => { window.scrollTo({ top: 0, behavior: "smooth" }); }); |
Редирект с http на https через файл .htaccess
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Редирект с http на https через файл .htaccess (ложить в корень сайта) RewriteEngine On RewriteCond %{HTTPS} off RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] ErrorDocument 404 /404.html Редирект с wwww на без wwww через файл .htaccess (ложить в корень сайта) RewriteEngine On RewriteCond %{HTTP_HOST} ^www\.(.*)$ RewriteRule ^(.*)$ http://%1/$1 [L,R=301] ErrorDocument 404 /404.html Редирект включающий обе функции еще и 404 ошибка прописанна бонусом))) RewriteEngine On RewriteCond %{HTTPS} off RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteCond %{HTTP_HOST} ^www\.(.*)$ RewriteRule ^(.*)$ http://%1/$1 [L,R=301] ErrorDocument 404 /404.html |
Ищем «мертвый» JS и CSS на сайте. Изучаем coverage
Корзина товаров для лендинга или любого html сайта
Скрипт корзины для лендинга https://disk.yandex.ru/d/vkyYujH4paQVhw
Библиотека List.js для поиска, сортировки, и пагинации
https://listjs.com/
Редактор текста и кода (библиотека)
https://quilljs.com/
Всплывающее окно при уходе с сайта
https://webdevhelp.ru/solutions/vsplyvayushchee-okno-pri-ukhode-s-sayta/
Снег на сайте
https://embed.im/snow/