SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE6 parsing bug - anyone else?

    I'm doing some dom scripting.

    A quick description:

    I have 10 anchor tags, and by default the class of all of them is set to "off", like so:

    [a class="off"]blah blah blah [span][img class="close"] cha cha[/span][/a]

    In the css:
    a.off span {display:none;}

    an external function and event will change one of the [a] tags' class to "on".

    In the css:
    a.on span {display:block;}

    So now I see the span within that one [a] tag.

    An onclick event is attached to the [img class="close"], that changes it's [a] ancestor back to "off".

    Which then makes the [span] inside the [a] return to display:none;

    It does this fine in IE7, FF Win, FF Mac, Safari, Opera Mac. It partly works in IE6, with this one problem:

    When I click the close button, the [a] tag's classname changed back to "off" successfully, and ACCORDING TO THE IE DEVTOOLBAR, the span within that [a] tag is set to display:none, but it's still displaying! Why would the devtoolbar say "that span is set to display none" but the browser shows somethign completely different.

    More than that:
    In the script that does this change, I noticed if I add an alert() then duplicate the classname change, it works fine:

    anchorTag.className = "off"; // still shows the span
    alert("just an alert"); // still shows the span
    anchorTag.className = "off"; // span is now gone - wtf!!!


    If you have any ideas, it's greatly appreciated.

    Thanks,
    Tony

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what do you get if you do
    Code:
    anchorTag.className = "off"; // still shows the span
    alert(anchorTag.className); // still shows the span
    anchorTag.className = "off"; // span is now gone - wtf!!!

  3. #3
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind I know why it's going on - the event is bubbling up and calling the onclick of the <a> tag again. Try this:
    Code:
    anchorTag.className = "off";
    if (window.event) {
    window.event.cancelBubble = true;
    }

  4. #4
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Exclamation cancelBubble

    Jim -

    Thanks for your reply.

    To your first question, the alert box says "off".

    As for your second post, I may not be implementing this correctly. I've tried some different ways to use this to no avail. Forgive my noobness, but I assume cancelBubble will remove the alert? I've tried:

    Code:
    anchorTag.className = "off";
    if (window.event) {
         window.event.cancelBubble = true;
    }
    which doesn't correct anything. i still see a span that technically should be set to display block.

    Code:
    anchorTag.className = "off";
    alert("just an alert");
    if (window.event) {
         window.event.cancelBubble = true;
    }
    anchorTag.className = "off";
    which doesn't do anything different (behaves the same as if the "if" statement weren't present.

    If I'm implementing this wrong, please let me know. I appreciate you posting something for me to try. My last resort is to recode everything so that the script changes the span's style.display instead of changing the anchorTag's class, but I really think that would be much less efficient and managable.

  5. #5
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for not explaining more clearly. Here is my test code, I think you'll see what's going on from there:
    Code:
    <html>
    <head>
    <style type="text/css">
    a.on span {
    	display: block;
    }
    a.off span {
    	display: none;
    }
    </style>
    <script type="text/javascript">
    function on(obj) {
    	obj.className = "on";
    }
    function off(obj) {
    	obj.className = "off";
    	if (window.event) {
    		window.event.cancelBubble = true;
    	}
    }
    </script>
    </head>
    <body>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    <a class="off" onclick="on(this);">stuff<span><img src="blah.gif" onclick="off(this.parentNode.parentNode);" />some text</span></a><br/>
    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beautiful - thanks! I'm seeing some very positive results.


Bookmarks

Posting Permissions

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