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=is o-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script language="JavaS cript">
<!-- [/html][code=javascript]
var doAlerts=false;
function checkSubmit()
{
var ban = document.realti me.ban.value;
while(ban.index Of(" ") == 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.realti me.ban.focus();
return;
}
document.realti me.ban.value = ban;
document.realti me.submit();
}
function submitAction(me thod)
{
if(method == 'tn'){
if (document.showR F.tn.value == null || document.showRF .tn.value == '' ){
alert("Customer ID is required");
return false;
}
document.showRF .sn.disabled = true;
}else {
if (document.showR F.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
alert("SerialNu mber is required");
return false;
}
document.showRF .tn.disabled = true;
}
document.showRF .elementId.valu e = '';
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;
}[/code]
[html]//-->
</script>
<title>Last Tool</title>
</head>
<style>[/html][code=css]
#sec1 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 100;
}
#sec2 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 200;
}
[/code][html]
</style>
<script>[/html][code=javascript]
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layer s) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getEl ementById) ? true:false //required for Functions to work
function hideSec() {
if (ng5) document.getEle mentById('sec1' ).style.visibil ity = "hidden"
else if (ns4) document.sec1.v isibility = "hide"
else if (ie4) sec1.style.visi bility ="hidden"
if (ng5) document.getEle mentById('sec2' ).style.visibil ity = "hidden"
else if (ns4) document.sec2.v isibility = "hide"
else if (ie4) sec2.style.visi bility ="hidden"
}
function showSec(n) {
hideSec();
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
function showAllSec(n) {
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
[/code][html]
</script>
</head>
<body bgcolor="#fffff f">
<a href="#" onClick="showSe c(1)">Show Layer 1</a>, Hide 2, 3, and 4 <br>
<a href="#" onClick="showSe c(2)">Show Layer 2</a>, Hide 1, 3, and 4 <br>
<div id="sec1">Firs t Div layer</div>
<div id="sec2">Secon d 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=is o-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script language="JavaS cript">
<!--
var doAlerts=false;
function checkSubmit()
{
var ban = document.realti me.ban.value;
while(ban.index Of(" ") == 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.realti me.ban.focus();
return;
}
document.realti me.ban.value = ban;
document.realti me.submit();
}
function submitAction(me thod)
{
if(method == 'tn'){
if (document.showR F.tn.value == null || document.showRF .tn.value == '' ){
alert("Customer ID is required");
return false;
}
document.showRF .sn.disabled = true;
}else {
if (document.showR F.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
alert("SerialNu mber is required");
return false;
}
document.showRF .tn.disabled = true;
}
document.showRF .elementId.valu e = '';
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:hidd en;
z-index: 100;
}
#sec2 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 200;
}
</style>
<script>
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layer s) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getEl ementById) ? true:false //required for Functions to work
function hideSec() {
if (ng5) document.getEle mentById('sec1' ).style.visibil ity = "hidden"
else if (ns4) document.sec1.v isibility = "hide"
else if (ie4) sec1.style.visi bility ="hidden"
if (ng5) document.getEle mentById('sec2' ).style.visibil ity = "hidden"
else if (ns4) document.sec2.v isibility = "hide"
else if (ie4) sec2.style.visi bility ="hidden"
}
function showSec(n) {
hideSec();
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
function showAllSec(n) {
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
</script>
</head>
<body bgcolor="#fffff f">
<a href="#" onClick="showSe c(1)">Show Div Sec1</a>, Hide 2<br>
<a href="#" onClick="showSe c(2)">Show Div Sec2</a>, Hide 1 4 <br>
<div id="sec1"><ifra me src="http://www.yahoo.com" name="yahoo" width="100%" height=100%></div>
<div id="sec2"><ifra me src="http://www.robertkay.n et" name=""mine" width="100%" height=100%></div>
</body>
</html>
[/HTML]
NO IFRAMES
[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=is o-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script language="JavaS cript">
<!-- [/html][code=javascript]
var doAlerts=false;
function checkSubmit()
{
var ban = document.realti me.ban.value;
while(ban.index Of(" ") == 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.realti me.ban.focus();
return;
}
document.realti me.ban.value = ban;
document.realti me.submit();
}
function submitAction(me thod)
{
if(method == 'tn'){
if (document.showR F.tn.value == null || document.showRF .tn.value == '' ){
alert("Customer ID is required");
return false;
}
document.showRF .sn.disabled = true;
}else {
if (document.showR F.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
alert("SerialNu mber is required");
return false;
}
document.showRF .tn.disabled = true;
}
document.showRF .elementId.valu e = '';
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;
}[/code]
[html]//-->
</script>
<title>Last Tool</title>
</head>
<style>[/html][code=css]
#sec1 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 100;
}
#sec2 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 200;
}
[/code][html]
</style>
<script>[/html][code=javascript]
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layer s) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getEl ementById) ? true:false //required for Functions to work
function hideSec() {
if (ng5) document.getEle mentById('sec1' ).style.visibil ity = "hidden"
else if (ns4) document.sec1.v isibility = "hide"
else if (ie4) sec1.style.visi bility ="hidden"
if (ng5) document.getEle mentById('sec2' ).style.visibil ity = "hidden"
else if (ns4) document.sec2.v isibility = "hide"
else if (ie4) sec2.style.visi bility ="hidden"
}
function showSec(n) {
hideSec();
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
function showAllSec(n) {
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
[/code][html]
</script>
</head>
<body bgcolor="#fffff f">
<a href="#" onClick="showSe c(1)">Show Layer 1</a>, Hide 2, 3, and 4 <br>
<a href="#" onClick="showSe c(2)">Show Layer 2</a>, Hide 1, 3, and 4 <br>
<div id="sec1">Firs t Div layer</div>
<div id="sec2">Secon d 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=is o-8859-1">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<script language="JavaS cript">
<!--
var doAlerts=false;
function checkSubmit()
{
var ban = document.realti me.ban.value;
while(ban.index Of(" ") == 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.realti me.ban.focus();
return;
}
document.realti me.ban.value = ban;
document.realti me.submit();
}
function submitAction(me thod)
{
if(method == 'tn'){
if (document.showR F.tn.value == null || document.showRF .tn.value == '' ){
alert("Customer ID is required");
return false;
}
document.showRF .sn.disabled = true;
}else {
if (document.showR F.sn.value == null || document.forms['showRFForm'].sn.value == '' ){
alert("SerialNu mber is required");
return false;
}
document.showRF .tn.disabled = true;
}
document.showRF .elementId.valu e = '';
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:hidd en;
z-index: 100;
}
#sec2 {
position: absolute;
top:150px;
left:1px;
width:980px;
height:550px;
visibility:hidd en;
z-index: 200;
}
</style>
<script>
//the next 3 lines are browser detection for user-agent DOMS
ns4 = (document.layer s) ? true:false //required for Functions to work
ie4 = (document.all) ? true:false //required for Functions to work
ng5 = (document.getEl ementById) ? true:false //required for Functions to work
function hideSec() {
if (ng5) document.getEle mentById('sec1' ).style.visibil ity = "hidden"
else if (ns4) document.sec1.v isibility = "hide"
else if (ie4) sec1.style.visi bility ="hidden"
if (ng5) document.getEle mentById('sec2' ).style.visibil ity = "hidden"
else if (ns4) document.sec2.v isibility = "hide"
else if (ie4) sec2.style.visi bility ="hidden"
}
function showSec(n) {
hideSec();
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
function showAllSec(n) {
if (ng5) document.getEle mentById('sec' + n).style.visibi lity = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibili ty = "visible";
}
</script>
</head>
<body bgcolor="#fffff f">
<a href="#" onClick="showSe c(1)">Show Div Sec1</a>, Hide 2<br>
<a href="#" onClick="showSe c(2)">Show Div Sec2</a>, Hide 1 4 <br>
<div id="sec1"><ifra me src="http://www.yahoo.com" name="yahoo" width="100%" height=100%></div>
<div id="sec2"><ifra me src="http://www.robertkay.n et" name=""mine" width="100%" height=100%></div>
</body>
</html>
[/HTML]
Comment