Question

I’m working with a jQuery plugin that has this:

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;

My problem here is that the div’s width that I need to get is fluid: it’s a 33% of it’s wrapper. The plugin works nice when the page loads, but breaks really ugly when the window is resized.

I think that what I need is to get the vars again on resize, unless you can think of a better alternative.

Here’s a link to the WIP: http://arielodiz.com.ar/test/ (scroll down to the ‘portfolio’)

This is the original plugin: http://tympanus.net/codrops/2011/08/16/circular-content-carousel/

Answer 1

The problem is that the plugin makes the DIV absolute positionned and does not refresh the positions on resize automatically.

A quick solution (not a good one though) is to init the plugin again on window resize:

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

---

A better solution would be to bind the resize event in the init method of the plugin itself – maybe adding an option to control it – to re-do the calculation and re-position the elements when the window is resized.

Depending on the browser, the resize event fires multiple times or only when the resize is done, so I use a timeout of 150ms that will make the re-calc when the mouse supposedly stopped moving…

Here’s the code to add in the init method (see the fiddle for the correct place).

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