Рубрика: JS

Показать список контента по 5 блоков

PHP
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;
  }
 
});

PHP
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>

PHP
1
2
3
.full_block_2 .item.hide {
display: none;
}

 

Slick.js: Скрыть слайдер, пока изображения не загрузятся

Решением является чистый CSS. Во-первых, вы добавляете CSS в свою слайдерную оболочку:

PHP
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

PHP
1
2
3
<div class="up_scroll">
  <img src="<?=get_template_directory_uri();?>/img/up-arrow.svg" alt="up" width="32px" height="32px">
</div>

PHP
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;
}

PHP
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

PHP
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