Jquery not working on IE only (Advance Slider)

Question

Can someone assist me in getting this slider working for IE.

I get an error message (only on IE versions) stating that there is an error message in the jquery file Row 1, Column 1 of this file.

Now, I have checked other scripts that have been purchased and they work on IE. However, mine just keeps crashing. Can someone tell me what's wrong with it as I followed all the instructions stated on the documentation. (works on Firefox, Chrome, Safari, Opera)

Answer 1

This is not exactly an answer, but more of an educated guess.

If you do have access to IE9 somewhere, you can set the document mode to IE8 or IE7, and then under the "script" tab you should have a "start debugging" button. When it's set to IE8 or IE7, a statement is highlighted d[f]=c, you can see by settinc watches d is a DispHTMLStyle (the style object of some DOM node (like div or something), f is the String width, and c is a Number with value NaN (short for "Not a Number"). You also have a call stack, and within that I see (reformatted)

jQuery(document).ready(function ($) {
    $('#my-slider').advancedSlider({
        width: '100%',
        height: 225,
        skin: 'minimal-small',
        slideButtonsNumber: true,
        effectType: 'scale',
        slicePattern: 'topToBottom',
        sliceDuration: 9000,
        timerAnimationControls: false,
        slideLoop: true,
        slideArrows: false,
        overrideTransition: true,
        shadow: false,
        timerAnimation: false,
        keyboardNavigation: true,
        pauseSlideshowOnHover: true,
        lightbox: false,
        thumbnailLightboxIcon: false,
        preloadNearbyImages: true,
        allowScaleUp: true,
        captionBackgroundOpacity: 0.90,
        slideProperties: {
            0: {
                captionPosition: 'custom',
                captionShowEffect: 'slide',
                captionHeight: 170,
                captionTop: 29,
                captionLeft: 630,
                slideshowDelay: 25000,
                captionBackgroundColor: '#ffffff'
            },
            1: {
                captionPosition: 'custom',
                captionShowEffect: 'slide',
                captionHeight: 170,
                captionTop: 29,
                captionLeft: 630,
                slideshowDelay: 10000,
                captionBackgroundColor: '#ffffff'
            }
        }
    });
});


//@ sourceURL=/inline-13b6e3cdf71.js

Notice, you have this set up in document ready! CSS may not even be loaded yet!

I have some suspicion that setting width to an actual numeric value would likely fix your issue.

You generally aren't guaranteed for anything on an html page to have a width until all your style rules are loaded. Even inline styles can be overruled . Thus using a width of 100% might be nonsensical. I think it all depends on how your browser interprets that value as well.

You could also try moving it from your document ready handler to a window load handler and see what happens. By doing that you also gain the ability to manually fire off some jQuery to get the width of some object and use that value if you want to maintain the dependency on the style rules. The disadvantage, of course, is that you may have some display of unwanted content before the slider loads or some other artifacts.

So, long story short, try it by manually coding a fixed value for that width, and then decide from there.

Edit: Ok, sorry that didn't work. I can clearly see that the source is different, but it's also the same kind of error ( statement d[f]=c with the same kinds of objects/values as before.)

On further inspection, up the call stack we have this statement c.css("width",parseInt(c.data("width")));. The local variable c appears to be a jQuery object wrapping a single div with class "slide-buttons". I seem to recall the previously mentioned statement earlier, but didn't dig into it as much as I might have needed. So my second guess would be that it has something to do with them (somehow).

I also searched around and found http://codecanyon.net/item/advanced-slider-jquery-xml-slider/132618, which I'm going to assume is what you're using, and while I don't see any explicit documentation (which, I suppose, makes sense for a pay-for-use plugin), I do see in the comments section people using values like width: '100%' without complaint and the demo http://bqworks.com/products/advanced-slider/responsive.html does run under IE8 browser mode with jQuery(document).ready(...) initializing the slider... so that pretty much shoots down all my other previous theories (sorry!). But I do think there is something to the slide buttons needing a width. The "prettified" code from around that c.css("width",...) line is as follows (with my annotations as to what I think is happening):

c = M.find(".slide-buttons");  //jquery find under M something with class slide buttons
//if the element doesn't have "width data"
//grab values from the style rules using jQuery .css http://api.jquery.com/css/
if (!c.data("width"))
{
    c.data("width", parseInt(c.css("width")));
    c.data("height", parseInt(c.css("height")))
}
//find other things (odd, why is there no period?)
d = c.find("buttons-middle");
f = d.find("buttons-inner");
//directly assign back those same values possibly obtained earlier 
c.css("width", parseInt(c.data("width")));
c.css("height", parseInt(c.data("height")));

When that code is invoked, c.css("width") returns "auto", which obviously isn't parse-able as a number. Of course, the question becomes, why does IE8 and below return something like "auto" where other browsers don't? The answer may be "That is just what older IE versions do in that scenario.".

I also notice the demo doesn't use slider buttons, either, so you may be using a scenario that the developer of this widget might not have found and released a clean solution to at the time you obtained this widget's source code file.

So, if you didn't want to read all of that I just added, you might try adding a css rule like

.advanced-slider .slide-buttons {
    width: 400px;
}

or whatever with that works.