By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,608 Members | 3,801 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,608 IT Pros & Developers. It's quick & easy.

Script in an IFRAME not calling particular function defined in the parent document?

P: 12
After following the instructions from the answer below:


http://bytes.com/topic/javascript/answers/153274-script-iframe-can-not-call-functions-defined-parent-document


I was able to have the child window perform the function in the parent window.

The function was to only have an alert window pop up as the child page was loading.

I easily modified this to my intention which was to have a parent function performed when the child window was clicked.

Using the body tag:

<body onclick="parent.FUNCTION NAME HERE()">

I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens.

The site this is being used on is:


http://tylerpanesar.ca/


What I want is when the menu bar is opened, the user chooses a link and the menu closes and goes to that link. This already happens. However if the user opens the menu bar and then changes there mind and continues with the page the are currently on, the menu stays open.

The child window has the same code to call the parent function to call the menu.hide function, but it does not work.

Any help would be greatly appreciated.
Thanks in advance,
Tyler
Apr 10 '10 #1
Share this Question
Share on Google+
22 Replies


gits
Expert Mod 5K+
P: 5,333
so ... just to clarify the task ... you want the menu to be closed when the mouse moves out of the menu ... or when the user clicks outside of it?

kind regards
Apr 12 '10 #2

P: 12
Currently it "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on your curent page. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option.

I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover of the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this.

The script that tells it to hide on click is within a jQuery function:

Expand|Select|Wrap|Line Numbers
  1. menua
  2.     .click(
  3.         function(){
  4.             menu.hide();
the code I used for the mouseout toggle was:


Expand|Select|Wrap|Line Numbers
  1. menu
  2.     .mouseout(
  3.         function(){
  4.             menu.toggle();
Any help is greatly appreciated.
Thanks,
Tyler
Apr 12 '10 #3

gits
Expert Mod 5K+
P: 5,333
didn't check your code ... but the basic idea would be to assign the mouseout event to the expanded menu ... not to the menu button ... if you want me to check the code you should post the relevant parts here ...

kind regards
Apr 15 '10 #4

P: 12
Here is the script that I am currently using for the menu to open and the "click" hide feature.

This menu feature comes from the following help:

http://www.bennadel.com/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm


Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.         jQuery(function( $ ){
  3.             var menuRoot = $( "#menu-root" );
  4.             var menu = $( "#menu" );
  5.             var menua = $( "#menu a" );
  6.             // Hook up menu root click event.
  7.             menuRoot
  8.                 .attr( "href", "javascript:void( 0 )" )
  9.                 .click(
  10.                     function(){
  11.                         // Toggle the menu display.
  12.                         menu.toggle();
  13.                         // Blur the link to remove focus.
  14.                         menuRoot.blur();
  15.                         // Cancel event (and its bubbling).
  16.                         return( false );
  17.                     }
  18.                 )
  19.             ;
  20.             menua
  21.                 .click(
  22.                     function(){
  23.                         // Toggle the menu display.
  24.                         menu.hide();
  25.                     }
  26.                 )
  27.             ;
  28.             // Hook up a click handler on the document so that
  29.             // we can hide the menu if it is not the target of
  30.             // the mouse click.
  31.             $( document ).click(
  32.                 function( event ){
  33.                     // Check to see if this came from the menu.
  34.                     if (
  35.                         menu.is( ":visible" ) &&
  36.                         !$( event.target ).closest( "#menu" ).size()
  37.                         ){
  38.                         // The click came outside the menu, so
  39.                         // close the menu.
  40.                         menu.hide();
  41.                      }
  42.                 }
  43.             );
  44.          });
  45.  </script>
Apr 16 '10 #5

gits
Expert Mod 5K+
P: 5,333
you are using frames ... as you might have noticed your posted code already deals with clicks outside of the menu ... but the handling is only applied to the bottom frame's document where the menu-script is loaded. you might try to click ouside of the menu there and the menu closes. now you would just need to adopt that handling to the upper frame's documents ...

kind regards
Apr 17 '10 #6

P: 12
It's actually an iFrame that is 100% wide and high with the menu in the parent. I figured if I were to use regular frames it would not allow the menu to be seen past the frames edge.

I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide".

What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child.

There should be a way to make the child execute a function FOR the parent.
Apr 17 '10 #7

gits
Expert Mod 5K+
P: 5,333
if a function is in the parent and you want to scope the function to be executed there, then you might use the call or apply methods like:
Expand|Select|Wrap|Line Numbers
  1. parent.functionName.call(parent, arg1, arg2);
or
Expand|Select|Wrap|Line Numbers
  1. parent.functionName.apply(parent, [ arg1, arg2 ]);
kind regards
Apr 17 '10 #8

P: 12
I think I understand that.

Will I be able to use it in the body tag like I did here:

Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.FUNCTION NAME HERE()">
I'm rather new at trying to do this advanced stuff. I believe I am to put the name of the function I wish to execute in place of your "functionName", right?

Next I'm not sure how to use the "function name" I'm trying to apply.

From looking at my code, there is a script that contains a jQuery function. this function contains the "command" I am trying to apply. which is "menu.hide". I tried simply using that and end up with:

Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.menu.hide.apply(parent, [ arg1, arg2 ])">
But that doesn't work. I think it's the
(parent, [ arg1, arg2 ])
section that has me confused. What are the arg1 & arg2 for?.

Perhaps I am applying the function using the wrong name?

Do I need to set a specific "var" within the jQuery function for just "menu.hide"?

If so could I simply just do this:

Expand|Select|Wrap|Line Numbers
  1. var menuhide = $( "#menu.hide" );
and add this to the existing function:

Expand|Select|Wrap|Line Numbers
  1. menuhide
  2. function(){
  3. menu.hide();
Apr 17 '10 #9

gits
Expert Mod 5K+
P: 5,333
try:
Expand|Select|Wrap|Line Numbers
  1. onclick="parent.menu.hide.call(parent, event);"
the arg1...n are parameters that might be passed to a function ... please first try it in FF ... might be that we would need a small adaption for IE?

kind regards
Apr 17 '10 #10

P: 12
I gave it a shot but no luck.
Apr 17 '10 #11

gits
Expert Mod 5K+
P: 5,333
is there any error in the console or firebug?
Apr 17 '10 #12

P: 12
Ahh, there is. Never knew FF had a console.

Error: parent.menu is undefined
Apr 17 '10 #13

gits
Expert Mod 5K+
P: 5,333
then try to create a global var:
Expand|Select|Wrap|Line Numbers
  1. var menu = $("#menu");
first in the parent ...

kind regards
Apr 17 '10 #14

P: 12
Tried to create a global var, but i don't think i did it right.

I just put this within the <head> tags but did not know if I was suposed to put any tags around it:

Expand|Select|Wrap|Line Numbers
  1. var menuhide = $( "#menuhide" );
  2.  
  3.     menuhide
  4.         function(){
  5.             // Toggle the menu display when link clicked.
  6.             menu.hide();
  7.         }
  8.     ;
This is what the parents content looks like between the <head> tags on my test pages I'm working with:
Expand|Select|Wrap|Line Numbers
  1. <head>
  2.     <title>TREP - Tyler Panesar Dot Ca</title>
  3.     <link rel="shortcut icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
  4.     <link rel="icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
  5.     <style type="text/css">
  6.  
  7.         html,
  8.         body {
  9.             margin: 0px 0px 0px 0px ;
  10.             padding: 0px 0px 0px 0px ;
  11.             }
  12.  
  13.         #site-body-container {}
  14.  
  15.         #site-body-content {
  16.             padding: 15px 15px 15px 15px ;
  17.             }
  18.  
  19.         #site-bottom-bar {
  20.             background-color: #F0F0F0 ;
  21.             border-top: 1px solid #CCCCCC ;
  22.             bottom: 0px ;
  23.             font-family: verdana, arial ;
  24.             font-size: 11px ;
  25.             height: 30px ;
  26.             position: fixed ;
  27.             width: 100% ;
  28.             z-index: 1000 ;
  29.             }
  30.  
  31.         #site-bottom-bar-frame {
  32.             height: 30px ;
  33.             margin: 0px 10px 0px 10px ;
  34.             position: relative ;
  35.             }
  36.  
  37.         #site-bottom-bar-content {
  38.             padding: 3px 0px 0px 0px ;
  39.             }
  40.  
  41.         #menu-root {
  42.             background-color: #E8E8E8 ;
  43.             border: 1px solid #D0D0D0 ;
  44.             color: #000000 ;
  45.             display: block ;
  46.             height: 22px ;
  47.             line-height: 22px ;
  48.             text-align: center ;
  49.             text-decoration: none ;
  50.             width: 210px ;
  51.             }
  52.  
  53.         #menu-root:hover {
  54.             background-color: #666666 ;
  55.             border-color: #000000 ;
  56.             color: #FFFFFF ;
  57.             }
  58.  
  59.         #menu {
  60.             background-color: #E8E8E8 ;
  61.             border: 1px solid #D0D0D0 ;
  62.             bottom: 32px ;
  63.             display: none ;
  64.             left: 0px ;
  65.             padding: 5px 5px 1px 5px ;
  66.             position: absolute ;
  67.             width: 200px ;
  68.             }
  69.  
  70.         #menu a {
  71.             background-color: #E8E8E8 ;
  72.             border: 1px solid #D0D0D0 ;
  73.             color: #000000 ;
  74.             display: block ;
  75.             margin-bottom: 4px ;
  76.             padding: 5px 0px 5px 5px ;
  77.             text-decoration: none ;
  78.             }
  79.  
  80.         #menu a:hover {
  81.             background-color: #666666 ;
  82.             border-color: #000000 ;
  83.             color: #FFFFFF ;
  84.             }
  85.  
  86.         /* -------------------------------------------------- */
  87.         /* -- IE 6 FIXED POSITION HACK ---------------------- */
  88.         /* -------------------------------------------------- */
  89.  
  90.         html,
  91.         body,
  92.         #site-body-container {
  93.             _height: 100% ;
  94.             _overflow: hidden ;
  95.             _width: 100% ;
  96.             }
  97.  
  98.         #site-body-container {
  99.             _overflow-y: scroll ;
  100.             _overflow-x: hidden ;
  101.             _position: relative ;
  102.             }
  103.  
  104.         /* To make up for scroll-bar. */
  105.         #site-bottom-bar {
  106.             _bottom: -1px ;
  107.             _position: absolute ;
  108.             _right: 16px ;
  109.             }
  110.  
  111.         /* To make up for overflow left. */
  112.         #site-bottom-bar-frame {
  113.             _margin-left: 26px ;
  114.             }
  115.  
  116.         /* To fix IE6 display bugs. */
  117.         #menu a {
  118.             _display: inline-block ;
  119.             _width: 99% ;
  120.             }
  121.  
  122.     body {
  123.     margin-top: 8px;
  124. }
  125. </style>
  126. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  127.  
  128. var menuhide = $( "#menuhide" );
  129.  
  130.     menuhide
  131.         function(){
  132.             // Toggle the menu display when link clicked.
  133.             menu.hide();
  134.         }
  135.     ;
  136.  
  137. <script type="text/javascript">
  138.  
  139.     jQuery(function( $ ){
  140.         var menuRoot = $( "#menu-root" );
  141.         var menu = $( "#menu" );
  142.         var menua = $( "#menu a" );
  143.  
  144.         // Hook up menu root click event.
  145.         menuRoot
  146.             .attr( "href", "javascript:void( 0 )" )
  147.             .click(
  148.                 function(){
  149.                     // Toggle the menu display.
  150.                     menu.toggle();
  151.  
  152.                     // Blur the link to remove focus.
  153.                     menuRoot.blur();
  154.  
  155.                     // Cancel event (and its bubbling).
  156.                     return( false );
  157.                 }
  158.             )
  159.         ;
  160.         menua
  161.             .click(
  162.                 function(){
  163.                     // Toggle the menu display when link clicked.
  164.                     menu.hide();
  165.                 }
  166.             )
  167.         ;
  168.         // Hook up a click handler on the document so that
  169.         // we can hide the menu if it is not the target of
  170.         // the mouse click.
  171.         $( document ).click(
  172.             function( event ){
  173.                 // Check to see if this came from the menu.
  174.                 if (
  175.                     menu.is( ":visible" ) &&
  176.                     !$( event.target ).closest( "#menu" ).size()
  177.                     ){
  178.  
  179.                     // The click came outside the menu, so
  180.                     // close the menu.
  181.                     menu.hide();
  182.  
  183.                 }
  184.             }
  185.         );
  186.     });
  187.  
  188. </script>
  189.  
  190.     <style type="text/css">
  191.         html, body { margin: 0; padding: 0; height: 100%; }
  192.         #bar { height: 32px; background: red; }
  193.         iframe {
  194.             position: absolute;
  195.             top: 0; left: 0; width: 100%; height: 100%;
  196.             border: none; padding-top: 0px;
  197.             box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
  198.         }
  199.     </style>
  200.  
  201. <script>
  202. function foo()
  203. {
  204. alert("foo!");
  205. }
  206. </script>
  207.  
  208. <script language="Javascript" type="text/javascript">
  209.  
  210.     function CallParentWindowFunction()
  211.     {
  212.         window.opener.CallAlert();
  213.         return false;
  214.     }
  215. </script>
  216.  
  217. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>
the body tag on the child still says:
Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.menuhide.apply(parent, event);">
I instead made it try to call a function name that calles the "menu.hide" not sure If was right in doing so.

Still get the same error in FF, with the minor change to name


Error: parent.menuhide is undefined

I'm getting lost when it comes to making these variables and functions, as I don't have a whole lot of experience in this area. Just something I've tried to take on.

Thanks for all the help so far. We are definitely getting some where.

Tyler
Apr 18 '10 #15

gits
Expert Mod 5K+
P: 5,333
whatfor should:
Expand|Select|Wrap|Line Numbers
  1. menuhide
  2.     function(){
  3.         // Toggle the menu display when link clicked.
  4.         menu.hide();
  5.     }
  6. ;
  7.  
be good? it is just syntactically wrong ... and it is not included in any script tag. either use:
Expand|Select|Wrap|Line Numbers
  1. function myMenuHide() {
  2.     $( "#menu" ).hide();
  3. }
included in script tags and call that function from the child with the call method or leave that and include the code i showed you above ... i suppose that only the menu-node has a hide method ... so this one should be called.
Apr 19 '10 #16

P: 12
Gave it a shot. Not sure if I incorporated it correctly but I still end up with an error in FF.

I simply added this in the <head> of the parent:
Expand|Select|Wrap|Line Numbers
  1. function myMenuHide() {
  2.     $( "#menu" ).hide();
  3. }
and used this for the childs <body>:
Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.MenuHide.apply(parent, event);">
Am I just doing this wrong?

Perhaps we can try this a different way. This will hopefully eliminate the entire parent/child calling.

Is there a way to have it so that we could use like "if statements"

Basically check to see if I moused out of the menu.
If I did, then check if I moused over a menu button.
If I didn't, hide menu.

This way I could just attach it to the menu variable within the jQuery function.

Same way I did for if you click an item in the menu, to close the menu:
Expand|Select|Wrap|Line Numbers
  1.         menua
  2.             .click(
  3.                 function(){
  4.                     // Toggle the menu display when link clicked.
  5.                     menu.hide();
  6.                 }
  7.             )
  8.         ;

It might be simpler this way, or it could end up being 10x harder.

Thanks again,
Tyler
Apr 19 '10 #17

P: 12
Hey Gits,

Thanks for All your hard work. The person who I got this menu bar from has finally answered my question directly. Apparently the exact thing we were trying to do, but much simpler to achieve was actually a feature of this jQuery script.

You simply add this to your function:

Expand|Select|Wrap|Line Numbers
  1.             menu
  2.                 .mouseleave(
  3.                     function(){
  4.                         // Toggle the menu display.
  5.                         menu.hide();
  6.                     }
  7.                 )
  8.             ;
And on mouse leave of the menu, it hides. Advantage to this is now I don't have to go to every page I created and add the script to call the function in the parent. Which is rather difficult if for whatever reason you source a page you can't edit.

Once again thanks for everything.
Tyler
Apr 20 '10 #18

gits
Expert Mod 5K+
P: 5,333
that is the mouseout-handler ... of course that works ... but i would suggest to try getting the started solution to work ... since it seems that you would need some practice.

this line:
Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.MenuHide.apply(parent, event);">
cannot work when the function name is myMenuHide ... before using a quite mighty framework like jQuery i would suggest to understand the basic concepts of javascript ... otherwise it will often lead to a mess of code and copy&paste coding and try&error programming ... but it's up to you how you will proceed with your javascript skills ...

regards
Apr 20 '10 #19

P: 12
Good call. I was just thinking, I am still going to need this script for when people navigate to my site on something without a mouse, like a mobile.

I just changed the child to:
Expand|Select|Wrap|Line Numbers
  1. <body onclick="parent.myMenuHide.apply(parent, event);">
with no luck. Same error in FF, Error: parent.myMenuHide is undefined.

this is the parents <head> take a look and see if I've messed up the global function:
Expand|Select|Wrap|Line Numbers
  1. <head>
  2.     <title>TREP - Tyler Panesar Dot Ca</title>
  3.     <link rel="shortcut icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
  4.     <link rel="icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
  5.     <style type="text/css">
  6.  
  7.         html,
  8.         body {
  9.             margin: 0px 0px 0px 0px ;
  10.             padding: 0px 0px 0px 0px ;
  11.             }
  12.  
  13.         #site-body-container {}
  14.  
  15.         #site-body-content {
  16.             padding: 15px 15px 15px 15px ;
  17.             }
  18.  
  19.         #site-bottom-bar {
  20.             background-color: #F0F0F0 ;
  21.             border-top: 1px solid #CCCCCC ;
  22.             bottom: 0px ;
  23.             font-family: verdana, arial ;
  24.             font-size: 11px ;
  25.             height: 30px ;
  26.             position: fixed ;
  27.             width: 100% ;
  28.             z-index: 1000 ;
  29.             }
  30.  
  31.         #site-bottom-bar-frame {
  32.             height: 30px ;
  33.             margin: 0px 10px 0px 10px ;
  34.             position: relative ;
  35.             }
  36.  
  37.         #site-bottom-bar-content {
  38.             padding: 3px 0px 0px 0px ;
  39.             }
  40.  
  41.         #menu-root {
  42.             background-color: #E8E8E8 ;
  43.             border: 1px solid #D0D0D0 ;
  44.             color: #000000 ;
  45.             display: block ;
  46.             height: 22px ;
  47.             line-height: 22px ;
  48.             text-align: center ;
  49.             text-decoration: none ;
  50.             width: 210px ;
  51.             }
  52.  
  53.         #menu-root:hover {
  54.             background-color: #666666 ;
  55.             border-color: #000000 ;
  56.             color: #FFFFFF ;
  57.             }
  58.  
  59.         #menu {
  60.             background-color: #E8E8E8 ;
  61.             border: 1px solid #D0D0D0 ;
  62.             bottom: 32px ;
  63.             display: none ;
  64.             left: 0px ;
  65.             padding: 5px 5px 1px 5px ;
  66.             position: absolute ;
  67.             width: 200px ;
  68.             }
  69.  
  70.         #menu a {
  71.             background-color: #E8E8E8 ;
  72.             border: 1px solid #D0D0D0 ;
  73.             color: #000000 ;
  74.             display: block ;
  75.             margin-bottom: 4px ;
  76.             padding: 5px 0px 5px 5px ;
  77.             text-decoration: none ;
  78.             }
  79.  
  80.         #menu a:hover {
  81.             background-color: #666666 ;
  82.             border-color: #000000 ;
  83.             color: #FFFFFF ;
  84.             }
  85.  
  86.         /* -------------------------------------------------- */
  87.         /* -- IE 6 FIXED POSITION HACK ---------------------- */
  88.         /* -------------------------------------------------- */
  89.  
  90.         html,
  91.         body,
  92.         #site-body-container {
  93.             _height: 100% ;
  94.             _overflow: hidden ;
  95.             _width: 100% ;
  96.             }
  97.  
  98.         #site-body-container {
  99.             _overflow-y: scroll ;
  100.             _overflow-x: hidden ;
  101.             _position: relative ;
  102.             }
  103.  
  104.         /* To make up for scroll-bar. */
  105.         #site-bottom-bar {
  106.             _bottom: -1px ;
  107.             _position: absolute ;
  108.             _right: 16px ;
  109.             }
  110.  
  111.         /* To make up for overflow left. */
  112.         #site-bottom-bar-frame {
  113.             _margin-left: 26px ;
  114.             }
  115.  
  116.         /* To fix IE6 display bugs. */
  117.         #menu a {
  118.             _display: inline-block ;
  119.             _width: 99% ;
  120.             }
  121.  
  122.     body {
  123.     margin-top: 8px;
  124. }
  125. </style>
  126. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  127.  
  128. function myMenuHide() {
  129.     $( "#menu" ).hide();
  130. }
  131.  
  132. <script type="text/javascript">
  133.  
  134.     jQuery(function( $ ){
  135.         var menuRoot = $( "#menu-root" );
  136.         var menu = $( "#menu" );
  137.         var menua = $( "#menu a" );
  138.  
  139.         // Hook up menu root click event.
  140.         menuRoot
  141.             .attr( "href", "javascript:void( 0 )" )
  142.             .click(
  143.                 function(){
  144.                     // Toggle the menu display.
  145.                     menu.toggle();
  146.  
  147.                     // Blur the link to remove focus.
  148.                     menuRoot.blur();
  149.  
  150.                     // Cancel event (and its bubbling).
  151.                     return( false );
  152.                 }
  153.             )
  154.         ;
  155.         menua
  156.             .click(
  157.                 function(){
  158.                     // Toggle the menu display when link clicked.
  159.                     menu.hide();
  160.                 }
  161.             )
  162.         ;
  163.  
  164.         menu
  165.             . mouseleave(
  166.                 function(){
  167.                     // Toggle the menu display when link clicked.
  168.                     menu.hide();
  169.                 }
  170.             )
  171.         ;
  172.         // Hook up a click handler on the document so that
  173.         // we can hide the menu if it is not the target of
  174.         // the mouse click.
  175.         $( document ).click(
  176.             function( event ){
  177.                 // Check to see if this came from the menu.
  178.                 if (
  179.                     menu.is( ":visible" ) &&
  180.                     !$( event.target ).closest( "#menu" ).size()
  181.                     ){
  182.  
  183.                     // The click came outside the menu, so
  184.                     // close the menu.
  185.                     menu.hide();
  186.  
  187.                 }
  188.             }
  189.         );
  190.     });
  191.  
  192. </script>
  193.  
  194.     <style type="text/css">
  195.         html, body { margin: 0; padding: 0; height: 100%; }
  196.         #bar { height: 32px; background: red; }
  197.         iframe {
  198.             position: absolute;
  199.             top: 0; left: 0; width: 100%; height: 100%;
  200.             border: none; padding-top: 0px;
  201.             box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
  202.         }
  203.     </style>
  204.  
  205. <script>
  206. function foo()
  207. {
  208. alert("foo!");
  209. }
  210. </script>
  211.  
  212. <script language="Javascript" type="text/javascript">
  213.  
  214.     function CallParentWindowFunction()
  215.     {
  216.         window.opener.CallAlert();
  217.         return false;
  218.     }
  219. </script>
  220.  
  221. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  222. </head>
Apr 20 '10 #20

gits
Expert Mod 5K+
P: 5,333
the surrounding script-tags are missing as far as i can see ... and the call with apply() should be:
Expand|Select|Wrap|Line Numbers
  1. parent.myMenuHide.apply(parent, [ event ]);
  2.  
since the second arg needs to be an array ...

kind regards
Apr 20 '10 #21

P: 12
PERFECT!

Just made your corrections and removed the mouse leave function, and the clicking of the child document hides the menu.

Another instance of when this script will help (on a PC not mobile) is if someone were to tab out of the window while the menu is open and then tab back to it. It would not trigger the mouse leave and there for would keep the menu open. Now a simple click of the child document will close the menu.

Once again Gits thanks for everything.
Tyler
Apr 21 '10 #22

gits
Expert Mod 5K+
P: 5,333
:) ... glad to hear that it works now ...

kind regards,
gits
Apr 21 '10 #23

Post your reply

Sign in to post your reply or Sign up for a free account.