jQuery - сбросить переменную / обновить переменную при изменении размера окна - PullRequest
Новая
       17

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

1 голос
/ 28 марта 2012

Я работаю с плагином 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/

1 Ответ

0 голосов
/ 28 марта 2012

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

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

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

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

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

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

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

DEMO

...