Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

switch between iframes

Status
Not open for further replies.
DimisD

DimisD

Technical User
Feb 7, 2007
15
GR
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=" frameborder="0" border="0" style="display:block"></iframe>
<iframe name="iframe2" id="iframe2" src=" frameborder="0" border="0" style="display:none"></iframe>
<iframe name="iframe3" id="iframe3" src=" frameborder="0" border="0" style="display:none"></iframe>
</body>
</html>
 
Sort by date Sort by votes
This code will at least toggle the iframes display values correctly, not sure if they will hide/unhide in the same position, but I don't see why they wouldn't.

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

<SCRIPT language=javascript type="text/javascript">
[!]var oldShownFrame = iframe1;[/!] 
function showhideiframe(iframeObj)
   {
         [!]
         if (oldShownFrame != iframeObj.id) {
            document.getElementById("oldShownFrame").style.display = "none";                      
            iframeObj.style.display = "block";
         }
         [/!] 
   }
</SCRIPT>
</head>

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

<.
 
Upvote 0 Downvote
Thank you very much monksnake!!!

i can't run the script though....:(
is there somewhere an error???

 
Upvote 0 Downvote
Try This:

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

<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.getElement(iFrameArray[i]).style.display = "none";
   }
}
</SCRIPT>
</head>

<body>
<A HREF="#" onClick="showhideiframe('iframe1'); return false;">iframe1</a> -
<A HREF="#" onClick="showhideiframe('iframe2'); return false;">iframe2 </a>-
<A HREF="#" onClick="showhideiframe('iframe3'); return false;">iframe3</a>
<iframe name="iframe1" id="iframe1" src="[URL unfurl="true"]http://www.site1.com"[/URL]  frameborder="0" border="0" style="display:block"></iframe>
<iframe name="iframe2" id="iframe2" src="[URL unfurl="true"]http://www.site2.com"[/URL]  frameborder="0" border="0" style="display:none"></iframe>
<iframe name="iframe3" id="iframe3" src="[URL unfurl="true"]http://www.site3.com"[/URL]  frameborder="0" border="0" style="display:none"></iframe>
</body>
</html>

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Enable Apps
 
Upvote 0 Downvote
Thank you also dwarfthrower, but neither this works.

Another friend suggested the code bellow, which doesn't work in firefox...(it works in ie but with errors)

Can you help the situation?



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

<SCRIPT type="text/javascript">
function showhideiframe(iframe)
{
hideEmAll();
document.getElementById(iframe).style.display = "block";

}
function hideEmAll() {
document.getElementById('iframe1').style.display = "none";
document.getElementById('iframe2').style.display = "none";
document.getElementById('iframe3').style.display = "none";

}
</SCRIPT>

</head>
<body>
<a href="#" id="label1" onClick="showhideiframe('iframe1',this)">cnn</a> -
<a href="#" id="label2" onClick="showhideiframe('iframe2',this)">bbc</a>-
<a href="#" id="label3" onClick="showhideiframe('iframe3',this)">wikipedia</a>
<p>&nbsp;</p>

<div style="position:relative">
<iframe id="iframe1" src=" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%; display="block"></iframe>
<iframe id="iframe2" src=" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%;display="none"></iframe>
<iframe id="iframe3" src=" frameborder="0" style="position:absolute;top:0;left:0;width:100%;height:200%;display="none""></iframe>
</div>
</body>
</html>
 
Upvote 0 Downvote
My code should work except for I did see a syntax error in it.
This:
Code: 
var oldShownFrame = iframe1;

should be this:

Code: 
var oldShownFrame = [!]"[/!]iframe1[!]"[/!];



<.

 
Upvote 0 Downvote
Hi again guys!,

I hope you are fine...:)!

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

In the code below, i was wondering if you can check out the code for errors and also i you can make the css working (it doesn't work).
Also, when loading, is there a "loading script.." untill all iframes are loaded?

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

P.S. The css code is taken from

<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).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=" frameborder="0" width="100%" height="100%" style="display:block" ></iframe>
<iframe class="tabContent" name="iframe2" id="iframe2" src=" frameborder="0" width="100%" height="100%" style="display:none" ></iframe>
<iframe class="tabContent" name="iframe3" id="iframe3" src=" frameborder="0" width="100%" height="100%" style="display:none"></iframe>
</div>
</div>

</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Dara2020
  • Locked
  • Question
Jquery Conflict between Mega-Menu and MailChimp form
Replies
0
Views
136
Dara2020
Dara2020
cutum
  • Locked
  • Question
Need to hide Web Part between certain dates-SharePoint 2010
Replies
12
Views
255
vacunita
vacunita
ro6er
  • Locked
  • Question
jquery Recursively filter with tab-switch
Replies
0
Views
71
ro6er
ro6er
ThomasJSmart
  • Locked
  • Question
share cookies between website and local file
Replies
0
Views
68
ThomasJSmart
ThomasJSmart
Owner68
  • Locked
  • Question
Switch Statement Read Only
Replies
1
Views
57
feherke
feherke

Part and Inventory Search

Sponsor

Back
Top