CSS-Tricks / MovingBoxes

Simple horizontal slider which grows up the current box when it's in focus (image, title & text) and back down when it's not in focus.
http://css-tricks.github.io/MovingBoxes/
GNU Lesser General Public License v3.0
280 stars 147 forks source link

Remove moving boxes? #117

Open raphaelluchini opened 11 years ago

raphaelluchini commented 11 years ago

Hello, I would like know if has a easy mode to remove the Moving Boxes, like a dispose() and remove all classes from html?

My Problem: I want keep Moving Boxes on Desktop, but for small devices, changes to a simple ul

Hard solutions: Using media queries, remove all styles from slider or Remove all classes from ul with JS

Thank You

Mottie commented 11 years ago

Hi @raphaelluchini!

There isn't anything built-in yet to remove (destroy) MovingBoxes, but you can use this code to remove it (demo):

var mb = $('#slider').data('movingBoxes');
mb.$wrap.find('.mb-scrollButtons, .mb-left-shadow, .mb-right-shadow, .mb-controls').remove();
mb.$el
    .removeClass('mb-slider')
    .removeAttr('style')
    .children()
    .removeClass('mb-panel current')
    .removeAttr('style')
mb.$panels.find('.mb-inside').each(function(){
    $(this).replaceWith( $(this).contents() );
});
mb.$el.unwrap().unwrap();