views:

74

answers:

1

Hey Community out there - here comes a tough one, at least for me. Maybe there is some help out there.
I am working on a full page vertically/horizontally scrolling website that is powerd by the scrollTo plugin. In general all is working good and smooth but with some content, like the Nivo Slider, the scrolling becomes a bit shaky, like having hig ups. It seems to happen every time the Nivo Slider is changing the images and if you are scrolling at the same time.

I am now looking for a way to work smoothly around this behavior, searching for a way to stop the Nivo Slider when he is not in the viewport but make him work again when he comes into the vieport again. That way, I guess he would not disturb any scrolling transition. This is my wild guess as a newbie but whatever help and suggestion would be appreciated very much. It all is about stopping whatever dynamic content is included to the different panels (like banners, galleries, sliders) if they are not in the viewport.

Any Ideas?

+1  A: 

I have never used this plugin, but I think you need the "Start and Stop the Scroller" section on the Nivo Slider homepage. The easiest way to do this would be to disable the image slider while the slideTo function is running and enable it again afterwards. This means you wouldn't have to work out whether the slider is visible or not.

E.g.:

$('a.scroll').click(function(){
    $('#slider').data('nivo:vars').stop = true;

    $.scrollTo({top: 500, left: 200},    // target
                1000,                    // duration
                {                        // settings
                    onAfter:function() { // callback when scrolling is complete
                        $('#slider').data('nivo:vars').stop = false;
                    }
                }
    );
});
lonesomeday
@lonesomeday - thanks for the approach but I am not sure if this is what I need. On this 1page wensite design there is a lot of scrolling possible (in all directions). I want to make sure that the slider is always stopped if scrolling is activated but it got to work if the site is scrolling to the section where the slider is included or whenever the slider is within the viewport. I have pasted the scrolling script here:<http://jsfiddle.net/FxHUK> maybe you can show me where I would have to make what modifications. Thank you a lot.
Hardy
See [my fork](http://jsfiddle.net/lonesomeday/6YksP/2/).
lonesomeday
@lonesomeday - you made my day dude. It did the trick and it tought me a new function. Thank you very much for that. Last question. Do you think it will slow down the functionality if the function is still left in the script but the nivo slider (for whatever reason) is not used on the site?
Hardy
I can answer that newbie question by myself. YES, it will disturb the functionality because it is not working at all if the function is in the script but the nico slider on installed on the website.
Hardy
@lonesomeday - So finally I have to thank you for your kind help. I will now accept your answer. Cheers.
Hardy
No worries -- glad to have helped!
lonesomeday