Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Location
    So Cal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help with browser compatibility issue - clickHandler() in DOM2

    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.

  • #2
    New to the CF scene
    Join Date
    Feb 2005
    Location
    So Cal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nevermind - I've dealt with it. I just threw out that JS code completely and created a solution using CSS instead.

  • #3
    Regular Coder
    Join Date
    Sep 2004
    Posts
    230
    Thanks
    1
    Thanked 0 Times in 0 Posts
    what was your CSS solution?

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    window.event is an event model specific to IE. For crossbrowser solutions see also

    here

    By short, the crossbrowser solution could be something like

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

    Last edited by Kor; 04-01-2005 at 09:47 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Feb 2005
    Location
    So Cal
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    clickHandler() solution

    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!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •