...

View Full Version : jQuery.ScrollTo : Problems Implementing



lawrencebrown
09-30-2008, 03:41 PM
Hello

I am having a little bit of trouble implementing jQuery.ScrollTo framework. I have built a simple example to demonstrate how I am marking this up, I have also linked to the authors page / demo below.

Hopefully this is something obvious I am missing here, and your time is much appreciated if you can shed any light into correcting my code.

I have packaged the code up for download if people would rather look at it that way than through their browser

Many thanks

Lawrence

My Example: http://lawrencebrown.eu/scroll-to/example.html

Authors Demo: http://demos.flesler.com/jquery/scrollTo/

Authors Documentation: http://flesler.blogspot.com/2007/10/jqueryscrollto.html

NancyJ
09-30-2008, 05:38 PM
describe the problem.

lawrencebrown
09-30-2008, 05:45 PM
Apologies: I would like my example to animate a smooth scroll to the linked DIV as the demo operates. Currently it jumps straight to the location with no animation.

Regards

ohgod
09-30-2008, 06:22 PM
most frameworks with functions like that provide an option for the time span over which the event will occur. does this have any options like that?

i'd open the link... but the internet nazi's here at work have it blocked.

lawrencebrown
09-30-2008, 06:26 PM
Here is the mark-up, damn internet Nazi's



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>

</head>

<body>
<div id="holder">
<div id="linktoitem">
<li><a title="$.scrollTo( '#item', 800, {easing:'elasout'} );" href="#item">Link To Item</a></li>
</div>
<div id="item">
</div>
</div>

</body>
</html>

NancyJ
09-30-2008, 06:42 PM
Ok, your example isn't even using javascript, you're not even close. To be fair, its not entirely your fault the 'demo' doesn't actually show you how to use his plugin.

1. You need to include jQuery.
2. You need to attach the code to the links click event, the easiest way to do that would be to change 'title' in your code to 'onclick'. They used the title in the demo page just to show you the code that would be run.
3. To use the easing you need additional code
4. To scroll sideways you need additional code
5. 800 is too small to see any animation with the easing option, try 8000
5. This is a really crappy plugin. I work with jQuery a lot, I've even developed a few plugins myself and this took me nearly an hour to get working

This is the extra code you need to make it work (as well as jQuery)

jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});

lawrencebrown
09-30-2008, 06:46 PM
Thanks very much, I will implement it in a while, just nipping out for a run. I will post the results back up

lawrencebrown
09-30-2008, 08:35 PM
I have now downloaded jquery and referenced it in the head. I have also updated the code (see below), its still not working for me - have I placed your code in the incorrect place, me thinks this will be a yes for sure. Thank you.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Example</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='jquery-1.2.6.js'></script>
<script type='text/javascript' src='js/jquery.scrollTo-min.js'></script>
<script type='text/javascript'>jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});</script>
</head>

<body>

<div id="holder">
<div id="linktoitem">
<li><a onclick="$.scrollTo( '#item', 8000, {easing:'elasout'} );" href="#item">Link To Item</a></li>
</div>
<div id="item">
</div>
</div>
</body>
</html>

NancyJ
09-30-2008, 09:19 PM
can you update your example so I can see any error messages? Also, try changing the link to be '#' instead of '#item'

lawrencebrown
09-30-2008, 09:29 PM
Its updated now: http://lawrencebrown.eu/scroll-to/example.html

I also added a init.js file that I found in the head of the demo page.

Thanks for checking this one out for me

NancyJ
09-30-2008, 09:47 PM
don't use the init.js - its causing errors and change the link's href to '#'

lawrencebrown
09-30-2008, 10:26 PM
updated: without the init.js file, still no joy.

NancyJ
09-30-2008, 11:01 PM
your scrollTo js file is returning a 404 and you still haven't change the link's href to '#'

mrtambourineman
10-26-2008, 06:03 PM
Hello,

I have recently come across this scrollTo plugin and I am still relatively new to Javascript. I came across your thread and I am experiencing some problems getting this to work at all. I played around with a few Javascript plugins before but I cant seem to make any sense of this one, in my research I came across the localscroll script aswell and tried to play around with this but to no success. Im guessing its about time that i read up on on some Java and JQuery some im going find some stuff now, but if anyone can help me out with this I would really appreciate it. I cant seem to get my head around how you call this plugin, i gather that it pulls on a number of other scripts, I have noticed some references to an easing plugin in and what not. Also no one explicitly states how the function is called, I consistently get the error message that $()ScrollTo is not a function so I am guessing im still not really close. I have tried to follow what you have posted so far and there is also some other random attempts in my coding so please excuse this.

Please find my work at www.crossmultimedia.com/srollto/

Many thanks in advance!

kempobot
02-21-2009, 03:44 AM
Hi, i just registered because I was having the same problem and wanted to give from what I've experienced. The creator has made a beautiful plugin, but does in fact do a lousy job explaining how to implement it.

Here's what you need to do in order to get this to work. I am going to dumb down and retardify this step by step on how to use it. Obviously, the name of the files and links are going to vary, so do not copy and paste them verbatim:

1. Append the scrollTo script to your html like what NancyJ has mentioned. Make sure to place it in the head of your html.

example:

<head>
<script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
</head>

2. Make sure you've downloaded the latest version of jquery and append it to your html's head as well (you should have already done this seeing how scrollTo is an jquery plugin).

<head>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.0-min.js" type="text/javascript"></script>
</head>

By doing this, from my basic understanding, this is how you make your html read an external javascript file and work with it.

3. Now, with that out of the way, all you need to do in order to make this work is to use an href link in your anchor, and link it to the '#' sign, give it a label, and then close it:

<a href="#">label</a>

4. There appears to be three portions to this command. As NancyJ has mentioned, you are going have to apply this command to the onclick parameter of your anchor link. The first part is going to be your destination. For this example, my destination is going to be a div with an id (hence the '#' before the name) I have named destination. The second part is going to be the amount of time, I believe which is in milliseconds (I'm using 800). The third part is optional, and determines what type of easing animation you want to apply to your transition. I am using the Elastic Ease out (elasout).

<a href="#" onclick="$.scrollTo( '#education', 800, {easing:'elasout'} );">label</a>

And that's it. The plugin does the rest. With this link, my browser should scroll to the div I have named 'destination.' There are other ways you can use this, but I like to have them jump straight to my divs. Obviously, you want to give some spacing and give a distance between your link and your destination.

Hopefully, I have dumbed this down enough to a remedial level to make sense to those who have no idea what they're doing. I, too consider myself a dummy. I would like to believe that I am more artistic individual than a math/programming genius. So, I can feel your pain.

I've tried the plugin without NancyJ's add-on script and it appears to be working okay without it. However, I do believe her add-on script does smooths out the animation a bit. Anyway, hope this helps and good luck. :thumbsup:

gsprague
03-16-2009, 10:25 PM
Has anyone actually got this working properly with animation?

carana
05-04-2009, 08:10 AM
I see a little difference, you put the code into the onclick tag but i put it into the title, try this:


<a title="$.scrollTo( '#productora', 800, {easing:'elasout'} );" href="#productora"onClick="DHTMLSound('sounds/click.mp3')" >La Productora</a>

:)

you can see how it works here (http://frutitasenalmibar.com/clientes/minonina/minonina.html)

edn
06-05-2009, 12:00 AM
Hi,

I am using this plugin to act as a scroll to top of page function, but despite trying all of these things, it's still just jumping to the top of the page (even when i tweak the duration) I also tried it with different elements on the page, and it's still just a plain jump....... :( I don't know if this is affecting it or if there's a way to get rid of this, but once i click the button the hash shows up in the URL.....Thanks!! Here are the basic elements I'm using:

target div at top of page:

<div id='menu-1'>
<div class='section-menu-1' style="cursor:pointer" onclick="tinker('top-menu');">this is the target element at page top
</div>
</div>

and then the button:

<div style="padding-top:80px;padding-bottom:80px;text-align:center;font-size:14px">
<a href='#' onclick="$.scrollTo( '#menu-1', 8000, {easing:'elasout'} ); return false;">back to top</a>
</div>

lastlife
06-08-2009, 07:17 PM
I found this threat after suffering from the same defects as you all above.
I have linked jquery as well as the .scrollTo.js file in my html file.
My links manage to jump to the correct #div, but no animation!!! What gives?!

I am also new the the javascript/JQuery game but am good at following orders. I just cannot figure this one out.

Here is my test page:
http://www.lastlifegraphics.com/jqueryfun/scrollTo.html


Any advice would be grand! thank you in advance.

- j

Buck
06-16-2009, 10:29 AM
Hi,

if you want to use the 'easing.elasout' function you need to define it first in the html <head> section as NancyJ stated earlier in this thread:



<script type="text/javascript">
<!--
jQuery(function( $ ){
//borrowed from jQuery easing plugin
//http://gsgd.co.uk/sandbox/jquery.easing.php
$.scrollTo.defaults.axis = 'xy';
$.easing.elasout = function(x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};
});
// -->
</script>


Change the 'title= ...' to 'onclick= ..."


<a href="#target-examples" onclick="$.scrollTo( '#target-examples', 8000, {easing:'elasout'} );">


to see how it works without the 'easing.elasout':


<a href="#target-examples" onclick="$.scrollTo( '#target-examples', 2000 );">

Hope it helps!

ilujahn
07-17-2009, 08:22 AM
Hey guys,

I spent many hours yesterday on this plug-in to make it work, but no luck. This morning I did it :)

Use jQuery 1.3.2, not 1.2.6, and scrollTo 1.4.2, not 1.4.0.


With the combination of jQuery 1.2.6 and scrollTo 1.4.0 nothing happened. I know I wrote the code correctly because I am very familiar with jQuery (even wrote plug-ins of my own).

So, use jQuery 1.3.2 (http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js) and scrollTo 1.4.2 (http://plugins.jquery.com/node/8283). It worked for me.

Hope it helps.

Sloth86
09-09-2009, 06:32 PM
Hey can anyone help me out? i know these post are kind of old but if anyone is still reading them can you please help me out? when i run the code firebug tells me what the issues are but i cant really figure out how to fix it. it says jquery is not defined ... i think i've followed the demo to a T and even looked their source code to see what my problem was, and i guess I'm just missing some thing. if anyone could help id appreciate it .

Fumigator
09-09-2009, 07:58 PM
Heya Sloth86,

Perhaps you could start a thread that describes your problem in full, including what code you've tried, and maybe even a link to your page that has the problem.

While you're at it, read the guidelines first:

http://www.codingforums.com/postguide.htm

Sloth86
09-09-2009, 09:40 PM
Thanks Fumigator ill do that now.

naseem
12-09-2009, 01:04 PM
Hy, just registered, I'm having some problem with the plugin as well, you can see code and problem at this page (work in progress), www.silentbreeze-yurt.com , what happens in firefox and some other browsers as well is that when the button up is pressed for a moment it blinks the header of page and then back to the movement ftom bottom up to top page, it's as if the link is followed first and then the plug in enters and perform the task afterwords, please help

Spudhead
12-09-2009, 03:14 PM
Hi naseem - you might want to read Fumigator's post a couple of posts above yours :)


Heya Sloth86,

Perhaps you could start a thread that describes your problem in full, including what code you've tried, and maybe even a link to your page that has the problem.

While you're at it, read the guidelines first:

http://www.codingforums.com/postguide.htm

Sputnik1
03-12-2011, 12:58 PM
Kempobot, you're a saviour. I've spent a week trying to implement Flesler's ScrollTo script. It's a fantastic script but his instructions leave JavaScript beginners like me quaking at the knees. :eek: Yours was the only step-by-step instruction I could find, so thank you very much!

I was wondering if you (or anyone ) could help with something.
I need to queue the x-axis and y-axis motion. Some links will scroll first x, then y, others will do the opposite. This is what my link looks like:



<a onclick="$.scrollTo( '#C5', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">MyLink</a>


Here (http://www.gaelen.co.za/test1) is a stripped down version of my page.

The scrolling works okay but the x/y axis separation doesn't. There's probably something really silly that I missed.
Also I've noticed strange behaviour. Firstly, there is a rapid flash that happens just as the scrolling starts. Secondly, if I click on a link, and then click on another befor the scrolling has stopped, it sems to try follow the "#" href. and then shoots off to the wrong place.

I included this JQuery easing script (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js)from this website (http://gsgd.co.uk/sandbox/jquery/easing/) which seems quite popular. Could that be the problem? I'm using Firefox V3.6.15.


Any help would be hugely appreciated!

Sputnik1
03-12-2011, 02:42 PM
Oops, my original post was at the end.
Kempobot, you're a saviour. I've spent a week trying to implement Flesler's ScrollTo script. It's a fantastic script but his instructions leave JavaScript beginners like me quaking at the knees. :eek: Yours was the only step-by-step instruction I could find, so thank you very much!

I was wondering if you (or anyone ) could help with something.
I need to queue the x-axis and y-axis motion. Some links will scroll first x, then y, others will do the opposite. This is what my link looks like:



<a onclick="$.scrollTo( '#C5', 2000, {queue:true}, {axis:'xy'}, {easing:'swing'} );" href="#">MyLink</a>


Here (http://www.gaelen.co.za/test1) is a stripped down version of my page.

The scrolling works okay but the x/y axis separation doesn't. There's probably something really silly that I missed.
Also I've noticed strange behaviour. Firstly, there is a rapid flash that happens just as the scrolling starts. Secondly, if I click on a link, and then click on another befor the scrolling has stopped, it sems to try follow the "#" href. and then shoots off to the wrong place.

I included this JQuery easing script (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js)from this website (http://gsgd.co.uk/sandbox/jquery/easing/) which seems quite popular. Could that be the problem? I'm using Firefox V3.6.15.


Any help would be hugely appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum