disable movingboxes on resize below a certain browser width or stop it from setting the height of div.mb-scroll

[dubdesign]

Hi, is there a way i can disable movingboxes below a certain browser width so that it reverts back to a basic unordered list or a way that i can stop it from setting the height of div.mb-scroll (probably the better option).

It would need to work on $(window).resize, i already use slider.options.width and slider.options.panelWidth on $(window).resize

Thanks, Scott

[Mottie]

Can you please share a demo (modify this one if you could) of the issue you're having. Does the height get too large or something? Have you tried setting a panel height with overflow?

[dubdesign]

its not a problem as such, what i'm trying to do is revert back to avertical list of items rather than having the panels and the controls when the screen size is small, effectively turning off movingboxes completely if you see what i mean. The result i'm after would be as if javascript is disabled. Esentially what i'm trying to do is simplyfy the design at smaller screen sizes and do away with having controls to see a slide, instead just displaying everything in a simplified list. I hope that makes more sense

[Mottie]

Hmm, maybe try using a media query (demo)

#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}

@media all and (max-width: 350px) {
    .movingBoxes a.mb-scrollButtons,
    .movingBoxes .mb-left-shadow,
    .movingBoxes .mb-right-shadow,
    .movingBoxes .mb-controls {
        display: none;
    }
    .movingBoxes.mb-wrapper,
    .movingBoxes #slider {
        width: auto;
        border: 0;
        box-shadow: 0 0 0;
    }
    .movingBoxes .mb-scroll,
    .movingBoxes #slider {
        height: auto !important;
        overflow: visible;
    }
    .movingBoxes #slider {
        /* match #slider li width seen above */
        width: 150px !important;
        position: static !important;
        padding: 0 !important;
    }
    .movingBoxes #slider li {
        float: none;
        cursor: default;
        padding: 10px;
        /* match #slider li width seen above */
        width: 150px !important;
        font-size: 1em !important;
    }
}

The only problem I noticed is if you start with the window narrow then expand it, the MovingBoxes doesn't set up properly.

[dubdesign]

thats pretty much what i'd already tried but i wasn't using !important so the inline height style which movingboxes adds was getting priority, this fixes it so it appears to be working as i need it to now. When you say it doesn't set up properly what are you referring to? I have an issue currently with the way its resizing (before adding this code) which is affecting the aspect ratio of images (which i guess is down to panel size),is that the same problem? the code is primarily for responsive design so it looks good on different screens rather than someone changing the size of their browser window, however i guess there could be a number of people that will open a browser window up at a small size and then maximise it to fit the screen so it could potentially be an issue