SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Using ScrollTo with Jquery

    I am trying to implement the scroll to effect for anchor jumping. I have taken the scripts and inserted them correctly... I think but still nothing.

    Here is the link:
    Grubbs Pharmacy Logo Ideas

    This is the site I got the scripts from:
    Animated Scrolling for Same-Page Links Learning jQuery - Tips, Techniques, Tutorials

    Can someone please help me get this working.
    Thanks

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,192
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Never seen that before, try the following plugin which includes the latest release and the jQuery 1.4.2 release but it should work fine with jQuery 1.5.1.

    Ariel Flesler: jQuery.ScrollTo

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    71
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I have tried using your instructions and still haven't got it working.

    Check my source on each version:

    Grubbs Pharmacy Logo Ideas
    Grubbs Pharmacy Logo Ideas

    On the first one I thought maybe I could apply the same scrollTo() to all a tags as I don't need to get as complicated as your demo.

    The second I tried putting them all inline like the demo but still no luck.

    I'm still a newbie to JS so please pardon my inexperience.
    Thanks for your help

  4. #4
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would love some help on this as well. The plugin looks awesome, but the "documentation" is horrible.... all of the examples are very skeletal code snippets that don't really explain how to do any of the method calls.

    Any help in this area would be appreciated.

    I am trying, for example, to do :

    $.scrollTo('800px');
    or
    $('#mydiv').scrollTo('#anotherDiv');

    etc. etc..... not getting anything. Some very simple docs explaining the basic way of making it work would be splendid. Very useful plugin from what I can see.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    seems others are having this problem as well, from looking at the forums. I just need to know the BASICS of how to get it to work at all.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shem View Post
    seems others are having this problem as well, from looking at the forums. I just need to know the BASICS of how to get it to work at all.
    Does the demo page provide enough of the basics with which to help you out with?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @paul

    The demo page is part of what I'm having a problem with. The examples look great But the code is all small snippets that don't give a larger view of what's going on.

    For example, I"ve included the jQuery source in my documents (I reference it locally), been using jQuery for about a month now, with no problem. I also downloaded and include the jQuery scrollTo plugin....


    All i'm doing it dynamically creating a div and then I want JQuery to scroll to the new div once it's created.... but I can't seem to make any scrolling happen at all.

    Here is my full code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Welcome to j</title>
    <script src="jQuery/jquery-1.4.2.js"></script>
    <script src="jQuery/jquery-ui.js"></script>
    <script src="jQuery/jquery.scrollTo-1.4.2-min.js"> </script>

    <script type="text/javascript">


    function transform(){

    $('<div id="newdiv" align="left"><img src="images/start.png"></div>').prependTo('#innerchanger');


    }

    function scrolli(){
    $('#innerchanger').scrollTo($('#newdiv',0));

    }


    </script>



    <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    <body>

    <div id="changer" align="left"><div id="innerchanger" align="left"><img src="images/start.png" align="left"></div></div>

    <div class="words">
    <p>Testing ground. </p>
    <p>&nbsp;</p>

    <input type="submit" name="boom" id="boom" value="Submit" onClick="transform()">
    <input type="submit" name="boomer" id="bommers" value="scroll" onClick="scrolli()">

    <p>&nbsp;</p>
    <p><a href="#" onClick="transform()">transform </a></p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

    <p>&nbsp;</p>
    </body>
    </html>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shem View Post
    All i'm doing it dynamically creating a div and then I want JQuery to scroll to the new div once it's created.... but I can't seem to make any scrolling happen at all.
    ...

    $('#innerchanger').scrollTo($('#newdiv',0));
    Is the #innerchanger element a scrollable element, or are you instead wanting to scroll the screen to a certain location?

    If the latter, the project page says:


    If you need to scroll the window (screen), then use:
    Code:
    $.scrollTo(...);//the plugin will take care of this
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    innerchanger is not a scrollable element....

    innerchanger is a div within the changer div.

    Changer IS scrollable. I see, maybe you're helping me see what's wrong...


    basically i have a scrollable element called changer, with divs inside. Every time I add a new div, I want the changer element to scroll to "reveal" the new div that's been added inside.

    I'm using the jQuery appendTo function to keep dumping new divs in there.

  10. #10
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is the css for the changer element:
    #changer {

    position:relative;
    left:100px;
    top:100px;
    background-color:#9C0;
    width: 500px;
    height:310px;



    overflow:scroll !important;
    float:left;
    display: inline-block;
    white-space: nowrap;


    }


    and here is how I'm calling the scrollTo now:

    function scrolli(){
    $('#changer').scrollTo($('#newdiv',0));

    }



    yet, the scrolli ( ) function is indeed being called, but no movement at all is happening.

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shem View Post
    innerchanger is not a scrollable element....

    innerchanger is a div within the changer div.

    Changer IS scrollable. I see, maybe you're helping me see what's wrong...
    So if the changer div is what you want to scroll, you would instead want to use the following type of code:

    $('#changer').scrollTo(...)

    Where the part in the scrollTo parenthesis contains the target location of where you want to scroll to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I see the problem now.

    Apparently, you can't "scroll to" an object that has been dynamically generated on the page. Well, you probably CAN, but not the way I'm doing it. If I DON'T dynamically generate the new div, then I am able to scroll to it using the function. It just jumps right to it without scrolling smoothly, but I'm sure that's an easy fix.

    At any rate, that feedback was very helpful. I have the basic scroll to working now, just need to figure out how to make it scroll to dynamically generated items, which should be just a simply matter of doing some research.

    thanks for pointing me in the right direction !

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Shem View Post
    just need to figure out how to make it scroll to dynamically generated items, which should be just a simply matter of doing some research.
    You can pass the dynamically generated item to the scrollTo method, so that it knows exactly what to scroll to.

    You should know though that unique identifiers must be unique. It's invalid to have multiple elements with the same identifier.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Addict
    Join Date
    Dec 2002
    Location
    Philadelphia
    Posts
    299
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I am going to change it so that multiple divs generated will each have a unique number. For now I was just generating one. I will probably append a number to the end of each id name to make them all unique.

    I will also try passing the generated items to the scrollTo method as well.

    thanks for the help, man.... you rock


Bookmarks

Posting Permissions

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