Menu
Hi All,
I have a problem I haven’t been able to resolve for days. Could you please help me? I’m opening divs above each other. Each div has an iframe inside. What I’m trying to do is to call a javascript function from the topmost div in the div below.
Let me share my test code?
[B]popupDivIndex.html:
[CODE]
<html>
<head>
<style>
DIV.popup1 {
background-color: #90ff90;
z-index: 1;
left: 0px;
top: 0px;
overflow: auto;
position: absolute;
width: 200px;
height: 100px;
visibility: hidden;
}
DIV.popup2 {
background-color: #90ff90;
z-index: 1;
left: 0px;
top: 0px;
overflow: auto;
position: absolute;
width: 150px;
height: 70px;
visibility: hidden;
}
DIV.glasspane {
z-index: 1;
left: 0px;
top: 0px;
overflow: hidden;
position: absolute;
width: 200px;
height: 100px;
visibility: hidden;
}
</style>
<script language=”javascript”>
var agt=navigator.userAgent.toLowerCase();
var is_ie = ((agt.indexOf(“msie”) != -1) && (agt.indexOf(“opera”) == -1));
var openDivs = [];
function openDiv(div) {
// Calculate window width and height
if (is_ie) {
var windowWidth = document.body.offsetWidth – 20;
var windowHeight = document.body.offsetHeight – 4;
} else {
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
}
// Open the div
document.getElementById(div).style.left = Math.round((windowWidth – document.getElementById(div).offsetWidth) / 2);
document.getElementById(div).style.top = Math.round((windowHeight – document.getElementById(div).offsetHeight) / 2);
document.getElementById(div).style.zIndex = 100 + 1;
document.getElementById(div).style.visibility = ‘visible’;
openDivs[openDivs.length] = div;
}
</script>
<script language=”javascript”>
function test() {
window.alert(‘popupDivIndex’);
}
</script>
</head>
<body bgcolor=”#ff9090″>
<a href=”javascript:openDiv(‘popup1’)”>show popup1</a><br>
main window
<div id=”popup1″ class=”popup1″>
<iframe id=”popup1_iframe” frameborder=”0″ marginheight=”0″ marginwidth=”0″ width=”100%” height=”100%” scrolling=”auto” src=”popupDivInner1.html”></iframe>
</div>
<div id=”popup2″ class=”popup2″>
<iframe id=”popup2_iframe” frameborder=”0″ marginheight=”0″ marginwidth=”0″ width=”100%” height=”100%” scrolling=”auto” src=”popupDivInner2.html”></iframe>
</div>
</body>
</html>
[B]popupDivInner1.html:
[CODE]
<html>
<head>
<script language=”javascript”>
function test() {
window.alert(‘popupDivInner1’);
}
</script>
</head>
<body bgcolor=”#ff4040″>
<table>
<tr>
<td>
<a href=”javascript:parent.openDiv(‘popup2’)”>show popup2</a><br>
popup 1
</td>
</tr>
</table>
</body>
</html>
[B]popupDivInner2.html:
[CODE]
<html>
<head>
<script language=”javascript”>
function test() {
window.alert(‘popupDivInner2’);
}
</script>
</head>
<body bgcolor=”#40ff40″>
<table>
<tr>
<td>
<a href=”javascript:test()”>test</a><br>
popup 2
</td>
</tr>
</table>
</body>
</html>
The ultimate goal would be to add a line in the test() function of popupDivInner2.html which calls the test() method in popupDivInner1.html
So after clicking the ‘test’ link in the second popup the alert window should say: ‘popupDivInner1’.
Thanks,
tade