SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    Scrolling a div with jQuery

    I have a photo album on my website where I keep holiday and vacation pics in separate albums. One you've picked your album and start to view individual pics, you get a column on the right that contains the thumbnails of the album you're in, so you can scroll up and down and go to a specific pic (example). It's basically a div with overflow: auto and a set height and width.

    Originally, I appended the photo ID to the link, so each one had <a name="a123" href="link.to/pic#a123"> (where the 123 is the pic ID) and it would scroll the list to keep the current pic at the top of the div. This had the nice side-effect of bringing the currently viewed fullsize pic up to the middle of the screen.

    It worked well until you got to the end of the album. The last three thumbnails would scroll the main window up, cutting off more and more of the currently viewed pic, making you have to scroll back down each time.

    So I started looking for a way to scroll the div to the current pic without scrolling the main window, and found a few promising things - scrollTo & LocalScroll to name two - but I was only able to get either of them to work with relative positioning values, and not with anchors. I know there's GOT to be a way to get that div to scroll on its own, but after an entire night of trying different things, I just can't get any of them to work.

    I have a #main on the next and previous links to get the main photo in the center of the screen so the previous/next links are reachable without scrolling, and I just need to figure out a way to get that list of thumbnails on the right to keep up with the current position in the album.
    <cfset myblog = "http://cydewaze.org/">

  2. #2
    SitePoint Wizard bronze trophy cydewaze's Avatar
    Join Date
    Jan 2006
    Location
    Merry Land, USA
    Posts
    1,096
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    GOT IT! I needed to use id= on my anchors instead of name=

    Code JavaScript:
    <script type="text/javascript">
    $(document).ready(
        function () {
            $('div#albumsidebar').scrollTo('#a236', 1200);
        }
    );
    </script>

    Tada!
    <cfset myblog = "http://cydewaze.org/">


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
  •