Results 1 to 6 of 6

Thread: problem invoking javascript function in iframes

  1. #1
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default problem invoking javascript function in iframes

    Hello,

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

    Code:
    <!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?

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    Inside content.htm:
    <body onclick="parent.hideMenus()">
    ===
    Arie Molendijk.

  3. #3
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    This does not work for me.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    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.

  5. #5
    Join Date
    Jun 2008
    Posts
    107
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,319
    Thanks
    30
    Thanked 136 Times in 131 Posts
    Blog Entries
    29

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •