SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot imagize's Avatar
    Join Date
    Oct 2004
    Location
    Australia
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scroll DIV with javascript

    Hello,

    I have a div with overflow-y: scroll. I would like to be able to scroll through this list with the mouse. i.e when the mouse is towards the top it scrolls up and when it's at the bottom it scrolls down. Here is an example: http://www.dynamicdrive.com/dynamici...ongallery2.htm.

    I want the scrollbar to be visible so it can degrade gracefully so non-javascript users can just use the scrollbar.

    Thanks.

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    There's a better way of doing this without showing the scrollbars. Use a containing div that is the size that you need, and hide the overflow. Then within that use a div that is larger that has the overflow set to scroll. The scrollbars will be hidden by the containing div. The sections within the scrolling div will need to be the same size as the initial containing div. To get these to scroll without the need for a scrollbar is to use anchors and targets. An anchor, when clicked, will bring the target (id'd area) into view. You can then use javascript to bring the target into view onmouseover. I use this method both in menus and in contents.

    The menu can be seen at www.livescript.co.uk
    Contents can be seen at www.maxfire.net/travels/
    Last edited by Markdidj; Aug 4, 2007 at 03:49.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, didn't look at the link first. What I would do with this is have a set of thumbnails as anchors to their relevant pictures.
    It would then work without javascript, and you can use javascript code to enhance the anchors so when moused over they would move into view.

    Alternatively you could set the last image in view as the anchor to the next collection to be made visible

    And another way is to make the scrollbars visible (yuck!!) and then resize the areas onload

    Hope this is helpfull. I'd love to see the results of whatever method you use Good luck
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


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
  •