JavaScript - Table+iFrame on Yoga?!

Original Message

Name: JungGwokYan
Date: April 28, 2007 at 13:06:47 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!
OS: XP
CPU/Ram: 1.53MHz/1GB
Model/Manufacturer: MSI

Comment:

Hi, everybody!
I want to know if there's any simple
code in JS for making a Table and
a iFrame to stretch/resize itself to
the current scrollbar-width/height
or something like that.
I need this so that my Table/iFrame can
cover the whole page even if the user
uses a higher screen resolution than
the standard.
This Table/iFrame will show up like a
covering layer when pressed on a link.
If it's still unclear then please let me know.
Jung Gwok Yan

Report Offensive Message For Removal

Response Number 1

Name: Michael J (by mjdamato)
Date: April 28, 2007 at 16:11:56 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

Use javascript to set the style of height and width to 100%.
theObj = document.getElementById('objectID');
theObj.style.height = '100%';
theObj.style.width = '100%';
Michael J

Report Offensive Follow Up For Removal

Response Number 2

Name: JungGwokYan
Date: April 29, 2007 at 15:12:23 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

Thanks. But it still doesn't work.
The bottom is still visible. :(

Report Offensive Follow Up For Removal

Response Number 3

Name: Michael J (by mjdamato)
Date: April 29, 2007 at 22:17:34 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

You will need to post a link to your page or post some sample code in order for anyone to troubleshoot.
Michael J

Report Offensive Follow Up For Removal

Response Number 4

Name: JungGwokYan
Date: April 30, 2007 at 05:13:58 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

The limit with the screen resolution is 1280x1024.
OK, here's some sample code to troubleshoot:
<html>
<head>
<title>Table/iFrame (Overlay)</title>

<style type="text/css">

#Layer1 {
position:absolute;
left:38px;
top:44px;
z-index:1;
}

</style>
<script type="text/javascript">

Enter code here if needed.

</script>
</head>
<body bgcolor="#FFFFFF">
<div id="Layer1">
<table bgcolor="#CCCCCC" width="1024" height="768" id="Table1" name="Table1">
<tr>
<td>
<p align="center">Covering Layer</p>
</td>
</tr>
</table>
</div>
</body>
</html>
Try to switch from 1152x864 to 1280x1024.

Report Offensive Follow Up For Removal

Response Number 5

Name: Michael J (by mjdamato)
Date: April 30, 2007 at 14:42:37 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

You gave the table hard coded values so of course it won't change size. You need to give it relative values - in this case 100%.
<html>
<head>
<title>Table/iFrame (Overlay)</title>
<style type="text/css">
#Table1 {
z-index:1;
width: 100%;
height: 100%;
background-color: #cccccc;
}
</style>
<script type="text/javascript">
Enter code here if needed.
</script>
</head>
<body bgcolor="#FFFFFF">
<table id="Table1" name="Table1">
<tr>
<td>
<p align="center">Covering Layer</p>
</td>
</tr>
</table>
</body>
</html>

Michael J

Report Offensive Follow Up For Removal


Need Simple Hit Counter on click down help JavaScript change style on events Java Script not working on web site Errors when viewing tables with fir	Javascript cross-frame image swap PHP/mySQL .. XML ... Javascript. - Netscape javascript problems HTML Tables Making link change table properties

Response Number 6

Name: JungGwokYan
Date: April 30, 2007 at 15:35:11 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

Thanks.
Try this, it still doesn't cover everything
below the scroll-down area, only the exposed
area at startup gets covered :( :
<html>
<head>
<title>Table/iFrame (Overlay)</title>
<style type="text/css">
#Layer1 {
position:absolute;
z-index:1;
width: 100%;
height: 100%;
}
#Table1 {
z-index:2;
width: 100%;
height: 100%;
background-color: #cccccc;
}
</style>
<script type="text/javascript">
Enter code here if needed.
</script>
</head>
<body bgcolor="#FFFFFF">
<div id="Layer1">
<table id="Table1" name="Table1">
<tr>
<td>
<p align="center">Covering Layer</p>
</td>
</tr>
</table>
</div>
[there're BR-tags all the way down]

Content still showing.

[the end-line of the BR-tags]
</body>
</html>

Report Offensive Follow Up For Removal

Response Number 7

Name: Michael J (by mjdamato)
Date: May 1, 2007 at 08:59:42 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

I think you are looking for this funtionality: http://www.ibegin.com/blog/p_ibox.html
Click on the demo link. The code is free for use. However, that script has the same problem you are experiencing with the shadowbox not adjusting for the page scrolling.
this may be close to what you are trying to accomplish:
<html>
<head>
<title>Table/iFrame (Overlay)</title>
<style type="text/css">
body {
margin: 0px;
}
#content {
position:relative;
top: 0px;
left: 0px;
z-index:1;
width: 100%;
height: 100%;
}
#overlay {
position:absolute;
top: 0px;
left: 0px;
background-color: #cccccc;
width: 100%;
height: 900%;
}
#Table1 {
z-index:2;
width: 100%;
height: 300px;
background-color: #cccccc;
}
</style>
<script type="text/javascript">
Enter code here if needed.
</script>
</head>
<body bgcolor="#FFFFFF" style="z-index:1;">
<div id="overlay">
<table id="Table1" name="Table1" border="2">
<tr>
<td>
<p align="center">Covering Layer</p>
</td>
</tr>
</table>
</div>
<div id="content">
Put page content here
</div>
</body>
</html>

Michael J

Report Offensive Follow Up For Removal

Response Number 8

Name: JungGwokYan
Date: May 1, 2007 at 11:32:54 Pacific
Subject: JavaScript - Table+iFrame on Yoga?!

Reply: (edit)

Yes! exactly!
Thanks a lot for your help and your patience,
It's really appreciated. :-D
Jung Gwok Yan

Report Offensive Follow Up For Removal