Question

I have a project that uses scrollTo to shift from one slider to another. All in all, I have three sliders that can be shifted upon pushing a button. You can see a fully working demo here: http://vitaminjdesign.com/example/examples/Standard/index.html

As you can see, this works fairly well; however, in firefox & IE (Chrome and Safari are fine) we have a problem. When you click on a green button, say decibel, the new slide loads fine. THEN if you refresh the page The old Decibel slide content still remains, although the first button icon is active.

On page load / refresh, the scrollTO position should reset so it displays the first slider by default (as it should, and does in safari and chrome). Here is my simple Jquery which powers the scrollTo position, but there could potentially be further conflict outside this code. Please check out the demo.

$('#hero-slider ul a.pita').click(function () {

     $('#hero-slider ul a').removeClass('activeSlide');
     $(this).addClass('activeSlide');   
     $('.maskss').scrollTo($(this).attr('rel'), 500);
return false;       

});

Any ideas how to make the first slide appear after you reload the page? If you clear the cache, it does it every time. Any thoughts?

Answer 1

you can reset the position on page load

$(document).ready(function(){
    $('.maskss').scrollTo('first slider');
});