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 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Internet Explorer Works in all browsers except IE

    Any ideas on how I can make this work in IE as well?? It is a code that shows a divide on click and then hides the rest at the same time.

    live code is also at chryscreations.com/ns/boynames.html

    Javascript:
    Code:
    function showstuff(divID)
    	{
    		els=document.getElementsByName('mydiv')
    		for (var i = 0; i < els.length; i++)
    		{
    			els[i].style.visibility="hidden";
    			els[i].style.display="none";
    		}  
    		document.getElementById(divID).style.visibility="visible";
    		document.getElementById(divID).style.display="block";
    	}
    HTML
    Code:
    <head>
    <script>
    	window.onload=function()
    	{
    		showstuff('');
    	}
    </script>
    </head>
    
    <body>
       <a href="javascript:showstuff('adivide')">A</a>  
       <a href="javascript:showstuff('bdivide')">B</a>
    
       <div name="mydiv" id="adivide"></div>
       <div name="mydiv" id="bdivide"></div>
       
    <body>

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Code:
    showstuff('');
    Why are you passing null to document.getElementById when that will obviously generate an error?

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    I didn't know that would generate an error... I am trying to hide all divides on page load... should i write a different script for the head to do that?

    I tried creating an empty divide and having that be the one that shows on load but it still doesnt work...

    window.onload=function()
    {
    showstuff('emptydivide');
    }

    <div name="mydiv" id="emptydivide"></div>
    Last edited by Chrys; 10-08-2011 at 03:51 PM.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    name attributes are deprecated except for form elements, so you can't use getElementsByName.

    Note the differences:
    Code:
    <html>
    <head>
    <script>
    function showstuff(divID)
    {
       els = document.getElementById( 'myDiv' ).getElementsByTagName( 'div' );
    
       for (var i = 0; i < els.length; i++)
       {
         els[i].style.visibility="hidden";
         els[i].style.display="none";
       }  
    
       if( divID )
       {
         document.getElementById(divID).style.visibility="visible";
         document.getElementById(divID).style.display="block";
       }
    
       if( window.event )
         window.event.returnValue = false;
    
       return false;
    
    }
    
    	window.onload=function()
    	{
    		showstuff('');
    	}
    </script>
    </head>
    
    <body>
      <a href="#" onclick = "return showstuff('adivide')">A</a>  
      <a href="#" onclick = "return showstuff('bdivide')">B</a>
     
      <div id='myDiv'>  
       <div  id="adivide">I am div A</div>
       <div  id="bdivide">I am div B</div>
      </div>
       
    </body>
    </html>

  • Users who have thanked Logic Ali for this post:

    Chrys (10-08-2011)

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    That doesn't seem to be working in any browser...

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    why not just use css to hide the divs on page load like I posted in the other thread:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
      <title>blank</title>
        <meta charset="UTF-8">
    </head>
    
    <body>
    <style>
    .hide{
    display:none;
    }
    </style>
    
    <div class="hide" id="adivide">A</div>
    <div class="hide" id="bdivide">B</div>
    <div class="hide" id="cdivide">C</div>
    <div class="hide" id="ddivide">D</div>
    
    <script type="text/javascript">
    var shownDiv;
    function showstuff(divID){
    if (shownDiv){
    document.getElementById(shownDiv).style.visibility="hidden";
    document.getElementById(shownDiv).style.display="none";
     }  
       document.getElementById(divID).style.visibility="visible";
        document.getElementById(divID).style.display="block";
    	window.location.hash="names"; 
    	shownDiv=divID;
    }
    
    </script>
    <a href="javascript:showstuff('adivide')">A</a>
    <a href="javascript:showstuff('bdivide')">B</a>
    <a href="javascript:showstuff('cdivide')">C</a>
    <a href="javascript:showstuff('ddivide')">D</a>
    </body>
    </html>

  • #7
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Sorry... I missed where you put all the divides into another div! :-) now it works great! Thank you so much!


  •  

    Posting Permissions

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