Script working in Firefox But not in IE

Question

5.00/5 (1 vote)

See more:

This Script below works perfectly in firefox but fails to execute in Internet Explorer.Kindly copy and paste the script below to see it working.What i require is if i click 'MENU1' and it is still in visible state and i click 'MENU2' or 'MENU3' then the previous open Menu i.e(MENU1) should hide its sublinks and the one clicked should display its sublinks. So conclusion is that only sublinks of one group can be viewed at a time and hiding the rest..

Any help would be highly appreciated..
Thanks and Regards..:thumbsup:

XML

<script language="JavaScript" type="text/JavaScript">
<!--
function showHide(theid)
{
    if (document.getElementById)
    {
        HideOthers(theid);
        var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
            {
                switch_id.className = 'show';
            }
        else
            {
            switch_id.className = 'hide';
            }
    }
}
function HideOthers(theid)
{
        if(document.getElementsByName)
        {
            var eleArray = document.getElementsByName('hideGroup');
            for(i=0;i<eleArray.length;i++)
            {
                if(eleArray[i].id != theid)
                {
                    eleArray[i].className = 'hide';
                }
            }
        }
}//-->
</script>

<style>
.hide
{
    display: none;margin-left:2px;margin-top:2px;
}
.show
    {
        display: block;margin-left:2px;margin-top:2px;
    }
</style>
<div>

<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>
</div>

Posted 11-Apr-10 20:16pm

khanishfaq82

Add a Solution

6 solutions

Solution 1

The issue is with getElementsByName and the div element. You'll notice that document.getElementsByName will return a zero length array in IE.

http://msdn.microsoft.com/en-us/library/ms536438%28VS.85%29.aspx[^]

"This function does not return elements of type DIV and SPAN with that name, for some reason (unlike in Firefox). So use IDs instead (if you can...)"

There are a few different ways you can do this.

While I don't recommend jQuery for every little javascript problem, these sort of 'toggle' show\hide content can be handled very easily using it, maybe something to look into?

Posted 12-Apr-10 5:49am

Dylan Morley

Solution 2

Dear Dylan!
Thanks for taking a look into the issue.
Yes i agree to what you say and certainly it is a problem with the getElementsByName and the div tag..
Well i have sorted out the issue now and for your reference i will paster the code below..
Thanks a lot for your time..

XML

<script language="JavaScript" type="text/JavaScript">
function showHide(theid)
{
    if (document.getElementById)
    {
        HideOthers(theid);
        var switch_id = document.getElementById(theid);
        if(switch_id.className == 'hide')
        {
                 switch_id.className = 'show';
                    }
        else
                            {
                  switch_id.className = 'hide';
        }
    }
}
function HideOthers(theid)
{
    var eleArray;
        if(document.getElementsByName)
        {
        if(window.ActiveXObject)
            eleArray = getElementsByName_iefix('div', 'hideGroup');
        else
            eleArray = document.getElementsByName('hideGroup');

            for(i=0;i<eleArray.length;i++)
            {
                    if(eleArray[i].id != theid)
                    {
                       eleArray[i].className = 'hide';
                    }
            }
        }
}

function getElementsByName_iefix(tag, name) {

     var elem = document.getElementsByTagName(tag);
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}

</script>


<style>
.hide
{
    display: none;margin-left:2px;margin-top:2px;
    text-decoration:blink;
    background-color:#FFC
}
.show
    {
        display: block;margin-left:2px;margin-top:2px;
        text-decoration:blink;
    }
</style>
<form action="" name="test" method="post">
<div style="margin-bottom:5px">

<a  href="#" class="menu1" onclick="showHide('mymenu1')">Menu 1</a>
    <div  name="hideGroup" id="mymenu1" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu2')">Menu 2 </a>
    <div  name="hideGroup" id="mymenu2" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div><br>
<a href="#" class="menu1" onclick="showHide('mymenu3')">Menu 3 </a>
    <div  name="hideGroup" id="mymenu3" class="hide">
        <a href="#" >Link One here</a>
        <a href="#" >Link Two here</a>
        <a href="#" >Link Three here</a>
        <a href="#" >Link Four here</a>
    </div>
</div>
</form>

Posted 12-Apr-10 19:25pm

khanishfaq82

Solution 3

Yes that's certainly a way to do it. If you wanted to use jQuery, here's a bit of code that should be cross browser compatible & do the same thing.

<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#" class="menu1">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br>
    <a href="#" class="menu1">Menu 2 </a>
        <div id="mymenu2" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br>
    <a href="#" class="menu1">Menu 3 </a>
        <div id="mymenu3" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){
        $('.menu1').bind('click', function() {
            $('.menu1').next().addClass('hide');
            $(this).next().removeClass('hide');
        });
     });
    </script>
</body>

Posted 12-Apr-10 22:26pm

Dylan Morley

Solution 4

Dear Dylan!
There is a small issue..
I hope you can help me resolve that..
Now i have a lot of these Div's which go beyond the screen size.
If i click the last link, the screen is automatically set to the top of the page..
The Div that is clicked should remain focussed and in order to view that i have to scroll the page down again to view that.
What i am saying is if a link is beyound the scope of the screen and if i click that the screen should remain their only rather than sending it back to the top of the page..
And the second issue is that if i click the same link twice it should automatically Expand on ist click and Contract on second click. It is expanding on the ist click but not contracting the div area back on the second click using jQuery..
Try this code and you will come to know the issue!!

XML

<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#" class="menu1">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 2 </a>
        <div id="mymenu2" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 3 </a>
        <div id="mymenu3" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br>
        <a  href="#" class="menu1">Menu 4</a>
        <div id="mymenu4" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 5 </a>
        <div id="mymenu5" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 6 </a>
        <div id="mymenu6" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br>
        <a  href="#" class="menu1">Menu 7</a>
        <div id="mymenu7" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 8 </a>
        <div id="mymenu8" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#" class="menu1">Menu 9 </a>
        <div id="mymenu9" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){
        $('.menu1').bind('click', function() {
            $('.menu1').next().addClass('hide');
            $(this).next().removeClass('hide');
        });
     });
    </script>
</body>

Posted 13-Apr-10 1:59am

khanishfaq82

Solution 6

Dear Dylan!
I found it very interesting and i might start using jQuery rather than Javascript because the code is so compact.
And those br tags which i had used in the example was only for the example so that i can extend the page. :), i would never do something like that in my programming.. I always implement that stuff through css..:thumbsup:

Your concern was highly appreciable and i hope that we can have some more cross issue talks in near future..

Thanks Man and keep me posting your updates if you have some..
:thumbsup: and have a great time!!!!!

Posted 13-Apr-10 4:14am

khanishfaq82

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Dylan Morley · Accepted Answer · 2010-04-13T03:47:00

Use bookmark with your hyperlink tags to keep focus

Simple 'toggle' function will make the div collapse on second click

You shouldn't really use the br tag to space your document, have a look at some CSS.

Here's the solution to your question

<head>
    <script language="JavaScript" type="text/JavaScript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <style>
    .hide
    {
        display: none;
    }
    </style>
</head>
<body>
    <div>
    <a  href="#menu1" class="menu1">Menu 1</a>
        <div id="mymenu1" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu2" class="menu1">Menu 2 </a>
        <div id="mymenu2" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu3" class="menu1">Menu 3 </a>
        <div id="mymenu3" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br>
        <a  href="#menu4" class="menu1">Menu 4</a>
        <div id="mymenu4" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu5" class="menu1">Menu 5 </a>
        <div id="mymenu5" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu6" class="menu1">Menu 6 </a>
        <div id="mymenu6" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br>
        <a  href="#menu7" class="menu1">Menu 7</a>
        <div id="mymenu7" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu8" class="menu1">Menu 8 </a>
        <div id="mymenu8" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div><br><br><br><br><br><br><br><br><br><br>
    <a href="#menu9" class="menu1">Menu 9 </a>
        <div id="mymenu9" class="hide">
            <a href="#" >Link One here</a>
            <a href="#" >Link Two here</a>
            <a href="#" >Link Three here</a>
            <a href="#" >Link Four here</a>
        </div>
    </div>
    <script language="JavaScript" type="text/JavaScript">
     $(document).ready(function(){     
		$(".menu1").toggle(
		  function () {
			$('.menu1').next().addClass('hide');
			$(this).next().removeClass('hide');
		  },
		  function () {
			$('.menu1').next().addClass('hide');
		  }
		);     
     });
    </script>
</body>

Script working in Firefox But not in IE

6 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Solution 5

Solution 6

Add your solution here

Preview 0

Existing Members

...or Join us