Resizing a window using the bxslider destroy breaks style

Question

I'm trying to remove the style and javascript of the bxslider element when the browser window shrinks to a certain size and applies a different style to the list, but it does strange things.

Scaling from below below 502px, everything looks and works fine, but when you decrease back, the slider disappears, as it should, but the new style does not work. At the moment, I'm just reloading the page if it is less than 502 pixels, which is just awful.

Here is my code:

EDIT: As requested, I added the appropriate HTML, javascript and CSS in JSFiddle: http://jsfiddle.net/tYRJ2/2/ . (CSS is not complete, but it shows a problem.)

var sliderActive = false; var slider; function createSlider() { slider = jQuery('.bxslider').bxSlider({ adaptiveHeight: false, swipeThreshold: 40, controls: true, auto: true, pause: 6000, autoHover: true, }); return true; } //create slider if new page is wide jQuery(document).ready(function(){ if (window.innerWidth > 502) { sliderActive = createSlider(); } }); //create/destroy slider based on width jQuery(window).resize(function () { //if wide and no slider, create slider if (window.innerWidth > 502 && sliderActive == false) { sliderActive = createSlider(); } //else if narrow and active slider, destroy slider else if (window.innerWidth <= 502 && sliderActive == true){ slider.destroySlider(); sliderActive = false; location.reload(); //fudgey } //else if wide and active slider, or narrow and no slider, do nothing }); 

Any help is much appreciated!

Answer 1

It appeared (and I saw this problem before, in fact, the solution that I am going to give appeared with the same problem with another image slider), the "destroy" command does not completely destroy the slider, In this case, the "easy" thing should have been would save the backup slider clown ahead of time, and then use it to replace the slider together after destruction.

Example:

 //create slider if page is wide jQuery(document).ready(function(){ sliderClone = jQuery('.bxslider').clone(); // here we create our clone to hold on to original HTML if (window.innerWidth > 502) { ...... some time later ................. sliderActive = false; slider.replaceWith(sliderClone.clone()); // here i replace the "tampered" HTML with a clone of the "original" that we cloned off for safe keeping earlier 

Also, as I mentioned in the comments. BXSlider creates divs that it wraps around your UL. Therefore, if you need a completely different style when it's smaller, just wrap your UL in a div with an identifier to start with it, and then write a direct styling for that DIV> UL.

Example:

HTML

 <div id="myBXSlider"> <ul class="bxslider"> <li> ...... 

CSS

 // the following first applies to the "slider" when active, // using bx-slider class structure .bx-viewport { margin: 0; } .bx-viewport h2 { margin-top: 1em; } .bx-viewport li { list-style: none; padding: 0 1em; margin: 1%; background-color: #eee; -moz-box-shadow: 0 0 10px #bbb; -webkit-box-shadow: 0 0 10px #bbb; box-shadow: 0 0 10px #bbb; border: solid #919396 2px; } // now for custom styling for when it just our div then list #myBXSlider > ul { display: block; margin: 0 auto; } #myBXSlider > ul li { background: #FFA; color: #F00; padding: .5em 1em; } #myBXSlider > ul h2 { font-style: italic; } // etc... etc ..... and so on