Question

I have two sliders on my homepage, one is using a plugin (AnythingSlider), and the other is just using jQuery UI (jquery-ui-1.8.9.custom.min.js). After I added the AnythingSlider to the page, the hover function on the second slider stopped working in IE7 and IE8. This is the code for the hover function:

        st = null;
        $('.homepage-leftscroller').hover(function() {
           slideleft();
           st = setInterval(slideleft, 200);
        }, function() {
           clearInterval(st);
        });

And here is the code for the slideleft function:

        function slideleft() {
            v = s.slider('option', 'value');
            if (v > 0)
                v -= 50;
            ui.value = v;
            s.slider('option', 'value', v);
            f = s.slider('option', 'slide');
            f(null,ui);
        }

I didn’t create the second slider, I did add the first slider. The page in question is here:

http://rareculture.net/index.php

I appreciate any help that can be offered with this. Thank you.

P.S.
The code block containing the hover function begins like this:

    $(function() {
        slider = $('.artist-homepage-slider .artist-wrapper');

while the AnythingSlider code block begins like this:

    $(function(){
        $('#slider')

Could that be the issue? Why would it only break in IE7 and IE8?

Answer 1

I can’t tell if this is related to your problem, but the following statements are assigning values to global (or at least, from a wider scope), rather than local, variables. If you add var in front of these they’ll become declarations and they’ll be declared locally.

st = null;

v = s.slider('option', 'value');

f = s.slider('option', 'slide');

jslint can detect issues like these.