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 4 of 4
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    switch between iframes

    Hi,

    I want to make a web page with a number of iframes, that hide/unhide in the same position.
    Does anybody know how i can switch between these iframes?
    By switching (and not by going straight to the iframes address), i don't loose the navigation of each iframe.

    Thank you in anticipation

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframes test</title>

    <SCRIPT language=javascript type="text/javascript">
    function showhideiframe ()
    {
    iframe.style.display="block"?????
    iframe.style.display="none" ?????
    }
    </SCRIPT>
    </head>

    <body>
    <A HREF="" onClick="showhideiframe()">iframe1</a> -
    <A HREF="" onClick="showhideiframe()">iframe2 </a>-
    <A HREF="" onClick="showhideiframe()">iframe3</a>
    <iframe name="iframe1" id="iframe1" src="http://www.site1.com" frameborder="0" border="0" style="display:block"></iframe>
    <iframe name="iframe2" id="iframe2" src="http://www.site2.com" frameborder="0" border="0" style="display:none"></iframe>
    <iframe name="iframe3" id="iframe3" src="http://www.site3.com" frameborder="0" border="0" style="display:none"></iframe>
    </body>
    </html>

  • #2
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Is this what you are after? It's a bit brute force but works in IE6. There are however some problems with this approach. Some websites pop themselves out of frames automatically which will break this. Some have javascript that will fail when used in iframes as well.

    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframes test</title>
    
    <SCRIPT type="text/javascript">
    function showhideiframe(frame,label)
    {
    	hideEmAll();
    	document.getElementById(frame).style.visibility = "visible";
    	label.style.border = "1px";
    	label.style.borderStyle = "solid";
    	
    }
    function hideEmAll() {
    	document.getElementById('iframe1').style.visibility = "hidden";
    	document.getElementById('label1').style.border = "none";
    	document.getElementById('iframe2').style.visibility = "hidden";
    	document.getElementById('label2').style.border = "none";
    	document.getElementById('iframe3').style.visibility = "hidden";	
    	document.getElementById('label3').style.border = "none";	
    }
    </SCRIPT>
    </head>
    <body>
    <div style="margin:1px">
    <label id="label1" onClick="showhideiframe('iframe1',this)" style="cursor:hand;border=1px;border-style:solid">iframe1</label> - 
    <label id="label2" onClick="showhideiframe('iframe2',this)" style="cursor:hand">iframe2 </label>- 
    <label id="label3" onClick="showhideiframe('iframe3',this)" style="cursor:hand">iframe3</label>
    </div>
    <div style="position:relative">
    <iframe id="iframe1" src="http://www.codinghorror.com/blog/archives/000790.html" frameborder="0"  style="position:absolute;top:0;left:0;width:640;height:480;visibility:visible"></iframe>
    <iframe id="iframe2" src="http://www.codinghorror.com/blog/archives/000789.html" frameborder="0"  style="position:absolute;top:0;left:0;width:640;height:480;visibility:hidden"></iframe>
    <iframe id="iframe3" src="http://www.codinghorror.com/blog/archives/000788.html" frameborder="0"  style="position:absolute;top:0;left:0;width:640;height:480;visibility:hidden"></iframe>
    </div>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much kuerwen!!!

    What you suggested functions, but it stucks. I tried to transform your code not quite succesfully (as below), in order the function with the "block" and "none" for the iframes. By this way it doesn't stuck, but it doesn't function in Firefox...

    Can you help this situation??

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>iframes test</title>

    <SCRIPT type="text/javascript">
    function showhideiframe(frame,label)
    {
    hideEmAll();
    document.getElementById(frame).style.display = "block";
    label.style.border = "1px";
    label.style.borderStyle = "solid";

    }
    function hideEmAll() {
    document.getElementById('iframe1').style.display = "none";
    document.getElementById('label1').style.border = "none";
    document.getElementById('iframe2').style.display = "none";
    document.getElementById('label2').style.border = "none";
    document.getElementById('iframe3').style.display = "none";
    document.getElementById('label3').style.border = "none";
    }
    </SCRIPT>
    <style type="text/css">
    <!--
    .style2 {
    font-size: 24px;
    font-weight: bold;
    }
    -->
    </style>
    </head>
    <body>
    <div style="margin:1px">
    <span class="style2">
    <a href="#" id="label1" onClick="showhideiframe('iframe1',this)" style="cursor:hand;border=1px;border-style:solid">cnn</a> -
    <a href="#" id="label2" onClick="showhideiframe('iframe2',this)" style="cursor:hand">bbc</a>-
    <a href="#" id="label3" onClick="showhideiframe('iframe3',this)" style="cursor:hand">wikipedia</a>
    </span>
    <p>&nbsp;</p>
    </div>
    <div style="position:relative">
    <iframe id="iframe1" src="http://www.cnn.com" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%; display="block"></iframe>
    <iframe id="iframe2" src="http://www.bbc.co.uk" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%;display="none"></iframe>
    <iframe id="iframe3" src="http://www.wikipedia.org" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%;display="none""></iframe>
    </div>
    </body>
    </html>

  • #4
    New Coder
    Join Date
    Feb 2007
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi kuerven again,

    Finally i succedded with your help and some stuff from internet, to find a solution, with some problems though...

    The code below, has some errors...
    Is it possible to check out the code for errors and see what's happening with the css? (it doesn't work).

    Thank you very much and i hope that this code interests also you!

    P.S. The css code is taken from http://www.brainjar.com/css/tabs/demo.html

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <style type="text/css">

    div.tabBox {}

    div.tabArea {
    font-size: 80%;
    font-weight: bold;
    padding: 0px 0px 3px 0px;
    }

    a.tab {
    background-color: #d0b0ff;
    border: 2px solid #000000;
    border-bottom-width: 0px;
    border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff;
    -moz-border-radius: .75em .75em 0em 0em;
    border-radius-topleft: .75em;
    border-radius-topright: .75em;
    padding: 2px 1em 2px 1em;
    position: relative;
    text-decoration: none;
    top: 3px;
    z-index: 100;
    }

    a.tab, a.tab:visited {
    color: #8060b0;
    }

    a.tab:hover {
    background-color: #a080d0;
    border-color: #c0a0f0 #8060b0 #8060b0 #c0a0f0;
    color: #ffe0ff;
    }

    a.tab.activeTab, a.tab.activeTab:hover, a.tab.activeTab:visited {
    background-color: #9070c0;
    border-color: #b090e0 #7050a0 #7050a0 #b090e0;
    color: #ffe0ff;
    }

    a.tab.activeTab {
    padding-bottom: 4px;
    top: 1px;
    z-index: 102;
    }

    div.tabMain {
    background-color: #9070c0;
    border: 2px solid #000000;
    border-color: #b090e0 #7050a0 #7050a0 #b090e0;
    -moz-border-radius: 0em .5em .5em 0em;
    border-radius-topright: .5em;
    border-radius-bottomright: .5em;
    padding: .5em;
    position: relative;
    z-index: 101;
    }

    div.tabIframeWrapper {
    width: 100%;
    }

    iframe.tabContent {
    background-color: #9070c0;
    border: 1px solid #000000;
    border-color: #7050a0 #b090e0 #b090e0 #7050a0;
    width: 100%;
    height: 36ex;
    }

    /******************************************************************************
    * Additional styles. *
    ******************************************************************************/

    h4#title {
    background-color: #503080;
    border: 1px solid #000000;
    border-color: #7050a0 #b090e0 #b090e0 #7050a0;
    color: #d0b0ff;
    font-weight: bold;
    margin-top: 0em;
    margin-bottom: .5em;
    padding: 2px .5em 2px .5em;
    }


    </style>


    <SCRIPT language=javascript type="text/javascript">
    var iFrameArray = ["iframe1","iframe2","iframe3"];
    function showhideiframe(strIframeID){
    hideAllIFrames();
    document.getElementById(strIframeID).style.display = "block";
    }

    function hideAllIFrames(){
    for(var i=0; i<iFrameArray.length; i++){
    document.getElementById(iFrameArray[i]).style.display = "none";
    }
    }
    </SCRIPT>
    </head>

    <body>
    <div class="tabBox" style="clear:both;">
    <div class="tabArea">
    <A class="tab" HREF="" onClick="showhideiframe('iframe1'); return false;">bbc</a>
    <A class="tab" HREF="" onClick="showhideiframe('iframe2'); return false;">cnn</a>
    <A class="tab" HREF="" onClick="showhideiframe('iframe3'); return false;">yahoo</a>
    </div>
    </div>

    <div class="tabMain"> <h4 id="title">title</h4>
    <div class="tabIframeWrapper">

    <iframe class="tabContent" name="iframe1" id="iframe1" src="http://www.bbc.com" frameborder="0" width="100%" height="100%" style="display:block" ></iframe>
    <iframe class="tabContent" name="iframe2" id="iframe2" src="http://www.cnn.com" frameborder="0" width="100%" height="100%" style="display:none" ></iframe>
    <iframe class="tabContent" name="iframe3" id="iframe3" src="http://news.yahoo.com/" frameborder="0" width="100%" height="100%" style="display:none"></iframe>
    </div>
    </div>

    </body>
    </html>


  •  

    Posting Permissions

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