window resize with bxslider destroyed breaks style

Question

I'm trying to remove the styling and javascript of a bxslider element when the browser window shrinks to a certain size and apply a different style to the list, but it's doing weird things.

Scaling up from below 502px, everything looks and works fine, but when scaling back down again the slider disappears as it should but the new styling is broken. At the moment I just reload the page if it goes under 502px, which just feels horrible.

Here's my code:

EDIT: As requested, I've added the relevant HTML, javascript and CSS to a JSFiddle: http://jsfiddle.net/tYRJ2/2/. (The CSS isn't complete, but it shows the 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!

I started you a [***jsFiddle HERE***](http://jsfiddle.net/SpYk3/tYRJ2/), if you could just add your HTML, save it, and post the link, we could figure this out much easier — SpYk3HH, Apr 29 '13 at 16:53
Now the next problem, I dont see where you have any "secondary" styling setup. as far as I can see, the slider is destroying and rebuilding as told on window size change. A thought, if you want a dif "non-slider" style for the `ul` when bxslider is destroyed, then place ul in a named div. If you look at your html after load, you'll notice that bxslider moves your ul inside its own divs, thus if you had some css like `#myDiv > ul` then your ul styling would ONLY apply when the slider was destroyed, thus giving you your own style for smaller windows — SpYk3HH, Apr 29 '13 at 17:08
ooo, nm, upon further reeview, i see that bxslider IS NOT BEING DESTROYED. Not entirely. The css gets changed, and the html, but commands are still being sent to the elment having class "bxslider". This being the case. put an ID on your UL and use that as your selector. `removeClass` the bxslider class when you destroy and thann readd upon recreate — SpYk3HH, Apr 29 '13 at 17:13
NM, that didn't seem to do it either. My suggestion, would be to destroy it completely and replace it with an original clone, hold on, i'll example... — SpYk3HH, Apr 29 '13 at 17:17

SpYk3HH · Accepted Answer · 2013-04-30T02:46:28.737

It would appear (and i've seen this problem before, in fact the solution I'm about to give came from me having this same problem with another image slider), the "destroy" command is not completely destroying the slider. In a case like this, an "easy" thing to do would be to save a back up clone of the slider ahead of time, then use it to replace your slider all together after destroy.

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 before in comments. BXSlider creates divs it wraps around your UL. So if you want a completely different styling for when it's smaller, then simply wrap your UL in a div with an ID to start with, then write 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's 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's 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

@Koozer Kewl, I just updated my answer with a little more info, hope it helps toward your end goal! Good Luck! — SpYk3HH, Apr 29 '13 at 17:34

window resize with bxslider destroyed breaks style

1 Answers1