Script not behaving as needed

Discussion in 'HTML' started by SHC, Sep 7, 2006.

  1. SHC

    SHC Guest

    I've put together the script below to show and hide content when an
    image is clicked. However, when it is clicked the screen jumps to the
    top of the page, rather than remaining with the image. Can anyone help
    please.
    Thanks
    SHC


    <html>
    <head>
    <script language="JavaScript">
    function showAndHide(theId)
    {
    var el = document.getElementById(theId)

    if (el.style.display=="none")
    {
    el.style.display="block"; //show element
    }
    else
    {
    el.style.display="none"; //hide element
    }
    }
    </script>
    </head>

    <body>
    <table><tr><td width=790 height="1000" valign="top">Some
    Content</td></tr></table>
    <table><tr>
    <td valign="top">
    <a href="#" onClick = showAndHide('Title')><img
    src="graphics/picture_heading.gif" alt="Picture Heading" height=30
    width=400 border="0"></a>
    <div id='Title' style="display:none">
    <p>Text</p></div></td></tr>
    </table>
    </body>
    </html>
     
    SHC, Sep 7, 2006
    #1
    1. Advertising

  2. SHC wrote:
    > I've put together the script below to show and hide content when an
    > image is clicked. However, when it is clicked the screen jumps to the
    > top of the page, rather than remaining with the image. Can anyone help
    > please.
    > Thanks
    > SHC
    >
    >
    > <html>
    > <head>
    > <script language="JavaScript">
    > function showAndHide(theId)
    > {
    > var el = document.getElementById(theId)
    >
    > if (el.style.display=="none")
    > {
    > el.style.display="block"; //show element
    > }
    > else
    > {
    > el.style.display="none"; //hide element
    > }
    > }
    > </script>
    > </head>
    >
    > <body>
    > <table><tr><td width=790 height="1000" valign="top">Some
    > Content</td></tr></table>
    > <table><tr>
    > <td valign="top">
    > <a href="#" onClick = showAndHide('Title')><img

    ^^
    This is your problem the URL to nowhere! And you onclick handler should
    be put in quotes. You have 2 options I can see,

    1) Have showAndHide() return false to cancel the link's click but if
    folks have JavaScript disabled the page will still jump to the top of
    the page, or better:

    2) Put a real location in the HREF! Give you link an ID and use it as an
    anchor for the HREF.

    <a id="StayHere" href="#StayHere" onclick="showAndHide('Title')">...

    folks have JavaScript disabled will still be puzzled when nothing
    happens, but at least thay won't just to the top of the page.

    A far BETTER solution IMO is to have NO link and have 'Title' displayed
    as default then in your JavaScript upon the documents 'onload' attach
    the 'showAndHide()' function to the IMG and set 'Title' display to none.

    That way the feature is only present when folks have JavaScript enabled
    but does not interfere when they don't!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Sep 7, 2006
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Steve - DND
    Replies:
    3
    Views:
    554
    Saravana [MVP]
    May 20, 2004
  2. Ken Kafieh
    Replies:
    7
    Views:
    2,497
    Roedy Green
    May 19, 2004
  3. William Krick
    Replies:
    4
    Views:
    77,873
    rt19983
    Dec 18, 2008
  4. mark | r

    list not behaving

    mark | r, Sep 3, 2004, in forum: HTML
    Replies:
    2
    Views:
    346
  5. amit kumar
    Replies:
    5
    Views:
    6,141
    velthuijsen
    May 18, 2004
Loading...

Share This Page