Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2008-10-10
7
Medium Priority
?
996 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 200 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

783 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