473,466 Members | 1,511 Online
Bytes | Software Development & Data Engineering Community
Create Post

Home Posts Topics Members FAQ

Div Layers with IFrames-Hiding and Showing

4 New Member
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 5546
acoder
16,027 Recognized Expert Moderator MVP
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
what is iFrames ?
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...
PHP
0
IFRAMES and SessionIDs problems
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...
ASP / Active Server Pages
6
document.layers & Mozilla
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...
Javascript
3
back button in iframes
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...
Javascript
5
layers compatibility
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...
HTML / CSS
5
dynamic iframes...
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...
Javascript
2
IFrames - the Facts Please
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...
ASP.NET
3
Detexting if IFRAMEs enabled
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
Javascript
5
Help! How many layers in my app?
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...
C# / C Sharp
2
reload iframe for individual and all iframes on page
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...
Javascript
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
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...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Oralloy
Problem With Comparison Operator <=> in G++
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,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
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...
Online Marketing
1
The easy way to turn off automatic updates for Windows 10/11
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...
Windows Server
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
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...
General
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA
0
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
C# / C Sharp

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us