1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:38 am May 14, 2026

Forum Moderators: open

Message Too Old, No Replies

onClick problem with MSIE

         

rainborick

4:27 pm on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I've got an onClick handler on an <a>nchor tag in which I want to have the HREF followed if the user has JavaScript disabled. The onClick handler toggles the visibility of a section of the page, and returns "false". I even included an extra return in the onCLick value to be sure. The problem is that the SECOND TIME the link is clicked, IE tries to follow the HREF value. I spotted a reference to "event bubbling" on MSIE, but it didn't seem to be the source of this problem. The code works as expected in NS and Firefox. So, I'm stumped, nearly blind, and nearly out of coffee. Any suggestions would be greatly appreciated.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Table Row CSS Visibity Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

body { width:100%; height:100%; margin:0; }

#mainContent { position:relative; width:100%; height:100%; z-index:1; }

#row1 { font-size:10px; display:table-row; }
#row2 { font-size:10px; display:table-row; }
#row3 { font-size:10px; display:table-row; }

</style>
<script type="text/javascript">

settings = new Array("1","1","1","1");

function toggle(theRow) {
theRowID = "row" + theRow;
theElement = document.getElementById(theRowID);
if (settings[theRow] == "1") {
theElement.style.display = "none";
settings[theRow] = 0;
} else {
theElement.style.display = "table-row";
settings[theRow] = 1;
}
return false;
} // end toggle

</script>
</head>
<body><div id="mainContent">
<table width="50%" cellpadding="0" cellspacing="0" border="1">
<tr id="row1">
<td><p class="row1"><a href="index.html" onclick="toggle(2); return false;">Row 1 Content</a></p></td>
</tr>
<tr id="row2">
<td><p>Row 2 Content</p></td>
</tr>
<tr id="row3">
<td><p>Row 3 Content</p></td>
</tr>
</table>
<br>
</div><!-- end mainContent -->
</body>
</html>

Bernard Marx

5:23 pm on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's because, on the 2nd go, you are trying to give IE a CSS display value it thinks to be invalid. IE doesn't support 
[blue]display:table-row;[/blue]

This causes a script error, leading to the thread being abandoned, and the 

href
being followed (since the return false isn't executed).

There is a way around the table-row issue that doesn't involve browser sniffing. This is:

Hiding: set element's direct 

[blue]style.display[/blue]
to "none" (as currently)
Showing: set direct style.display to 
[blue]""[/blue]
. Effectively removing the attribute, and allowing the default style to take effect.

Here's a function that uses this principle. We can do away with the lookup array, 

settings
, and just read the current display state from the element. 

style.display = "" -> evaluates as false -> the row is shown -> set to "none"
style.display = "none" -> evaluates true -> row is hidden -> set to ""

Note that the function will go astray if any rows are 

display:none;
in stylesheet settings
- because stylesheet properties cannot be read directly from elements.
It's OK to set 
display:none;
in inline style attributes though.

using link: 

onclick="return toggle(2);"


function toggle(iRow)
{
 var rowStyle = document.getElementById("row"+iRow).style;
 rowStyle.display = (rowStyle.display? "":"none");
 return false;
}

rainborick

6:00 pm on Feb 3, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Works like a charm! Thanks a bunch, Bernard!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 11:38 am May 14, 2026