Solved

javascript onclick triggers css class change in firefox but not in ie

Posted on 2008-10-10
7
987 Views
Last Modified: 2013-12-07
I have a list of images that when clciked I want to display a red border around it. I have this working fine in firefox but dosent work in ie, not sure why. I tried on tghe link herf='#' as well and no luck.
<script language="javascript" type="text/javascript">
 
var previous = '';
function deleteImage(field){
 
	document.form1.deleteImage.value = field;
	if (previous != ''){document.getElementById(previous).className='inactive';}
	document.getElementById(field).className='active';
	previous = field;
	
}
</script>
 
<a href="javascript:void(null);" onclick="deleteImage('dinmenu01');"><img id="dinmenu01" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu02');"><img id="dinmenu02" class="inactive" src="" alt="" width="80" /></a> 
<a href="javascript:void(null);" onclick="deleteImage('dinmenu03');"><img id="dinmenu03" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu04');"><img id="dinmenu04" class="inactive" src="" alt="" width="80" /></a>
<a href="javascript:void(null);" onclick="deleteImage('dinmenu05');"><img id="dinmenu05" class="inactive" src="" alt="" width="80" /></a>

Open in new window

0
Comment
Question by:SelphProgrammer
  • 4
  • 3
7 Comments
 
LVL 7

Expert Comment

by:bluV11t
ID: 22690558
Move the onClick event to the image and not the anchor (A - tag). Maybe IE realoads thus always resetting your "previous" variable. You could style your "inactive" with "cursor: hand; " to make it appear as an achor :-)
0
 

Author Comment

by:SelphProgrammer
ID: 22690993
No good, doing it wothout <a> tags it dosent even work in forefox.
 <img id="dinmenu01" class="inactive" onMouseOver="this.style.cursor='pointer';" src="dinmenu01.jpg" onclick="deleteImage('this.id');" alt="" width="80" />

Open in new window

0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22691049
Please post css styles.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:SelphProgrammer
ID: 22691126
Here the are
@charset "utf-8";
 
/* coffee news adminsection css */
 
#main_admin {
	clear: both;
	margin: 0;
	padding-bottom: 5px;
	padding-top: 0;
	padding-left: 20px;
	padding-right: 0;
	float:left;
}
 
#footer_admin {
	clear: both;
	margin: 0; padding: 0 0 0 0;
	font: normal .92em/1.5em 'Trebuchet MS', Tahoma, Arial, sans-serif;
	height: 12px;
	background:#FFFFFF;
	text-align: center;
}
.active{
	border:2px solid #FF0000;
}
.inactive{
	border: 2px solid #CCCCCC;
}
/* --- table view tags ------------------------------------------------------- */
 
.KT_tngtable th, .KT_tngtable td.KT_th {
	border: 1px solid #ffffff;
	border-right-color: #848284;
	border-bottom-color: #848284;
	background-color: #D6D3CE;
	font-weight: bold;
	vertical-align: top;
}
/* the plain cells   */
.KT_tngtable td {
	border: solid 1px #d6d3ce;
	border-top-width: 0;
	border-left-width: 0;
	vertical-align: baseline;
}
 
/* Table and cell look and feel */
.KT_tngtable {
	border: solid 1px #999999;
}
	.KT_tngtable tfoot, .KT_tngtable thead {
		border: solid 1px #000000;
	}
	.KT_tngtable td, .KT_tngtable th, .KT_tngtable caption {
		padding: 5px;
		white-space: nowrap;
	}
	/* HACK: to make ktml3 skin work properly */
	.KT_tngtable .ktml * td {
		border: 0px;
		white-space: normal ! important;
	}
		.KT_tngtable .ktml span.lcontainer table {
		}
		.KT_tngtable .ktml span.lcontainer td {
			padding: 0px ! important;
			margin: 0px ! important;
			vertical-align: middle;
		}
 
/* Buttons area for tNG form */
.KT_buttons td {
	border-top: solid 1px #000000;
	padding: 4px;
	background-color: #dadadc;
	text-align: right;
}
 
/* Fonts for the table, table headings, table cells */
	.KT_tngtable td, .KT_tngtable th, .KT_tngtable caption {
		font-family: Arial, Helvetica, sans-serif;
	}
	.KT_tngtable th, .KT_tngtable td.KT_th, .KT_tngtable caption {
		font-size: 12px;
		text-align: left;
	}
	.KT_tngtable td {
		font-size: 11px;
	}

Open in new window

0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22691160
This produces the same result in IE and FF.
 <script language="javascript" type="text/javascript">
 
var previous = '';
function deleteImage(field){
 
        document.getElementById('form1').deleteImage.value = field;
        if (previous != ''){document.getElementById(previous).className='inactive';}
        document.getElementById(field).className='active';
        previous = field;
        
}
</script>
 
<a onclick="deleteImage('dinmenu01');"><img id="dinmenu01" class="active" src="pixel.gif" alt="" width="80" height=80 /></a><br />
<a onclick="deleteImage('dinmenu02');"><img id="dinmenu02" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu03');"><img id="dinmenu03" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu04');"><img id="dinmenu04" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
<a onclick="deleteImage('dinmenu05');"><img id="dinmenu05" class="active" src="pixel.gif" alt="" width="80" height=80  /></a><br />
 
<form id="form1">
<input type=text id="deleteImage"></form>

Open in new window

0
 

Author Comment

by:SelphProgrammer
ID: 22691259
correct but the images are not in the form when you put them in the form the dont work anymore, this sucks.
0
 
LVL 7

Accepted Solution

by:
bluV11t earned 50 total points
ID: 22693471
Change the name of the deleteImage field in the form to somthing else like deletedImage. Browser gets confused becuse the field and the function has the same name.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question