Constant resize when expand: true

[richardtape]

Right then, this is firmly in the 'what the hell is going on here' category. So much so, I've recorded a screencast to try and explain. I've placed all my css/js at the end of the screencast, but for completeness, here it is,

jQuery(document).ready(function($) {

    if( $( 'body' ).hasClass( 'home' ) || $( 'body' ).hasClass( 'front-page' ) ){

        //Twitter widget anything slider
        if( $( '.widget-themeists_twitter' ).length != 0 ){

            $('.widget-themeists_twitter ul').anythingSlider({
                expand          : true,
                resizeContents  : true,
                showMultiple    : 2,
                changeBy        : 2,
                buildNavigation : false,
                buildStartStop  : false,
                hashTags        : false
            });

        }

    }


});

.above_footer .widget-themeists_twitter .anythingSlider
{
    overflow-y: auto;
    overflow-x: hidden;
    height: 40px;
    width: 100%;
}

.above_footer .widget-themeists_twitter li
{
    width: 45%;
    float: left;
    padding: 0;
}

    .above_footer .widget-themeists_twitter li div
    {
        padding: 0 5%;
        overflow: visible;
    }

Using jquery v1.8.3 and anythingSlider v1.8.9

Screencast can be seen at: https://dl.dropbox.com/u/455309/anythingslider.mp4

I'm baffled. I've almost certainly missed something, but honestly can't see what it is.

[richardtape]

As a follow-up, for some reason which I still can't explain, if I add !important to the height declaration on .anythingSlider this issue no longer occurs.

Baffled even more, now.

[Mottie]

Hi @iamfriendly!

Great! Thanks for the screen cast! It really did help!

Hmm, well it does look like a bug.

What is happening is that the slider is actually checking it's parent element size instead of the browser window resize event. It does this check every 500 milliseconds. The problem is that it's clearing the window size, setting all elements to the same width and height (not taking into account the showMultiple as set to 2), then recalculating the panel widths and setting them appropriately (now it takes the showMultiple into account), every time.

I'll work on cleaning this function up. I'm not sure why I didn't bind to the element resize event, but I will fix that and throttle the resize as well. It may end up being a little jumpy, but it shouldn't recheck the size constantly like it was.

[Mottie]

Hmm, I take that back.. in the expand demo in Chrome and Firefox, the check still occurs every 500 milliseconds, but it doesn't update the sizes because they all match. I'm still going to rewrite the function to use the resize event so we'll see what happens after ;)

[richardtape]

No worries @Mottie, I first tried explaining it by simply writing it and, well, that didn't end well. I didn't understand my own problem after I wrote it down, haha. A screenshot didn't seem appropriate either.

I understand your explanation but I'm not really sure why adding the !important declaration 'solves' it. Anyway, glad I could help and good luck solving it. If you need anyone to test anything, give me a shout.

Rich

[Mottie]

Actually, it must be because it's Saturday... I wrote this initially, but questioned my own memory LOL.

There is no resize event for elements, only the window... darn you w3schools quick search for messing with me (I should have remembered not to rely on them). Anyway, I'll still try to improve that code...

But I wonder if the problem you're having is because you didn't set a fixed height for the wrapper around AnythingSlider.... something like:

#themeists_twitter-2 {
    height: 100px; /* or whatever to accommodate the h4 as well */
}

[Rogier83]

In 1.9.2 w/ jQuery 1.10.1 this is still an issue. Same thing: panel width and height constantly keep updating to the same (respective) value.

I have used the slider often and this is the first time I've seen this issue. The difference between this project and all the previous ones is that I'm using percentage widths and rem heights. Since @iamfriendly is using percentage widths as well, this is likely a factor, if not the cause.

Setting a height for the wrapper does help, though in my opinion it shouldn't be necessary and it's doable to fix it in the code. But so long as it isn't, please document it somewhere (or have I missed it?).

Adding a height w/ !important to .anythingSlider fixes it as well (thanks for sharing @iamfriendly).

[ckng]

Stumbled upon this issue as well, adding a wrapper and set a height on the wrapper (any value) get rid of the issue.