Javascript-форум - Owl carousel на мобилках.

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Owl carousel на мобилках. (https://javascript.ru/forum/events/70851-owl-carousel-na-mobilkakh.html)

Owl carousel на мобилках.

Написал скрипт, чтобы owl-carousel подключалась только на мобилках. Работает нормально, но только если заходить сразу с мобилки, если делать resize окна, то не реагирует ? подскажите почему ?

$(window).on('resize', function(){
if($(window).width() <= 767) {
$('.doc-block').addClass('owl-carousel');
}
else {
$('.doc-block').removeClass('owl-carousel');
}
}).trigger('resize');

breeze125,
потому что owl-carousel проверяет наличие класса 'owl-carousel', только при загрузке страницы, и removeClass('owl-carousel'); никак не повлияет на отмену слайдера.

Цитата:

Сообщение от рони (Сообщение 466772)

Подскажите, а это можно как-то реализовать ? чтобы работало даже при resize окна ? В самом плагине не нашел возможности включать карусель только на нужных разрешениях

breeze125,
как то так ... если не сработает, читайте документацию (алгоритм верный, возможно синтаксис иной).

$(function() {
$(window).on('resize', function(){
var owlCarousel = $('.doc-block').data('owlCarousel');
 if($(window).width() <= 767) {
 !owlCarousel && $('.doc-block').owlCarousel();
 }
 else {
 owlCarousel && owlCarousel.destroy();
 }
 }).trigger('resize');
});

Цитата:

Сообщение от рони (Сообщение 466775)

breeze125,
как то так ... если не сработает, читайте документацию (алгоритм верный, возможно синтаксис иной).

$(function() {
$(window).on('resize', function(){
 if($(window).width() <= 767) {
 $('.doc-block').owlCarousel();
 }
 else {
 var owlCarousel = $('.doc-block').data('owlCarousel');
 owlCarousel && owlCarousel.destroy();
 }
 }).trigger('resize');
});

Спасибо, сейчас буду пробовать.

Я прошу прощение за наглость, но у меня еще один вопрос. Есть скрипт плавного скролла по якорям, нужно чтобы на мобилках при нажатии на ссылку, меню закрывалось. Я так понимаю, мне нужно отследить ширину окна, и когда разрешение меньше 767, закрывать меню по нажатию, но не могу понять, какое событие отслеживать.

$(".main-list").on("click","a", function (event) {
    event.preventDefault();
    var id  = $(this).attr('href'),
        top = $(id).offset().top;
    $('body,html').animate({scrollTop: top-50}, 2000);
  });

Я написал уже скрипт по отслеживанию, ширину браузера, помогите дополнить пожалуйста ?

$(window).on('resize', function(){
      if($(window).width() <= 767) {
      $('.main-list a').
      }
      }).trigger('resize');

Цитата:

Сообщение от breeze125

буду пробовать

скопируйте снова

breeze125,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от рони (Сообщение 466778)

[js]
... ваш код...
[/js]

Поправил код

Цитата:

Сообщение от breeze125

но у меня еще один вопрос.

$(function() {
$(".main-list").on("click","a", function (event) {
 event.preventDefault();
 if($(window).width() > 767){
   var id = $(this).attr('href'),
 top = $(id).offset().top;
 $('body,html').animate({scrollTop: top-50}, 2000);
 }
 else {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});

Цитата:

Сообщение от рони (Сообщение 466780)

$(function() {
$(".main-list").on("click","a", function (event) {
 event.preventDefault();
 if($(window).width() > 767){
   var id = $(this).attr('href'),
 top = $(id).offset().top;
 $('body,html').animate({scrollTop: top-50}, 2000);
 }
 else {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});

спасибо