Page Working In FireFox But Not in Internet Explorer

[khanishfaq82]

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..

<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>

[chathura86]

getElementsByNa me is not well supported by IE

var eleArray = document.getElementsByName('hideGroup');

try some other alternative

Regards

[RamananKalirajan]

Hi Khanish,

I changed some part of the script to make the function work in IE. The IE fix function i found in some website as a fix. IE has this problem. Similarly document.getEle mentByClassName is not supported in Mozilla. Try use with the id not the name.

<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>

Thanks and Regards
Ramanan Kalirajan

[Dormilich]

Similarly document.getEle mentByClassName is not supported in Mozilla.

*lol*. AFAIK, IE is the one hardly supporting that.

btw. it’s document.getEle mentsByClassName

[RamananKalirajan]

@ Dormilich,
I haven't mentioned document.getEle mentsByClassNam e() is not supported in IE. I have said it is not supported by mozilla and that spelling mistake sorry its my mistake - typography error.

Thanks and Regards
Ramanan Kalirajan

[Dormilich]

yupp. but I tell you that IE has problems with this method, not Mozilla.

[RamananKalirajan]

Yep I am wrong this method doesnt works in IE but it will be working in Mozilla. Thanks for Correcting me.

Thanks and Regards
Ramanan Kalirajan

[khanishfaq82]

Hi Khanish,

I changed some part of the script to make the function work in IE. The IE fix function i found in some website as a fix. IE has this problem. Similarly document.getEle mentByClassName is not supported in Mozilla. Try use with the id not the name.

<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>

Thanks and Regards
Ramanan Kalirajan

I am highly grateful to you Mr. Ramanan..
Thanks for your reply and it worked perfectly..
Thanks once again.