jQuery - сбросить var/обновить var при изменении размера окна

Я работаю с плагином jQuery, который имеет следующее:

var $el  = $(this),

$wrapper = $el.find('div.ca-wrapper'),

$items   = $wrapper.children('div.ca-item'),

cache    = {};

// save the with of one item    

cache.itemW      = $items.width();

// save the number of total items

cache.totalItems = $items.length;

Моя проблема здесь в том, что ширина div, которую мне нужно получить, является плавной: это 33% его оболочки. Плагин хорошо работает, когда страница загружается, но ужасно ломается, когда изменяется размер окна.

Я думаю, что мне нужно снова получить переменные при изменении размера, если вы не можете придумать лучшую альтернативу.

Вот ссылка на WIP: http://arielodiz.com.ar/test/ (прокрутите вниз в «портфолио»)

Это оригинальный плагин: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/


jquery refresh window var resize
person Ariel    schedule 28.03.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Проблема в том, что плагин делает DIV абсолютным позиционированием и не обновляет позиции при изменении размера автоматически.

Быстрое решение (хотя и не очень хорошее) — снова запустить плагин при изменении размера окна:

$(window).resize(function() {
    $('#ca-container').contentcarousel({
        scroll : 2
    });
});

Лучшим решением было бы связать событие изменения размера в методе инициализации самого плагина - возможно, добавив параметр для управления им - чтобы повторно выполнить расчет и изменить положение элементов при изменении размера окна.

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

Вот код, который нужно добавить в метод инициализации (см. скрипт для правильного места).

var resizeTimer;
// bind the resize event of the window
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        // re-select the items in the order they are now
        var $elements = $wrapper.children('.ca-item');
        // re-calc the width
        cache.itemW = $elements.width();
        // change position accordingly
        $elements.each(function(i) {
            $(this).css({
                left: i * cache.itemW + 'px'
            });
        });
    }, 150);
});

ДЕМО

person Didier Ghys    schedule 28.03.2012
comment
Я уже пробовал это, но плагин создает много элементов, и если я просто запускаю его снова и снова, он переполняется. - person Ariel; 28.03.2012
comment
если бы не было способа «отменить» результаты плагина перед его повторным запуском. - person Ariel; 28.03.2012
comment
Мне просто нужно несколько минут, чтобы найти лучшее решение, посмотрите. Вы также можете добавить опцию в плагин, чтобы он по умолчанию перемещался при изменении размера окна. - person Didier Ghys; 28.03.2012
comment
Что ж, плагин кэширует ширину в методе инициализации и использует это кэшированное значение. Это нужно делать немного по-другому. Я подумаю о чем-нибудь другом и вернусь к этому. - person Didier Ghys; 28.03.2012
comment
Большое спасибо за помощь! Мне не удалось заставить его работать с последним обновлением, возможно, это моя ошибка. Посмотрим, с чем ты вернешься, и если этого не произойдет, я думаю, мне придется сдаться и построить это по-другому. Еще раз БОЛЬШОЕ спасибо! - person Ariel; 28.03.2012
comment
Я обновил свой ответ. Для таймаута может и не надо, просто попробуй с или без. - person Didier Ghys; 28.03.2012