Log in

View Full Version : problem invoking javascript function in iframes


gib65
03-08-2012, 03:37 PM
Hello,

Please have a look at my code (the key parts are in bold):



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<html>

<head>
<title>H&R Properties</title>

<style type="text/css">
table.master
{
height: 100%;
}

td.banner
{
height: 100px;
text-align: center;
}

span.banner
{
font-size: 24pt;
}

td.news
{
width: 200px;
padding-top: 10px;
text-align: center;
}

iframe.news
{
width: 100%;
height: 100%;
}

td.menuandcontent
{
width: 531px;
}

table.menuandcontent
{
width: 100%;
height: 100%;
}

td.menu
{
height: 50px;
background: url('menu_bg.jpg');
text-align: center;
}

td.content
{
text-align: left;
}

iframe.content
{
width: 100%;
height: 100%;
}

div.service_menu
{
display: none;
position: absolute;
top: 260px;
left: 340px;
}

div.information_menu
{
display: none;
position: absolute;
top: 260px;
left: 405px;
}

div.health_safety_menu
{
display: none;
position: absolute;
top: 260px;
left: 555px;
}

div.menu_item
{
color: #FFFFFF;
font-family: verdana;
font-size: 10.5pt;
background-color: #000077;
text-align: center;
border: 1px #AAAAFF solid;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}

</style>


<script text="text/javascript" language="javascript">

function bowhome_click()
{
document.getElementById("content_frame").src = "content.html";
}

function index_click()
{
document.getElementById("content_frame").src = "index.html";
}

function displayMenu(menu)
{
document.getElementById(menu + "_menu").style.display = "block";
}

function hideMenus()
{
document.getElementById("services_menu").style.display = "none";
document.getElementById("information_menu").style.display = "none";
document.getElementById("health_safety_menu").style.display = "none";
}

</script>


</head>

<body onmouseup="hideMenus()">

<table class="master" cellspacing=0 cellpadding=0 border=0>

<tr><td colspan=2 class="banner">
<span class="banner">
<img src="H&Rbanner.jpg" border=0></span></td></tr>

<tr>

<td class="news">
<iframe class="news" src="news.html" scrollable=yes frameborder=no></iframe>
</td>

<td class="menuandcontent">
<table class="menuandcontent" cellspacing=0 cellpadding=0 border=0>

<tr>
<td class="menu">


<table cellspacing=0 cellpadding=0 border=0>
<tr>
<td><a href="http://www.hrproperties.ca"><img src="hrhome.jpg" border=0></a></td>
<td><a href="#" onclick="bowhome_click();"><img src="thebowhome.jpg" border=0></a></td>
<td><a href="#" onclick="displayMenu('services'); return false;"><img src="services.jpg" border=0></a></td>
<td><a href="#" onclick="displayMenu('information'); return false;"><img src="information.jpg" border=0></a></td>
<td><a href="#" onclick="displayMenu('health_safety'); return false;"><img src="health&safety.jpg" border=0></a></td>
<td><a href="#" onclick="index_click(); return false;"><img src="index.jpg" border=0></a></td>
</tr>
</table>


</td></tr>

<tr>
<td class="content">
<iframe id="content_frame" class="content" src="content.html" srollable=yes frameborder=0></iframe>
</td>
</tr>

</table>
</td>

</tr>
</table>


<div id="services_menu" class="service_menu">
<div class="menu_item">access control</div>
<div class="menu_item">lost and found</div>
<div class="menu_item">heating and ventilation</div>
<div class="menu_item">waste management</div>
<div class="menu_item">cleaning</div>
</div>

<div id="information_menu" class="information_menu">
<div class="menu_item">facts about The Bow</div>
<div class="menu_item">parking</div>
<div class="menu_item">building rules and regulations</div>
<div class="menu_item">renovations and repairs</div>
</div>

<div id="health_safety_menu" class="health_safety_menu">
<div class="menu_item">emergencies</div>
<div class="menu_item">smoking</div>
<div class="menu_item">elevators</div>
</div>


</body>
</html>


The website for this can be found at http://www.shahspace.com/bow/home.html. If you go to the website, you should be able to click on the menu items "services", "information", and "health & safety" and a drop down menu should show up.

My problem is that I need a way to get the menus to disappear when the user clicks anywhere on the page except the menu itself, but the fact that I'm using iframes makes this difficult.

The code above shows that I have this:

<body onmouseup="hideMenus()">

and in the javascript section, I have this:

function hideMenus()
{
document.getElementById("services_menu").style.display = "none";
document.getElementById("information_menu").style.display = "none";
document.getElementById("health_safety_menu").style.display = "none";
}

This would work if I wasn't using iframe, but the problem is that if I click in an iframe, I'm clicking on the body of a different page, and so the hideMenu() function is not being invoked. I tried putting the onmouseup="hideMenus()" in the iframe itself but that didn't work.

Does anyone know a way to get around this?
molendijk
03-08-2012, 06:33 PM
Inside content.htm:
<body onclick="parent.hideMenus()">
===
Arie Molendijk.
gib65
03-09-2012, 04:26 PM
This does not work for me.
molendijk
03-09-2012, 05:56 PM
Strange. It should work. Perhaps you tested it on your hard disk with the Google Chrome browser? That would explain tcertain things.
Anyhow, in the link you provided above, the onclick is not in content.html. Could you put it there, allowing me to examin the problem in more detail?
===
Arie.
gib65
03-12-2012, 02:26 PM
I am testing it on my hard drive but not in Chrome.

I've updated the website at the link http://www.shahspace.com/bow/home.html so that the content.html page has onmouseup="parent.hideMenus()" in the body tag. It seems to work so long as it's up on the server, but not on my local machine.

Is this typical?
molendijk
03-12-2012, 05:45 PM
Maybe you're testing it on your hard drive using Internet Explorer?
Anyhow, lots of things that don't work on a local machine do work up on the server. That is particularly true if we use IE or Chrome.
The only thing that matters is that our code should work on the server. It does, in your case. So I think the problem is resolved.
===
Arie.