www.webdeveloper.com
Results 1 to 2 of 2

Thread: controlling of my iframes

  1. #1
    Join Date
    May 2012
    Posts
    2

    controlling of my iframes

    Hi

    Ive set up a homepage with 5 iframes, they overlay each other and I have buttons to turn them on and off using the code in a button for each frame -

    Code:
    <div id="click" onclick="HideFrameWorld()"><img src="./images/world.jpg" height="72" width="72" class="auto-style1"></div>
    this calls

    Code:
    <script type="text/javascript">
    <!--
    function HideFrameWorld() {
      var fr = document.getElementById ("World");
    if(fr.style.display=="none") {
       fr.style.display="block";
    }
    else {
       fr.style.display="none";
      }
     }
    //-->
    </script>
    This works fine for each iframe but the problem is when the page loads they are all on the screen at once and I have to close them all other than one to display properly.

    Id like to be able to have the page load with one of the iframes visible.

    The function of the buttons with the above code or similar will be to first close any iframes that are open perhaps with something similar to this [ive picked this up on the web but its css rather than js - would this be a problem?]

    Code:
    	iframe {
       display:none;}
    Then to display the relevant frame. My frames are called

    GoogleCal
    Googlenews
    Gallery
    World
    Bucketlist
    Shares

    Any help appreciated with this. Ive been playing around all morning and cant seem to get anywhere..

    Thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,636
    set all the iframes in the CSS {display:none;}
    and skip the only one you want to be visible on page load

    change the function to let it be much universal:

    Code:
    function HideFrameWorld(objID){
    var fr = document.getElementById(objID);
    if(fr.style.display=="none"){fr.style.display="block";}
    else{fr.style.display="none";}
    }
    now you can show any iframe by it's id like HideFrameWorld('here_goes_the_id')

    if you need only one iframe to be visible after this show/hide you need the other iframes to be hidden

    Code:
    // these are your iframes id's
    var myiframes=['GoogleCal','Googlenews','Gallery','World,'Bucketlist','Shares'];
    
    function HideFrameWorld(objID){
    var fr = document.getElementById(objID);
    if(fr.style.display=="none"){
    fr.style.display="block";
    // this hides the other iframes and skips the current
    for(var i = 0; i < myiframes.length; i++){
    if(myiframes[i]==objID){continue;}
    else{document.getElementById(myiframes[i]).style.display='none';}
    }
    }
    else{fr.style.display="none";}
    }
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles