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. #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,066
    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. #3
    Regular Coder
    Join Date
    Nov 2002
    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. #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. #5
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,066
    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 05:23 AM.
    Shawn

  6. #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. #7
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,066
    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
  •