Solved

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

Posted on 2008-10-10
7
983 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Several part series to implement Internet Explorer 11 Enterprise Mode
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

896 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now