...

View Full Version : jQuery Struggling with ScrollTo script



Sputnik1
03-15-2011, 11:00 AM
Help. I was wondering if anyone could help with implementing Ariel Flesler's JQuery "ScrollTo" script. Great script but the instructions aren't friendly for JavaScript beginners.


Original script is here (http://flesler.blogspot.com/2007/10/jqueryscrollto.html)
Stripped down version of my page is here (http://flesler.blogspot.com/2007/10/jqueryscrollto.html).
This is what the link looks like that evokes the script:


<a onclick="$.scrollTo( '#C5', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">MyLink</a>
Aims: I need to queue the x-axis and y-axis motion. Some links need to scroll first x, then y, others will do the opposite. I'm having trouble with three things:


The x/y axis separation seems to only go x, then y, but not the other way round.
Even when it only scrolls on one axis, there is a rapid flash that happens just as the scrolling starts. It seems to try follow the "#" href before the script starts.
Sometimes if I click a link and then click another one too quickly, it scrolls off to the wrong place.
I included this (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) JQuery easing script from this (http://gsgd.co.uk/sandbox/jquery/easing/) website, but can't seem to evoke the specific easing options, despite defining them in the above mentioned link structure.


There's probably something really silly that I missed. Any help would be hugely appreciated! :o (I'm using Firefox V3.6.15 on Windows7)

oesxyl
03-15-2011, 07:00 PM
if you find a solution post here please. I'm interested in this, i tried the demo, ffox 3.5.16 on linux, and didn't work for me.

best regards

SB65
03-15-2011, 07:48 PM
Sputnik1, your link to your code is pointing at the original download page, not your own page.

Demo on that page works fine for me on FF3/Win XP.

alexa
03-15-2011, 09:24 PM
Hey,
I was trying to make that code to work at some point also but eventually I gave up. I am a beginner also, but I got it done with JScroll.

Here is the demo page:
http://jscrollpane.kelvinluck.com/scroll_to_animate.html

Have a look and see if you can adapt this to your needs.

Kor
03-15-2011, 09:29 PM
Have you considered the simple JavaScript native scrollIntoView() method?

Sputnik1
03-16-2011, 12:10 AM
Thanks for the response everyone.

Oesxyl, I found post #15 useful on this (http://www.codingforums.com/showthread.php?t=149305) page though I'm still having problems getting the custom variables to work.

Sorry SB65, I accidentally posted the wrong link. Here is my demo page:
http://www.gaelen.co.za/test1

Thanks Alexa and Kor, I will try your suggestions.

oesxyl
03-16-2011, 12:20 AM
Hi Oesxyl

I found this (http://www.codingforums.com/showthread.php?t=149305) link useful.

Go to Kempobot's response at the bottom (post #15).

I'm still having problems getting the custom variables to work.
thank you, :)

that means this post:

http://www.codingforums.com/showpost.php?p=784414&postcount=15

additional, NancyJ script mentioned in the previous post:

http://www.codingforums.com/showpost.php?p=735720&postcount=6

best regards

SB65
03-16-2011, 09:48 AM
Sputnik1, a couple of things. I think this:


<!--A outgoing link that needs to scroll down first, then right:-->
<a onclick="$.scrollTo( '#E7', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">Link6 (Needs to scroll down first, then right)</a>


should be:


<!--A outgoing link that needs to scroll down first, then right:-->
<a onclick="$.scrollTo( '#E7', 2000, {queue:true,axis:'yx',easing:'swing'} );" href="#">Link6 (Needs to scroll down first, then right)</a>


The yx will make it scroll down first then across, and the settings should all be combined together. The plugin takes:


$(...).scrollTo( target, duration, settings );

As it stands your code is adding additional arguments to the plugin which are not recognised.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum