Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Script not behaving as needed

Reply
Thread Tools

Script not behaving as needed

 
 
SHC
Guest
Posts: n/a
 
      09-07-2006
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>

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      09-07-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Java String.replaceAll() not behaving as expected William Krick Java 4 12-18-2008 03:08 PM
list not behaving mark | r HTML 2 09-04-2004 06:34 PM
ThreadAbortException not behaving properly? Steve - DND ASP .Net 3 05-20-2004 04:22 AM
writeChars not behaving as expected Ken Kafieh Java 7 05-18-2004 11:58 PM
pointer to map is not behaving properly across function calls (for VC++ compiler) amit kumar C++ 5 05-18-2004 02:13 PM



Advertisments