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 22
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jquery scrollTo animation hell.

    I'm a novice so bare with me, I really need talking through this. I can't get the scrollto animation to work at all, it does move to right div id but with no animation. Could some one please help.

    I have this in my head:

    Code:
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="Java/jquery.scrollTo-1.4.2-min.js"></script>
    I've checked that the scrollto-1.4.2-min.js is where I think it is so that's not a problem.

    I've then got:

    Code:
     <div id="aboutbutton"><script type="text/javascript" src="Java/scroll.js"></script><a href="#titles" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('AboutButton','','images/buttons/aboutblue.png',1)"><img src="images/buttons/aboutwhite.png" alt="about" name="AboutButton" width="80" height="32" border="0" id="AboutButton" /></a></div>
    ..on my roll over image. With the Scroll.js file being this:

    Code:
     $(document).ready(function() {
        $.localScroll
    	duration: '4000'
    });
    Why doesn't this work?! Am I being an idiot? I've only being working on javascript for three days (I've spent all three trying to do this!) so I would love some one to correct the code if at all poss.

    Would REALLY appreciate any help.

    Andrew

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Well, first of all, it kind of shows that you don't know much about javascript:
    Code:
    <script type="text/javascript" src="Java/scroll.js"></script>
    Don't put your scripts in a 'Java' folder. Just wait till Philip M is around to tell you off.

    Second, don't use some obsolete version of jQuery. Current version is 1.4.4., use that.

    Now, the real problem:
    Code:
    $(document).ready(function() {
        $.localScroll
    	duration: '4000'
    });
    should most definitely be
    Code:
    $(document).ready(function() {
        $.localScroll({
    	duration: '4000'
        });
    });
    Use some kind of debugger like firebug, so those obvious syntax errors won't happen.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks but that didn't work at all...

    I updated the script, moved the java into my public folder and added latest version of javascript.

    http://www.andrewstaffordmusic.co.uk if you want to take a closer look.

    anyone with any ideas?

    its mega important.

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    It worked insofar as there's now one error less.

    I told you to use a debugger. It's mega important. It will tell you that $ is not defined, because you didn't close the quote in the script tag embedding jQuery.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Has anyone less patronising implemented a javascript animated scroll?

    I'd love to know how it's done but rather not be spoken to like an piece of crap.

    I don't know javascript well. fact.
    I also know that everyone that does know javascript, at one point knew less than I do know. We all have our own skill set.

    I really need to finish this website, its for myself and I'm not a professional.

    These are the instructions I tried my best to follow http://flesler.blogspot.com/2007/10/...scroll-10.html

    ...which resulted in the code in my first post, would anyone mind spending 5 minutes just talking me through it. The author of the Jquery plugin says it "incredibly easy". I'm guessing that refers to anyone that actually knows a thing or two about javascript.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    You have:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js></script>
    which should be:

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    As venegal points out, if you use an html validator, it will pick up at least the missing quote.

    If it helps, here is a test page that uses scrollTo (click on About at the top) which I wrote helping a user on this thread.

  • #7
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    you're missing a comma (in red below):
    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    and you're not linking to all the files:

    Code:
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.andrewstaffordmusic.co.uk/Java/jquery.scrollTo-1.4.2-min.js"></script>
    <script type='text/javascript' src='http://demos.flesler.com/jquery/localScroll/js/jquery.localscroll-min.js'></script>
    is what you need.

    The whole scrollTo and local scroll seems like over kill for what you are doing though. The local scroll plugin can take x and y positions, you only need x.


    the below uses a different smooth scroll method. make sure you download and link locally to the file here:

    https://github.com/kswedberg/jquery-smooth-scroll (the jquery.smooth-scroll.min.js is what you need)

    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Scroll :: easy version ;)</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$('div#nav a').smoothScroll();
    });
    </script>
    
    <style type="text/css">
    body {
    padding: 80px 0 22px 0;
    margin: 0;
    }
    div#nav {
    padding: 20px;
    background: #eee;
    border: 2px solid #000;
    text-align: center;
    width: 100px;
    position: fixed;
    top: 0;
    right: 0;
    }
    
    div#first, div#second, div#third, div#fourth {
    width: 500px;
    height: 500px;
    margin: 0 0 30px 0;
    border: 1px solid #000;
    background: #ddd;
    }
    
    </style>
    
    </head>
    <body>
    	<div id="nav">
        	<ul>
    		<li><a href="#first">Link 1</a></li>
            <li><a href="#second">Link 2</a></li>
            <li><a href="#third">Link 3</a></li>
            <li><a href="#fourth">Link 4</a></li>
            </ul>
    	</div>
        
        <div id="first">First div</div>
        <div id="second">Second div</div>
        <div id="third">Third div</div>
        <div id="fourth">Fourth div</div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Hmm, just been playing around with this and I couldn't get it to work using $.localscroll either. I'm not very familiar with the plugin, wonder if possibly this is outdated, but if you make your Scroll.js:

    Code:
    $(document).ready(function() {
        
    	$('#menudiv a').click(function(){
    		$.scrollTo(this.hash);
    		return false;
    	});
    });
    and sort the missing close quotes it does work.

    I didn't see a problem with linking to the js files myself.

  • #9
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    In his original code he actually isn't linking to the localscroll file, thus the function doesn't work.

    http://demos.flesler.com/jquery/loca...lscroll-min.js

    The above needs to be in there as well.

    But, like I said and looks like you agree, a simpler scrollTo would be better.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Yes, you're quite right, but Firebug didn't throw an error on the localscroll function. Odd....

  • #11
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Made a few changes and it still doesn't work.

    I've made another age to it test it out so as not to screw my working page.

    http://www.andrewstaffordmusic.co.uk/indexJava.html

    Could you look at that and see what it is?

    I've changed my scroll.js like you said and added the corrected scripts to the head...

    Also, you guys are aware that this should be animated scrolling right? the site already "jump" scrolls..

    Many thanks for any replies.
    Last edited by andyfordays; 01-11-2011 at 08:58 PM.

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    guys I'm desperate...

  • #13
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I also remember reading the default animation is set to "none" maybe that's why you couldn't get scroll to working.

    I couldn't figure out how to change the setting though...

    http://flesler.blogspot.com/2007/10/...scroll-10.html this where it says how to implement

    http://flesler.blogspot.com/2007/10/jqueryscrollto.html this is the one where it says the default s set to none.
    Last edited by andyfordays; 01-11-2011 at 10:52 PM.

  • #14
    New Coder
    Join Date
    Jan 2011
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am also using dreamweaver to try and debug and have downloaded firebug...

    it hasn't really helped in that I don't really know what I'm looking for.

    There's nothing relevant thats red which is always a good sign!

    I've dedicated yet another evening to this and got nowhere..

    www.andrewstaffordmusic.co.uk

  • #15
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    error:

    Code:
    	if(localtion.hash) {
    			var hash = location.hash;
    			window.scroll(0,0);
    			$("a[href="+hash+"]").click();
    		}
    		
    	});

    location
    .hash
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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