By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,186 Members | 1,620 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,186 IT Pros & Developers. It's quick & easy.

Div Layers with IFrames-Hiding and Showing

P: 4
I am developing an internalk inteface that integrates alot of seperate tools into one interface. The current version uses one Iframe inside a div layer for positioning. Currently the seperate web tools do not have the ability to stay active. As you switch from tool to tool the previous information is lost unless you use a Back button. I need to place multiple div layers with I frames in them that can be shown or hidden based on selection. The idea is that each tool while still active will not be visible. Currenlty I have puzzled out creating and showing the seperate div layers but the I frames are where I have an Issue. As I post an Iframe in a div layer it refuses to become visible any longer. Here is a posting of the basic code with two layers that have i frames. one contains the front page of my site the other contains the front page of yahoo. I will post both code sets with and with out layers for viewability

NO IFRAMES
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<script language="JavaScript">
<!-- [/html]
Expand|Select|Wrap|Line Numbers
  1. var doAlerts=false; 
  2.  
  3. function checkSubmit()
  4. {
  5.     var ban = document.realtime.ban.value;
  6.     while(ban.indexOf(" ") == 0) {
  7.       ban = ban.substring(1, ban.length)
  8.     }
  9.     while (ban.substring(ban.length-1) == " ") {
  10.       ban = ban.substring(0, ban.length-1)
  11.     }
  12.     var le = ban.length;
  13.     if(le == 0) {
  14.       alert("Please type in an customer ID!");
  15.       document.realtime.ban.focus();
  16.       return;
  17.     }
  18.     document.realtime.ban.value = ban;
  19.     document.realtime.submit();
  20. }
  21.  
  22. function submitAction(method)
  23. {
  24.    if(method == 'tn'){
  25.       if (document.showRF.tn.value == null || document.showRF.tn.value == '' ){
  26.          alert("Customer ID is required");
  27.      return false;     
  28.        } 
  29.    document.showRF.sn.disabled = true; 
  30.    }else {
  31.       if (document.showRF.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
  32.          alert("SerialNumber is required");
  33.          return false;     
  34.       } 
  35.       document.showRF.tn.disabled = true; 
  36.    }
  37.  
  38.    document.showRF.elementId.value = '';
  39.    document.showRF.method.value = method;
  40.    document.showRF.action = 'http://lsbbt.sbc.com/lsbbt/showRFAction.do'; 
  41.    document.showRF.target = 'lasso';
  42.  
  43.    document.showRF.submit();
  44.    return false; 
  45.  
  46.  
  47. }
  48.  
  49. function goThere(n,loc)
  50. {
  51.   n.location.href=loc;
  52. }
[html]//-->
</script>

<title>Last Tool</title>
</head>

<style>[/html]
Expand|Select|Wrap|Line Numbers
  1.  
  2. #sec1 {
  3.         position: absolute; 
  4.         top:150px;
  5.         left:1px;
  6.         width:980px;
  7.         height:550px;
  8.         visibility:hidden; 
  9.         z-index: 100; 
  10. }
  11.  
  12. #sec2 {
  13.         position: absolute; 
  14.         top:150px;
  15.         left:1px;
  16.         width:980px;
  17.         height:550px;
  18.         visibility:hidden; 
  19.         z-index: 200; 
  20. }
  21.  
  22.  
[html]
</style>

<script>[/html]
Expand|Select|Wrap|Line Numbers
  1. //the next 3 lines are browser detection for user-agent DOMS
  2. ns4 = (document.layers) ? true:false //required for Functions to work
  3. ie4 = (document.all) ? true:false //required for Functions to work
  4. ng5 = (document.getElementById) ? true:false //required for Functions to work
  5.  
  6. function hideSec() {
  7. if (ng5) document.getElementById('sec1').style.visibility = "hidden"
  8. else if (ns4) document.sec1.visibility = "hide"
  9. else if (ie4) sec1.style.visibility ="hidden"
  10.  
  11. if (ng5) document.getElementById('sec2').style.visibility = "hidden"
  12. else if (ns4) document.sec2.visibility = "hide"
  13. else if (ie4) sec2.style.visibility ="hidden"
  14. }
  15.  
  16. function showSec(n) {
  17. hideSec();
  18. if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
  19. else if (ns4) document.layers["sec" + n].visibility = "show";
  20. else if (ie4) document.all["sec" + n].style.visibility = "visible";
  21. }
  22.  
  23. function showAllSec(n) {
  24. if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
  25. else if (ns4) document.layers["sec" + n].visibility = "show";
  26. else if (ie4) document.all["sec" + n].style.visibility = "visible";
  27. }
  28.  
[html]
</script>

</head>

<body bgcolor="#ffffff">
<a href="#" onClick="showSec(1)">Show Layer 1</a>, Hide 2, 3, and 4 <br>
<a href="#" onClick="showSec(2)">Show Layer 2</a>, Hide 1, 3, and 4 <br>

<div id="sec1">First Div layer</div>
<div id="sec2">Second Div layer</div>


</body>
</html>
[/HTML]

then there are iframes...these are targeted currently at generic sites

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

<script language="JavaScript">
<!--
var doAlerts=false;

function checkSubmit()
{
var ban = document.realtime.ban.value;
while(ban.indexOf(" ") == 0) {
ban = ban.substring(1, ban.length)
}
while (ban.substring(ban.length-1) == " ") {
ban = ban.substring(0, ban.length-1)
}
var le = ban.length;
if(le == 0) {
alert("Please type in an customer ID!");
document.realtime.ban.focus();
return;
}
document.realtime.ban.value = ban;
document.realtime.submit();
}

function submitAction(method)
{
if(method == 'tn'){
if (document.showRF.tn.value == null || document.showRF.tn.value == '' ){
alert("Customer ID is required");
return false;
}
document.showRF.sn.disabled = true;
}else {
if (document.showRF.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
alert("SerialNumber is required");
return false;
}
document.showRF.tn.disabled = true;
}

document.showRF.elementId.value = '';
document.showRF.method.value = method;
document.showRF.action = 'http://lsbbt.sbc.com/lsbbt/showRFAction.do';
document.showRF.target = 'lasso';

document.showRF.submit();
return false;


}

function goThere(n,loc)
{
n.location.href=loc;
}
//-->
</script>

<title>Last Tool</title>
</head>

<style>
#sec1 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidden;
z-index: 100;
}
#sec2 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidden;
z-index: 200;
}

</style>

<script>
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layers) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getElementById) ? true:false //required for Functions to work

function hideSec() {
if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"

if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"
}

function showSec(n) {
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

function showAllSec(n) {
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}

</script>

</head>

<body bgcolor="#ffffff">
<a href="#" onClick="showSec(1)">Show Div Sec1</a>, Hide 2<br>
<a href="#" onClick="showSec(2)">Show Div Sec2</a>, Hide 1 4 <br>

<div id="sec1"><iframe src="http://www.yahoo.com" name="yahoo" width="100%" height=100%></div>
<div id="sec2"><iframe src="http://www.robertkay.net" name=""mine" width="100%" height=100%></div>


</body>
</html>
[/HTML]
Apr 25 '07 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
The iframe's height and width are 100%. That may be causing the problem.
Jan 30 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.