Solved

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

Posted on 2008-10-10
7
982 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

746 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

12 Experts available now in Live!

Get 1:1 Help Now