...

View Full Version : Help with browser compatibility issue - clickHandler() in DOM2



MusicMan
02-16-2005, 07:30 PM
Greetings,

I recently discovered that some JS code used in some important support pages which work fine with IE do not work in browsers such as Netscape 7.2 and Firefox (any Mozilla browser?). A JS console message indicates "window.event" has no properties. Apparently there is no window.event in the DOM2 event model use by those browsers. I inherited this code and am not well-versed in JS, so I'm not real clear on what I need to do. Is there a JS pro out there that can help me out?

The page emulates an explorer-like function, with a line of text and a plus box to the left that can be clicked to reveal the details of the item. The plus box becomes a minus box which can be clicked to hide the details - basically a toggle function.

The HTML tags look like this:

<img src="./images/plus.gif" ID="M1" Class="Outline" Style="cursor:hand" width=11 height=11>&nbsp;<b>Specifications</b>
...[table stuff]...
<div ID="M1d" Style="display:none"><ul>......</ul>

...and the javascript in the page is as follows:


function clickHandler() {

var targetId, srcElement, targetElement;
srcElement = window.event.srcElement;
if (srcElement.className == "Outline") {

targetId = srcElement.id + "d";
targetElement = document.all(targetId);
if (targetElement.style.display == "none") {

targetElement.style.display = "";
srcElement.src = "images/minus.gif"; } else {

targetElement.style.display = "none";
srcElement.src = "images/plus.gif"; } } }
document.onclick = clickHandler;


Firefiox, NS7.2, etc. just do nothing at all when the plus icon is clicked, only IE works. Any help would be appreciated. Thanks.

MusicMan
02-17-2005, 01:40 AM
Nevermind - I've dealt with it. I just threw out that JS code completely and created a solution using CSS instead.

scrupul0us
03-30-2005, 06:20 PM
what was your CSS solution?

Kor
04-01-2005, 10:39 AM
window.event is an event model specific to IE. For crossbrowser solutions see also

here (http://webmonkey.wired.com/webmonkey/05/02/index4a_page2.html?tw=programming)

By short, the crossbrowser solution could be something like



var myElem;
function captureEvent(e){
if (!e) {myElem=event.srcElement}//if IE and compatible
else{myElem=e.target}//if Moz and compatible (DOM rec)
.....
.....
}

MusicMan
04-01-2005, 10:10 PM
I guess its part CSS, part JS. I used the CSS display property along with an id selector inside a div tag. Then two little JS functions just set document.getElementByID("id").style.display to either "none" or "block". Works great!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum