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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hide more than one Iframe

    hi all,
    I'm currently working on a new website design and i've nearly finished but i am having a real problem with an effect i am trying to achieve. Here's the idea; i have 2 iframes on my page, one for navigation and one for details of the curent page. I've found a script that will allow me to hide one iframe by using radio buttons (hide and show) but no matter what i try, it just will not allow me to have more than one 'copy' of this script in the coding. I want to be able to hide and show each iframe individualy. Here's the code i'm using:

    Code:
    <script> 
    function show(state){ 
    tag = document.getElementsByTagName("IFRAME"); 
    
       for(i=0; i<document.DetailForm.RadioDetail.length; i++){ 
          if(document.DetailForm.RadioDetail[i].checked == true){ 
             for(x=0; x<tag.length; x++){ 
                if(tag[x].name == "detailload"){ 
                   tag[x].style.display = state 
                } 
             } 
          } 
       } 
    }
    
    function show(state){ 
    tag = document.getElementsByTagName("IFRAME"); 
    
       for(i=0; i<document.DetailForm.RadioNavi.length; i++){ 
          if(document.DetailForm.RadioNavi[i].checked == true){ 
             for(x=0; x<tag.length; x++){ 
                if(tag[x].name == "NaviFrame"){ 
                   tag[x].style.display = state 
                } 
             } 
          } 
       } 
    } 
    
    
    </script> 
    <form name="DetailForm" id="DetailFormID" method="post" action=""> 
      <p> 
        <label> 
        <input type="radio" name="RadioDetail" value="Hide" onclick="show('none')" /> 
        Hide Details</label> 
        <br /> 
        <label> 
        <input type="radio" name="RadioDetail" value="Show" onclick="show('block')" /> 
        Show Details</label> 
        <br /> 
      </p> 
    
    
    <form name="NaviForm" id="NaviFormID" method="post" action="">
      <p> 
        <label> 
        <input type="radio" name="RadioNavi" value="Hide" onclick="show('none')" /> 
        Hide Navi</label> 
        <br /> 
        <label> 
        <input type="radio" name="RadioNavi" value="Show" onclick="show('block')" /> 
        Show Navi</label> 
        <br /> 
      </p>
    The navigation Iframe is called NaviFrame and the details Iframe is called detailload. The script above has both mixed in but i've also tried them seperate from each other which also failed. I have tried almost everything logical with this script and nothing seems to work. Can you help me?

    If there isn't a solution, could someone please tell me how to create 2 buttons that toggle a hide/show 'effect' each Iframe individually?

    Thanks,
    Scott.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 494 Times in 481 Posts
    <script>
    function show(state){
    tag = document.getElementsByTagName("IFRAME");

    tag[0] is the first IFRAME
    tag[1] is the second IFRAME

    so

    tag[1].style.visibility='hidden';
    tag[0].style.visibility='visible';
    if (document.DetailForm.RadioDetail[i].checked){
    tag[0].style.visibility='hidden';
    tag[1].style.visibility='visible';
    }

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    wow, that was quick!

    Thanks,
    Scott.


  •  

    Posting Permissions

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