Question

I have two scripts on the same page, both running sliders, and the first breaks the second, specifically the hover event, only within IE7 and IE8. I am wondering if there is a conflict with variables between the two scripts. Here is the first:

<script type="text/javascript">
    $(function(){
        $('#slider')
            .anythingSlider({ 
                theme               : "minimalist-square",      
                expand              : false,                    
                resizeContents      : true,                     
                buildArrows         : true,                     
                buildNavigation     : true,                     
                toggleArrows        : true,                     
                autoPlay            : true                      
            });
    });
</script>

And here is a portion of the second script, which may be causing the error?

<script type='text/javascript'>

    $(function() {
        slider = $('.artist-homepage-slider .artist-wrapper');
        handle = $('.homepage-slider .handle');
        //productwidth = 20;
        productwidth = 248;
        products = $('.artist-homepage-slider .product');
        productscount = products.length;
        images = products.find('img');
        productswidth = 0;
        .
                    .
                    .
                    . 

        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);
        }

        function slideright() {
            v = s.slider('option', 'value');
            if (v < fullWidth)
                v += 50;
            ui.value = v;
            s.slider('option', 'value', v);
            f = s.slider('option', 'slide');
            f(null,ui);
        }
    });

Could it be the declaration of slider in the second script causing the problem? There are other scripts called upon within other files, could one of these be causing the problem? In IE7 and IE8 the slider shows up, it’s just that the sliding function doesn’t work. What is the fundamental difference between IE7 and 8, and the rest of the browsers that would cause this behavior?

Answer 1

I don’t see the variable “s” declared anywhere but you are using it in both sliderRight and sliderLeft functions. Does this work in other browsers?

Also you have the majority of your variables attached to the global scope since you don’t declare them with “var”. To narrow scope and thus reduce the chance of conflict use var to declare your local variables