Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.10.2017, 11:04
Интересующийся
Отправить личное сообщение для breeze125 Посмотреть профиль Найти все сообщения от breeze125
 
Регистрация: 04.09.2017
Сообщений: 12

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');
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2017, 11:34
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,607

breeze125,
потому что owl-carousel проверяет наличие класса 'owl-carousel', только при загрузке страницы, и removeClass('owl-carousel'); никак не повлияет на отмену слайдера.
Ответить с цитированием
  #3 (permalink)  
Старый 07.10.2017, 11:36
Интересующийся
Отправить личное сообщение для breeze125 Посмотреть профиль Найти все сообщения от breeze125
 
Регистрация: 04.09.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
breeze125,
потому что owl-carousel проверяет наличие класса 'owl-carousel', только при загрузке страницы, и removeClass('owl-carousel'); никак не повлияет на отмену слайдера.
Подскажите, а это можно как-то реализовать ? чтобы работало даже при resize окна ? В самом плагине не нашел возможности включать карусель только на нужных разрешениях
Ответить с цитированием
  #4 (permalink)  
Старый 07.10.2017, 11:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,607

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

Последний раз редактировалось рони, 07.10.2017 в 11:51.
Ответить с цитированием
  #5 (permalink)  
Старый 07.10.2017, 11:53
Интересующийся
Отправить личное сообщение для breeze125 Посмотреть профиль Найти все сообщения от breeze125
 
Регистрация: 04.09.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
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, 07.10.2017 в 12:03.
Ответить с цитированием
  #6 (permalink)  
Старый 07.10.2017, 12:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,607

Сообщение от breeze125
буду пробовать
скопируйте снова
Ответить с цитированием
  #7 (permalink)  
Старый 07.10.2017, 12:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,607

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #8 (permalink)  
Старый 07.10.2017, 12:04
Интересующийся
Отправить личное сообщение для breeze125 Посмотреть профиль Найти все сообщения от breeze125
 
Регистрация: 04.09.2017
Сообщений: 12

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

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


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Поправил код
Ответить с цитированием
  #9 (permalink)  
Старый 07.10.2017, 12:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 24,607

Сообщение от 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 {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});
Ответить с цитированием
  #10 (permalink)  
Старый 07.10.2017, 12:14
Интересующийся
Отправить личное сообщение для breeze125 Посмотреть профиль Найти все сообщения от breeze125
 
Регистрация: 04.09.2017
Сообщений: 12

Сообщение от рони Посмотреть сообщение
$(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 {
   // что вы тут хотите закрыть одному вам известно
 }
 });

});
спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Owl carousel 2 и старые версии браузеров Quark_ Javascript под браузер 0 11.09.2017 20:10
Баг с owl carousel 2 и history.back(); или обновлением страницы agrovinn Javascript под браузер 0 06.04.2017 20:38
Миниатюры в пагинации Owl Carousel kos0760 jQuery 5 20.05.2016 00:21
Owl carousel 2 не работает с табами - как поправить? ligisayan jQuery 7 08.05.2016 13:41
Почему не правильно считает номера слайдов в карусели owl carousel 2? ligisayan jQuery 13 22.04.2016 10:22