473,392 Members | 1,366 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,392 software developers and data experts.

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 5543
acoder
16,027 Expert Mod 8TB
The iframe's height and width are 100%. That may be causing the problem.
Jan 30 '08 #2

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

Similar topics

10
by: maxim vexler | last post by:
I'm reading a lot of talks lately about the term iFrame and with your permission would like to ask a few question about that : - what is iFrame, i mean what is it good for ? - does all the...
0
by: Dan Popa | last post by:
Check out the following 2 links: http://www.batisdev.com/admin/test_1images.asp http://www.batisdev.com/admin/test_2images.asp First page contain 4 IFRAMES and 1 IMG tags. Second page contain 4...
6
by: David List | last post by:
I'm having a problem using different properties of the document object in the example javascripts in my textbook with browsers that identify themselves as using the Mozilla engine. One example of...
3
by: Nick Tew | last post by:
Hi, Firstly, any help would be gratefully received. Im using several iframes on a single page and would like individual 'back' and 'forward' buttons located in each of the iframes which only...
5
by: Turner | last post by:
Hi there! I havent done anything in html for a while, about a few months ago, I had started working with layers, mainly just to have a background image that would not repeat over and over. I...
5
by: Frances | last post by:
I need to replace iframes acc. to what option user chooses in a sel obj.. but figured have to load a blank iframe when pg loads so I can replace it.. (iframe gets put in a pre-existing div..) this...
2
by: Guadala Harry | last post by:
1. Are IFrames supported only in uplevel versions of IE? If not IE exclusively, what browsers support IFrames? 2. Are IFrames going to be supported in the future - as far as anyone knows - or...
3
by: Giggle Girl | last post by:
Is there a way to use Javascript to detect if a browser supports IFrames, or (if it DOES support them) that IFrame use is enabled? Thanks, Ann
5
by: Burt | last post by:
There's an architect at my 200 person company that advocates having many layers in all my C# apps. He wants web services, use case handlers, facade layers, data gateways, etc. When I ask why all...
2
by: ericisjusteric | last post by:
I have a page with multiple iframes and need to have the user (ie6) be able to click a button to refresh any one of the iframes - but also to click another button at the top of the page to refresh...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.