Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2018, 10:13
Новичок на форуме
Отправить личное сообщение для dranoc Посмотреть профиль Найти все сообщения от dranoc
 
Регистрация: 31.08.2017
Сообщений: 9

onresize не работает если добавлять условия
Здравствуйте! Есть скрипт который при загрузке определяет размер окна, а так отслеживает изменение размера
var win = $(this); //this = window
$(function(){
fnName();
window.onresize = fnName;
});
 
function fnName(){
if (win.width() <= 992) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 460,
            minSlides: 1,
            maxSlides: 1,
            speed: 800,
        });
    }else if (win.width() > 992 && win.width() < 1200) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 2,
            maxSlides: 2,
            speed: 800,
        });
    }else if (win.width() > 1200) {
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 3,
            maxSlides: 3,
            speed: 800,
            touchEnabled: false,
        });
    }
}

При загрузке проверяет, а вот при изменении код не меняется на другой, только если использовать 1 код без других которые в else if
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2018, 11:01
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,380

var win = $(this);

замените на всякий на
var win = $(window);

Дело не в условии, читайте документацию к плагину
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2018, 11:06
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,380

попробуйте после каждого if сначала
$('.bxslider').destroySlider();

if (win.width() <= 992) {
$('.bxslider').destroySlider();
        $('.bxslider').bxSlider({
            mode: 'horizontal',
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 460,
            minSlides: 1,
            maxSlides: 1,
            speed: 800,
        });
    }
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2018, 11:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,031

Сообщение от j0hnik
попробуйте после каждого if сначала
$('.bxslider').destroySlider();
идея правильная, но прежде чем разрушить, надо создать!
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2018, 11:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,380

Сообщение от рони
идея правильная, но прежде чем разрушить, надо создать!
да, там еще есть метод reloadSlider() наверное можно добавить после инициализации, и не разрушать
Ответить с цитированием
  #6 (permalink)  
Старый 17.11.2018, 11:49
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,031

bxSlider update resize
dranoc,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
 <style type="text/css">
   .bx-wrapper{
       margin: 0 auto;
   }
 </style>

  <script>
$(function() {
    function fnSettings() {
        var settings = {
                mode: "horizontal",
                moveSlides: 1,
                slideMargin: 30,
                infiniteLoop: true,
                slideWidth: 460,
                minSlides: 1,
                maxSlides: 1,
                speed: 800
            },
            width = $(window).width();
        if (width > 992 && width < 1200) settings = {
            mode: "horizontal",
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 2,
            maxSlides: 2,
            speed: 800
        };
        if (width > 1200) settings = {
            mode: "horizontal",
            moveSlides: 1,
            slideMargin: 30,
            infiniteLoop: true,
            slideWidth: 660,
            minSlides: 3,
            maxSlides: 3,
            speed: 800,
            touchEnabled: false
        };
        return settings
    }
    var settings = fnSettings();
    var bxslider = $(".bxslider").bxSlider(settings);
    $(window).resize(function() {
        settings = fnSettings();
        bxslider.reloadSlider(settings)
    })
});
  </script>
</head>

<body>

<div class="bxslider">
  <div><img src="https://bxslider.com/assets/images/coffee1.jpg" title="Funky roots"></div>
  <div><img src="https://bxslider.com/assets/images/coffee2.jpg" title="The long and winding road"></div>
  <div><img src="https://bxslider.com/assets/images/coffee3.jpg" title="Happy trees"></div>
</div>


</body>
</html>
Ответить с цитированием
  #7 (permalink)  
Старый 17.11.2018, 12:51
Новичок на форуме
Отправить личное сообщение для dranoc Посмотреть профиль Найти все сообщения от dranoc
 
Регистрация: 31.08.2017
Сообщений: 9

cпасибо, работает!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не работает атрибут onresize TANDEROID Элементы интерфейса 1 06.10.2017 11:04
Не работает flot если его назначит через JavaScript PAMAC Firefox/Mozilla 4 09.11.2009 18:46
Модуль для работы с модулями JSprog Ваши сайты и скрипты 29 02.09.2009 13:31
Safari + ajax некорректно работает, а в других работает demi AJAX и COMET 35 15.07.2009 14:11
не работает функц. календаря если в имение есть [] kotjke Я не знаю javascript 2 04.06.2009 11:43