style.display IE vs NS 6

[Gatchaman]

Hey all, i've just spent a day coding a forum type topic/reply system using javascript and css, something along the lines of this . . .

style sheet:

#diagnosis0     {  display:none; margin-left:0px }
#reply0         {  display:none; margin-left:0px }
#reply0_1       {  display:none; margin-left:0px }
#reply0_2       {  display:none; margin-left:0px }
#diagnosis1     {  display:none; margin-left:0px }
#diagnosis2     {  display:none; margin-left:0px }
#diagnosis3     {  display:none; margin-left:0px }

example javascript menu:

function toggleMenu(currMenu)
{
        if (document.all)
        {
                hideOther(currMenu);
                thisMenu = eval("document.all." + currMenu + ".style");

                if (thisMenu.display == "block")
                {
                        thisMenu.display = "none";
                } else {
                        thisMenu.display="block";
                }

                return false;
        } else {
                return true;
        }
}

example of function call:

<a class='hyperlinks' onClick='toggleMenu(diagnosis0)'>Click</a>

example of menu thingy:

<span id='diagnosis0'>Hello there!</span>

The thing is, it works fine in IE, but I decided maybe I should test in Netscape (6.0+) and Mozilla/Phoenix and was alarmed that my hard work may have gone to waste due to the fact that when I clicked on a link to toggle a menu the browser did absolutely nothing.

So, what I was wondering is, what can I do to achieve the same ends in Netscape or Mozilla/Phoenix.

Thanks in advance for any help.

Damon

 

[xutopia]

your problem has to do with DOM!

IE4.x+ used an old proprietary DOM called the MSDOM where every element on the page that had an ID could be reffered to using document.all[id].

The new DOM which is now the standard from the w3c.org is called DOM 1. We refer to elements using the document.getElementById(id) method which is compatible with IE5+, Gecko Based Browsers (GBB) such as Mozilla and phoenix (now that is a browser).

instead of using if(document.all) you could actually use a method called document.getElementById and if it doesn't exist it (in IE4+ create it).

// upgrading the browser implementation
if (!document.getElementById)
{
document.getElementById = function(id)
{
return document.all[id];
}
}

Now a cleaned up version of your togglemenu could look like so :

function toggleMenu(id)
{
hideOther(id);
currMenu = document.getElementById(id);

currMenu.style = (currMenu.style == "block&quot? "none" : "block" ;
}

I hope this helps you out! Good luck! Gary

http://www.xutopia.com

Haran

 

[Gatchaman]

Wow, thanks, you learn something new every day

Cheers mate, will try that now.

 

[mwolf00]

Damn good stuff Gary! A star for you! Get the Best Answers! faq333-2924
Is this an asp FAQ? faq333-3048
Tek-Tips Best Practices: FAQ183-3179

 

[tjd]

I'll double that! It answered a question about the IE4 logic that's been nagging for days. - "Oops! I've joined a club that'll have me as a member?" -

 

[palbano]

// upgrading the browser implementation
if (!document.getElementById)
{
  document.getElementById = function(id)
  {
    return document.all[id];
  }
}

That's like an anonymous - function - prototype... I don't even know what to call it!!!! I've got to try that!


-pete

 

[xutopia]

I am glad this is popular! I should write an article/tutorial (FAQ) on upgrading the browser implementation! Gary

http://www.xutopia.com

Haran

 

[xutopia]

oh pete! The name is anonymous function! Gary

http://www.xutopia.com

Haran

 

[Gatchaman]

Um, just a quick question, where would I put that anonymous function ?

(Please excuse my ignorance, I'm nweish to javascript)

 

[xutopia]

Gatchaman,

Your best bet is to put this above any other code. Think of it as a library your other Javascript uses.

// upgrading the browser implementation
if (!document.getElementById)
{
document.getElementById = function(id)
{
return document.all[id];
}
}

Gary

http://www.xutopia.com

Haran
==========================

 

[Gatchaman]

Ok, I have another query, but first, I'll epxlain my page a little more. I have the function toggleMenu(currMenu), and I also have a function toggleReplyMenu(currMenu), these are essentially the same, except that toggleMenu calls hideOther, and toggleReplyMenu(currMenu) calls hideOtherReply(currMenu), which are also functions.

What my page is, is a dynamic form, someone posts a topic, and it shows up as a row in a table that is a link, if they click on the link it calls toggleMenu and shows the post for the topic, as well as a link to view the replies. On clicking the replies, another few lines show up, one for each reply that are essentially like the topics, you click on a reply to unhide it. But, when you click on another reply, it hides the current one, and when you hide all the replies by clicking on the view replies link, it hides all of them, and when you click another topic it hides everything and opens the topic . . . *phew*

Now, I had all this working in IE, until I found the discussed problem (first post), and have since rewritten the toggleMenu() and toggleReply functions, and these work in both IE & NS, but I've commented out the calls to hideOther() and hideOtherReply(), as I don't yet have these working yet.

So, I'd like to ask for help with these functions, here is an example of hideOther():

function hideOther(currMenu)
{
        thisMenu = document.getElementById(currMenu);
        var diagnosisArray = new Array();
        diagnosisArray[0] = document.getElementById(diagnosis0);

        var replyArray0 = new Array();
        replyArray0[0] = document.getElementById(reply0);
        replyArray0[1] = document.getElementById(reply0_1);
        replyArray0[2] = document.getElementById(reply0_2);
        var replyCount0 = replyArray0.length - 1;

        diagnosisArray[1] = document.getElementById(diagnosis1);

        diagnosisArray[2] = document.getElementById(diagnosis2);

        var replyArray2 = new Array();
        replyArray2[0] = document.getElementById(reply2);
        replyArray2[1] = document.getElementById(reply2_1);
        var replyCount2 = replyArray2.length - 1;

        diagnosisArray[3] = document.getElementById(diagnosis3);

        diagnosisArray[4] = document.getElementById(diagnosis4);

        var replyArray4 = new Array();
        replyArray4[0] = document.getElementById(reply4);
        replyArray4[1] = document.getElementById(reply4_1);
        var replyCount4 = replyArray4.length - 1;

        for (i=0;i<diagnosisArray.length;i++)
        {
                if (diagnosisArray[i] != thisMenu)
                {
                        diagnosisArray[i].style.display = &quot;none&quot;;
                } else {
                        for (j=0;j <= replyCount0; j++)
                        {
                                replyArray0[j].style.display = &quot;none&quot;;
                        }
                        for (j=0;j <= replyCount2; j++)
                        {
                                replyArray2[j].style.display = &quot;none&quot;;
                        }
                        for (j=0;j <= replyCount4; j++)
                        {
                                replyArray4[j].style.display = &quot;none&quot;;
                        }
                }
        }
}

Now, I'm sure that this looks like a very ugly function (to anyone that's written any javascript), but, let me explain. These functions (hideOther() and hideOtherReply(), along with the style sheet) for this page are created dynamicclay using ASP. My page get's it's info from some XML and decides whether we need to create any reply styles for a given diagnosis etc. and then creates the appropriate lines of javascript in the function to handle the styles/spans that are created.

But, after replacing eval(document.all.xxxxxx.style) with document.getElementById(xxxx) it stops working. I'm just wondering if this is because I have to put it into an eval() as well ?

Thanks for your help so far xutopia

 

[Gatchaman]

oops, I meant dynamic forum not form. Anyways, here is an example of the hideOtherReply function. What I'm doing is editing this as a html page, and then when i get it working I write the ASP to output it.

function hideOtherReply(currMenu)
{
        var replyArray0 = new Array();
        replyArray0[1] = document.getElementById(reply0_1);
        replyArray0[2] = document.getElementById(reply0_2);
        var replyCount0 = replyArray0.length;

        for (i=1; i<replyCount0;i++)
        {
                if (replyArray0[i].style.display == &quot;block&quot;)
                {
                        replyArray0[i].style.display = &quot;none&quot;;
                }
        }

        var replyArray2 = new Array();
        replyArray2[1] = document.getElementById(reply2_1);
        var replyCount2 = replyArray2.length;

        for (i=1; i<replyCount2;i++)
        {
                if (replyArray2[i].style.display == &quot;block&quot;)
                {
                        replyArray2[i].style.display = &quot;none&quot;;
                }
        }

        var replyArray4 = new Array();
        replyArray4[1] = document.getElementById(reply4_1);
        var replyCount4 = replyArray4.length;

        for (i=1; i<replyCount4;i++)
        {
                if (replyArray4[i].style.display == &quot;block&quot;)
                {
                replyArray4[i].style.display = &quot;none&quot;;
                }
        }
}

Also, with my last post, I've replaced

thisMenu = document.getElementById(currMenu);

with

var thisMenu = eval("document.getElementById(" + currMenu + &quot"

and so on for each time I call document.getElementById(), but to no avail. Could it be something to do with the fact that I'm storing these in an Array ?

 

[xutopia]

Catchaman,

inside the document.getElementById("id&quot function the parameter you have to give it is a string. Therefore if the id is toto then you must refer to it using :

<div id=&quot;toto&quot;>this is toto's div</div>

<script>

document.getElementById(&quot;toto&quot

</script>

I hope this answers your question. I'm off for a few days so I won't be available to answer questions (until wednesday night atlantic time most likely) Gary

http://www.xutopia.com

Haran
==========================