473,387 Members | 1,464 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > script in an iframe not calling particular function defined in the parent document?

Join Bytes to post your question to a community of 473,387 software developers and data experts.

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

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
22 3951
gits
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
I gave it a shot but no luck.
Apr 17 '10 #11
gits
5,390 Expert Mod 4TB
is there any error in the console or firebug?
Apr 17 '10 #12
Ahh, there is. Never knew FF had a console.

Error: parent.menu is undefined
Apr 17 '10 #13
gits
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
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
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
5,390 Expert Mod 4TB
:) ... glad to hear that it works now ...

kind regards,
gits
Apr 21 '10 #23

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

Similar topics

3
When does SCRIPT include file load
by: Ed Brandmark | last post by:
I have a tag of the form <SCRIPT LANGUAGE="JavaScript1.1" SRC="foo.js"..... and was wondering if this delays the loading of my page until that file foo.js downloads. It seems that if I place...
Javascript
2
Child window calling a script loaded in parent...
by: Randell D. | last post by:
Folks, I have got this working before, in part with some help from this ng but I never really understood how I got it working... and last time, I was using it via a popup window as opposed to an...
Javascript
26
Script in an IFRAME can not call functions defined in the parent document?
by: Dave Hammond | last post by:
In document "A.html" I have defined a function and within the document body have included an IFRAME element who's source is document "B.html". In document "B.html" I am trying to call the function...
Javascript
3
Iframe question
by: mike | last post by:
I have a document lets call it a.cfm that looks like: <iframe src="" id="test" name="test"></iframe> <div> <form name="myform"> ... many elements here </form> </div>
Javascript
2
need help looking for a cross-browsers vertical scrolling script
by: P2P | last post by:
Hi I am wondering if someone know of a free cross-browsers vertical scrolling script that - is cross cross-browsers - will call the scrolling content from an external html page or from a...
Javascript
3
Referencing parent window script from within iframe
by: Jeremy | last post by:
If we have an iframe loaded from the same domain as the parent document, how can we (is it possible) to execute a function on the parent document's page? e.g. 1) On parent page:...
Javascript
1
AJAX file upload script replaces existing images
by: kksandeep | last post by:
i am using this three files to uplod file. i got this file from net but i think these have some error. i am new to this field plz help the script i found is some helpful but not too that i need ...
PHP
1
master page affect firefox get the ID of parent's iframe
by: SunshineInTheRain | last post by:
My project has 3 files, File1 has included master page. file1 consists of iframe1 that load file2. File2 consists of iframe2 that load file3. Javascript used on each file to resize the iframe...
Javascript
1
Dynamic Iframe (inside ModalPopUpControl ) Memory Leak In Internet Explorer
by: cdmsenthil | last post by:
I have an Infragistics UltrawebGrid . Each Row in the grid is attached to a context menu using Infragistics CSOM Upon click on the menu, I am creating an Iframe dynamically which points to...
Javascript
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!