|
|
Posted by Jonathan N. Little on 09/07/06 14:36
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
[Back to original message]
|