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: /. (The CSS isn't plete, 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'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/tYRJ2/2/. (The CSS isn't plete, 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!

• javascript
• jquery
• css
• bxslider

Share Improve this question Follow edited Apr 29, 2013 at 17:00 Koozer asked Apr 29, 2013 at 16:44 KoozerKoozer 11722 silver badges99 bronze badges 4

• I started you a jsFiddle HERE, if you could just add your HTML, save it, and post the link, we could figure this out much easier – SpYk3HH Commented Apr 29, 2013 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 Commented Apr 29, 2013 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 mands 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 Commented Apr 29, 2013 at 17:13
• NM, that didn't seem to do it either. My suggestion, would be to destroy it pletely and replace it with an original clone, hold on, i'll example... – SpYk3HH Commented Apr 29, 2013 at 17:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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" mand is not pletely 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 ments. BXSlider creates divs it wraps around your UL. So if you want a pletely 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