Help with onclick in IE [Archive] - Dynamic Drive Forums

davechl

08-26-2008, 06:26 PM

Hi,
I was able to piece together a horizontal menu but found out that it doesn't work in IE7. Reading online, I learned that "onclick" doesn't work well in IE. But I'm wondering where the problem is exactly.

I have a horizontal menu bar that starts with a default/selected menu. When I click on another menu, the hilited state changes to this new menu. It works in FF2. But in IE7, each menu that I click becomes hilited, so you end up with every menu hilited instead of only the most recent one.

What do I need to make it work in IE7? :confused: Please help. Code below.

<script type="text/javascript">
function changeClass(obj) {
var lnks = document.getElementsByTagName('a');
for (var i = 0; i < lnks.length; i++) {
if (lnks[i].getAttribute('class') == "t_on") {
lnks[i].className = "t_off";
}
}
obj.className = "t_on";
}
</script>

<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.indentmenu{
font: 12px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #333333; /*dark gray border*/
border-width: 1px 0;
background: #cccccc center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a, .t_off{
float: left;
color: #000000; /*text color*/
padding: 5px 11px;
text-decoration: none;
/*border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: #000000;
}

.indentmenu ul li a:hover{
color: #000000 !important; /*text color of active item*/
text-decoration:underline;
}

.indentmenu ul li .t_on{
color: #000000 !important; /*text color of selected item*/
padding-top: 6px; /*shift text down 1px for selected item*/
padding-bottom: 4px; /*shift text down 1px for selected item*/
background: red center center no-repeat;
}
</style>

This is the div menu (default menu 2, with red background):

<div class="indentmenu">
<ul>
<li><a href="#" class="t_off" onclick="changeClass(this);">Menu 1</a></li>
<li><a href="#" class="t_on" onclick="changeClass(this);">Menu 2</a></li>
<li><a href="#" class="t_off" onclick="changeClass(this);">Menu 3</a></li>
</ul>
</div>

davechl

08-26-2008, 09:08 PM

Got a reply from another forum: the answer is just to remove the "if" line of argument, so the correct script looks like:

<script type="text/javascript">
function changeClass(obj) {

var lnks = document.getElementsByTagName('a');

for (var i = 0; i < lnks.length; i++) {
lnks[i].className = "t_off";
}

obj.className = "t_on";
}
</script>

codeexploiter

08-27-2008, 03:44 AM

I've modified the function you've provided a bit. If you notice you can see that in the below code I've avoided the use of 'getAttribute()'. If you check 'getAttribute()' has some other issues also in IE environment. So it would be better if the developer use the dot(.) notation to access the attributes (properties) of any kind of HTML element(s) in JavaScript, which is also short compared to the usage of 'getAttribute()'. So that main issue in your scrip was not 'onclick' events has some issues in IE but the usage of 'getAttribute()'.

Another shortcoming I thought about the script is the way you've accessed the anchor elements. You've accessed all the anchor elements available in your page, event it may be very few number we don't have to do that. Instead we can make the scope of the filtering of anchor elements very less if you can give an "ID" to the div element in which the menu anchor elements lies. In this case you'll only take the anchor elements which is in the div element designated for the menu section. Please do have a look at the following source.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.indentmenu {
font: 12px Arial;
overflow: hidden;
width: 100%
}

.indentmenu ul {
background: #ccc center center repeat-x;
border: 1px solid #333;
border-width: 1px 0;
float: left;
margin: 0;
padding: 0;
width: 100%
}

.indentmenu ul li {
display: inline
}

.indentmenu ul li a, .t_off {
color: #000;
float: left;
padding: 5px 11px;
text-decoration: none
}

.indentmenu ul li a:visited {
color: #000
}

.indentmenu ul li a:hover {
color: #000 !important;
text-decoration: underline
}

.indentmenu ul li .t_on {
background: red center center no-repeat;
color: #000 !important;
padding-bottom: 4px;
padding-top: 6px
}
</style>
<script type="text/javascript">
function changeClass(obj){
var lnks = document.getElementById('hmenu').getElementsByTagName('a');
for (var i = 0; i < lnks.length; ++i) {
if (lnks[i].className === "t_on") {
lnks[i].className = "t_off";
}
}
obj.className = "t_on";
}
</script>
</head>
<body>
<div id="hmenu" class="indentmenu">
<ul>
<li>
<a href="#" class="t_off" onclick="changeClass(this);">Menu 1</a>
</li>
<li>
<a href="#" class="t_on" onclick="changeClass(this);">Menu 2</a>
</li>
<li>
<a href="#" class="t_off" onclick="changeClass(this);">Menu 3</a>
</li>
</ul>
</div>
</body>
</html>

I've highlighted all the changes I've made.

Hope this helps.