Multiple calls on window resize about flexisel HOT 4 CLOSED

Yes, the code that runs when you call the plugin just initializes the plugin and there is currently no concept of uninitializing and/or reinitializing that is implemented. However, this does seem like this would be a good component of functionality to have so I will keep this item open for a possible future implementation. I do not have a specific timeline for this at the moment, however.

from flexisel.

Okay, thanks... From an application stand point this is what I was trying to accomplish:

For desktop users (and possible tablets) there would a 100% spanning DIV on the bottom of the page with the scrolling items (2-4 items displaying based on browser width).

For tablet/mobile users the DIV would get resized to be 25% and be floated up and to the right of another DIV. In this view we would only be displaying 1 item and scroll through the rest.

Currently I am using a mixture of media quires with combinations of height and width to change the display around. I'm trying to think of a work around with external script sheets and AJAX calls where I have two variations of the flexisel... one for a large height, and another for a smaller height... but I am not sure if this would even work, any thoughts?

from flexisel.

Just curious, it's almost 11 months later. Any updates?

from flexisel.

Hi again. Sorry for the delay in response here. Because it has been awhile and no one had submitted any PR's for this functionality I have thought about this a bit and here something you could do to reinitialize the plugin based on some external logic... Because the resize event in jQuery (used by the plugin) is actually different than the native JavaScript one you could utilize the native resize event which would not be impacted by the plugin's jQuery resize event. You could first wrap the initial unordered list in some element like so...

<div id="container">
    <ul id="flexiselDemo1"> 
        <li><img src="images/logo-nyt.png" /></li>
        <li><img src="images/logo-microsoft.png" /></li>    
        <li><img src="images/logo-ebay.png" /></li>     
        <li><img src="images/logo-hp.png" /></li> 
        <li><img src="images/logo-youtube.png" /></li>                                                          
    </ul>
</div>

Then you could cache the original content in a variable external to the plugin and add a native JavaScript resize event listener/timeout. When that event fires you could clear out the container, repopulate it with the cache, and then reinitialize the plugin with the different breakpoints depending on whatever logic you were using to determine it. It would end up looking something like what is shown below. It's not pretty, but it would probably do what you are wanting to accomplish.

$(window).load(function() {

    var cache = document.getElementById("flexiselDemo1").outerHTML; 
    
    $("#flexiselDemo1").flexisel(); 

    window.addEventListener("resize", reinitialize, false);

    var resizeTimeout;
    function reinitialize() {
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function() {

            $("#container").empty();
            $("#container").html(cache);
            $("#flexiselDemo1").flexisel({
                // reinitialize with different settings based on some logic somewhere
            }); 

        }, 500);
        
    }    
    
});

Because this is a somewhat unconventional approach, I don't think we would officially support it... but hopefully that will at least allow you to grok together something based on your own requirements. Because it is unlikely that there will be any future efforts made for these sorts of scenarios, I am going to close this issue out for the time being.

from flexisel.