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.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    "top of page" within div w/overflow:auto?

    good morning -

    i have a scrollable div (style="overflow:auto") and i want to know if i can put a "top of page" link within the div that will scroll said div to the top, whilst not moving the entire page.

    the page in question is located here.

    also, on a side note, anyone know how i can make the menu links underlined when the cell is rolled over?

    thanks in advance...
    TheRoper

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    To my knowledge, making the div scroll itself is not possible unless the scrolling device is created by you.
    As for the links, they are underlined when I hover them...
    Shawn

  • #3
    Regular Coder
    Join Date
    Nov 2002
    Location
    Manchester, UK
    Posts
    533
    Thanks
    4
    Thanked 1 Time in 1 Post
    try using

    <a href='#' onclick="document.all['layerName'].scrollTop = 0;">top</a>

    as for the hyperlink - not sure to be honest!!

  • #4
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks homeruk... that's just what i needed. shlagish, i meant when you hover over the 'cell' that the link is contained in... the bgcolor changes, and i also want the link to be underlined when the cell is hovered over, not just when you hover over the text link itself...

    thanks to you both for the replies...

  • #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh I see..

    <td onmouseover="this.childNodes[0].style.textDecoration='underline';" onmouseout="this,childNodes[0].style.textDecoration='none';" ...
    or something like it would work... but then, when you click on the cell, it wont go to that href. A simpler way is to make the anchor span the complete width and height of the cell.
    <td....><a style="display: block;"..>..
    I think should do it..
    if not:
    <td...><a style="display: block; width: 100%; height: 100%;"...>...

    Tell me if any of that works, I'll help you out with the details afterwards
    you might wanna check this out:
    http://css.maxdesign.com.au/listutor...tal_master.htm
    it does what your doing, but without a table... much less messy code. it's css based, anyways, hope I could help a bit.

    edit: I went to test a couple things..
    best way to do it really is to give an id to the tr that contains your links, let's say id="navigation"
    then in your stylesheet:
    #navigation a { display: block; }
    #navigation a:hover { text-decoration: underline; }
    Last edited by shlagish; 06-24-2004 at 04:23 AM.
    Shawn

  • #6
    New Coder
    Join Date
    Jun 2004
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    shlagish... right on! thanks for all the help and the reference...

    here's what i did in the header:

    Code:
    <SCRIPT LANGUAGE="javascript" TYPE="text/javascript"><!--
    
    function menuOver(obj)
       {
       (obj).childNodes[0].style.textDecoration='underline';
       }
    
    function menuOut(obj)
       {
       (obj).childNodes[0].style.textDecoration='none';
       }
       
    //--></SCRIPT>
    then, in the body:

    Code:
    <td onMouseover="menuOver(this)" onMouseout="menuOut(this)"
    onClick="window.location='/aboutus.htm'"...>
    <a href="/aboutus.htm">ABOUT US</a></td>
    note the onClick="window.location='/aboutus.htm'" in the td to solve the problem of clicking on the cell to follow the link.

    thanks again for all of your help... it is much appreciated...

  • #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Although this works, I would highly suggest simply adding
    #navigation a { display: block; }
    It is simpler, less code-bloating, not javascript dependant and offers the same possibilities..
    Your choice, but that's what I'd do..
    Shawn


  •  

    Posting Permissions

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