Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 28
  1. #1
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts

    jQuery.ScrollTo : Problems Implementing

    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
    Attached Files Attached Files

  • #2
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    describe the problem.

  • #3
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #4
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #5
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Here is the mark-up, damn internet Nazi's

    Code:
    <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>

  • #6
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    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)
    Code:
    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;
    		};
    		});
    Last edited by NancyJ; 09-30-2008 at 07:45 PM.

  • #7
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks very much, I will implement it in a while, just nipping out for a run. I will post the results back up

  • #8
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>

  • #9
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    can you update your example so I can see any error messages? Also, try changing the link to be '#' instead of '#item'

  • #10
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #11
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    don't use the init.js - its causing errors and change the link's href to '#'

  • #12
    New Coder
    Join Date
    Sep 2008
    Posts
    12
    Thanks
    1
    Thanked 0 Times in 0 Posts
    updated: without the init.js file, still no joy.

  • #13
    Senior Coder NancyJ's Avatar
    Join Date
    Feb 2005
    Location
    Bradford, UK
    Posts
    3,174
    Thanks
    19
    Thanked 66 Times in 65 Posts
    your scrollTo js file is returning a 404 and you still haven't change the link's href to '#'

  • #14
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    scrolling nowhere fast

    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!

  • #15
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by kempobot; 02-21-2009 at 04:48 AM.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •