469,645 Members | 1,941 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,645 developers. It's quick & easy.

Div Layers with IFrames-Hiding and Showing

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
1 5256
acoder
16,027 Expert Mod 8TB
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.

Similar topics

10 posts views Thread by maxim vexler | last post: by
reply views Thread by Dan Popa | last post: by
6 posts views Thread by David List | last post: by
3 posts views Thread by Nick Tew | last post: by
5 posts views Thread by Turner | last post: by
5 posts views Thread by Frances | last post: by
2 posts views Thread by Guadala Harry | last post: by
3 posts views Thread by Giggle Girl | last post: by
5 posts views Thread by Burt | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.