Can stellar.js readjust element offsets on window resize?

Question

Is there a way to reinitialize stellar.js on browser/window resize so that the element offsets get readjusted?

Answer 1

First of all, it sounds like you might be having an issue with horizontal alignment (assuming it's a vertical site). If so, it's likely that you only need to disable horizontal scrolling:

$.stellar({
    horizontalScrolling: false
});

If this doesn't solve your issue, Stellar.js has an undocumented feature that allows you to refresh the plugin.

For example, let's assume you used Stellar.js like this:

$.stellar();

You can refresh it with the following:

$.stellar('refresh');

So, to refresh it on resize, you could do something like this:

$(window).resize(function() {
    $.stellar('refresh');
});

Hopefully this should fix everything for you.

Answer 2

After a bit of sleuthing, I've figured this one out. In my case, I have 'slides', which contain my stellar elements, and they are sized to full width/height of the viewport. I needed to resize them for tablet orientation change.

$(window).resize(function(){
    winHeight = $(window).height();
    $("#scrollWrapper > div").height(winHeight);

    // Find out all my elements that are being manipulated with stellar
    var particles = $(window).data('plugin_stellar').particles;

    // Temporarily stop stellar so we can move our elements around
    // data('plugin_stellar') let's me access the instance of stellar
    // So I can use any of its methods. See stellar's source code
    $(window).data('plugin_stellar').destroy();

    $.each(particles, function(i, el){
        // destroy() sets the positions to their original PIXEL values. 
        // Mine were percentages, so I need to restore that.
        this.$element.css('top', '');

        // Once the loop is finished, re-initialize stellar
        if(particles.length - 1 == i){
            $(window).data('plugin_stellar').init();
        }
    });
});

If it doesn't matter that the elements get set to their original pixel values for left/top, then you can just call destroy & init one after the other:

$(window).data('plugin_stellar').destroy();
$(window).data('plugin_stellar').init();

If you instantiate stellar on an element (i.e., $("#element").stellar(); instead of $.stellar();) then replace "window" with your selector.