Javascript error in IE7 only (jQuery / Cycle.js

Question

I'm using jQuery and cycle.js to fade through some images on this site.

On the first and last slides, I've put a callback function to go to the next/prev pages, however in IE7 I'm receiving a runtime javascript error (not in any other browsers).

Here's the link to my javascript file: http://bit.ly/dAKEof

The error I'm receiving in IE7 is:

Line: 126 Char: 4 Error: Object Expected Code: 0

Here's the code I have at line 126 of the functions.js file:

window.location = $('#next').find("a").attr("href");

Any ideas?

Answer 1

I didn't see a link to the site with the error in your question but saw a url in your profile and went there to see if that might be the one. Looks like it is...

IE is notorious for giving incorrect line numbers in its javascript errors. The error is actually on line 125:

function onBefore(curr, next, opts, fwd) {
    // If the page isn't loading or refreshing - initCycle == false (fixes auto unbinding of slide opts on load)
    // If is last slide and next slide is fwd direction go to next project instead of wrapping cycle
    if(opts.currSlide + 1 == opts.slideCount && fwd && !initCycle){
        opts.end(opts); // <-- this line is failing b/c the end function is null
        window.location = $('#next').find("a").attr("href");
    }
    // If is first slide, and next slide is bkwd direction go to prev project instead of wrapping cycle
    else if(opts.currSlide + 1 == 1 && !fwd){
        opts.end(opts); // <-- this also fails for the same reason
        window.location = $('#prev').find("a").attr("href");
    }
}

The end function in the ops object is null, and that's where the error is. Interestingly, I checked in FF as well and this is also true there, but it seems to recover more gracefully than IE in this case.

It's not entirely clear from the rest of the code how the onBefore function gets called. Looks like it might be the cycle plugin itself. In any event, wherever that call happens the opts object appears to not be getting populated with all the data that is needed by your function.

Update:

I took a look at the cycle plugin code and opts.end is a callback that the user of the plugin must supply. So the solution to your problem is to either provide your own callback when you create the cycle object (line 101 in your js file) or remove the lines in your code that invoke the end function.

Update in response to OP's comment below:

Upon closer inspection your code will actually do exactly what you want without the need to invoke an end callback, so you can safely remove those lines. The plugin triggers your onBefore callback before it does any animations. And since you reload a new url in the browser when moving backward from the 1st slide or forward from the last one, it never even gets to the fade animation, which is your goal.

However, to answer your question on how to add an end callback to the original cycle object, you would do it exactly as you did for onBefore and onAfter. Create a function with whatever code you want to execute and then include end: yourFuncName in the object hash passed to the plugin. Another way to stop the cycle plugin is $(selector).cycle('stop');. But again, none of this is needed in your case. Just remove the calls to end and you should be fine.