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

**gits** · Apr 19 '10, 11:44 AM

whatfor should:

Code:

menuhide
    function(){
        // Toggle the menu display when link clicked.
        menu.hide();
    }
;

be good? it is just syntactically wrong ... and it is not included in any script tag. either use:

Code:

function myMenuHide() {
    $( "#menu" ).hide();
}

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.

**thekingsnake** · Apr 19 '10, 11:40 PM

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:

Code:

function myMenuHide() {
	$( "#menu" ).hide();
}

and used this for the childs <body>:

Code:

<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:

Code:

		menua
			.click(
				function(){
					// Toggle the menu display when link clicked.
					menu.hide();
				}
			)
		;

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

Thanks again,
Tyler

**thekingsnake** · Apr 20 '10, 02:36 AM

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:

Code:

			menu
				.mouseleave(
					function(){
						// Toggle the menu display.
						menu.hide();
					}
				)
			;

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

**gits** · Apr 20 '10, 06:09 AM

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:

Code:

<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

**thekingsnake** · Apr 20 '10, 10:37 AM

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:

Code:

<body onclick="parent.myMenuHide.apply(parent, event);">

with no luck. Same error in FF, Error: parent.myMenuHi de is undefined.

this is the parents <head> take a look and see if I've messed up the global function:

Code:

<head>
	<title>TREP - Tyler Panesar Dot Ca</title>
    <link rel="shortcut icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
    <link rel="icon" href="http://tylerpanesar.ca/favicon.ico" type="image/vnd.microsoft.icon" />
	<style type="text/css">
 
		html,
		body {
			margin: 0px 0px 0px 0px ;
			padding: 0px 0px 0px 0px ;
			}
 
		#site-body-container {}
 
		#site-body-content {
			padding: 15px 15px 15px 15px ;
			}
 
		#site-bottom-bar {
			background-color: #F0F0F0 ;
			border-top: 1px solid #CCCCCC ;
			bottom: 0px ;
			font-family: verdana, arial ;
			font-size: 11px ;
			height: 30px ;
			position: fixed ;
			width: 100% ;
			z-index: 1000 ;
			}
 
		#site-bottom-bar-frame {
			height: 30px ;
			margin: 0px 10px 0px 10px ;
			position: relative ;
			}
 
		#site-bottom-bar-content {
			padding: 3px 0px 0px 0px ;
			}
 
		#menu-root {
			background-color: #E8E8E8 ;
			border: 1px solid #D0D0D0 ;
			color: #000000 ;
			display: block ;
			height: 22px ;
			line-height: 22px ;
			text-align: center ;
			text-decoration: none ;
			width: 210px ;
			}
 
		#menu-root:hover {
			background-color: #666666 ;
			border-color: #000000 ;
			color: #FFFFFF ;
			}
 
		#menu {
			background-color: #E8E8E8 ;
			border: 1px solid #D0D0D0 ;
			bottom: 32px ;
			display: none ;
			left: 0px ;
			padding: 5px 5px 1px 5px ;
			position: absolute ;
			width: 200px ;
			}
 
		#menu a {
			background-color: #E8E8E8 ;
			border: 1px solid #D0D0D0 ;
			color: #000000 ;
			display: block ;
			margin-bottom: 4px ;
			padding: 5px 0px 5px 5px ;
			text-decoration: none ;
			}
 
		#menu a:hover {
			background-color: #666666 ;
			border-color: #000000 ;
			color: #FFFFFF ;
			}
 
		/* -------------------------------------------------- */
		/* -- IE 6 FIXED POSITION HACK ---------------------- */
		/* -------------------------------------------------- */
 
		html,
		body,
		#site-body-container {
			_height: 100% ;
			_overflow: hidden ;
			_width: 100% ;
			}
 
		#site-body-container {
			_overflow-y: scroll ;
			_overflow-x: hidden ;
			_position: relative ;
			}
 
		/* To make up for scroll-bar. */
		#site-bottom-bar {
			_bottom: -1px ;
			_position: absolute ;
			_right: 16px ;
			}
 
		/* To make up for overflow left. */
		#site-bottom-bar-frame {
			_margin-left: 26px ;
			}
 
		/* To fix IE6 display bugs. */
		#menu a {
			_display: inline-block ;
			_width: 99% ;
			}
 
	body {
	margin-top: 8px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>

function myMenuHide() {
	$( "#menu" ).hide();
}

<script type="text/javascript">
 
	jQuery(function( $ ){
		var menuRoot = $( "#menu-root" );
		var menu = $( "#menu" );
		var menua = $( "#menu a" );

		// Hook up menu root click event.
		menuRoot
			.attr( "href", "javascript:void( 0 )" )
			.click(
				function(){
					// Toggle the menu display.
					menu.toggle();

					// Blur the link to remove focus.
					menuRoot.blur();

					// Cancel event (and its bubbling).
					return( false );
				}
			)
		;
		menua
			.click(
				function(){
					// Toggle the menu display when link clicked.
					menu.hide();
				}
			)
		;

		menu
			. mouseleave(
				function(){
					// Toggle the menu display when link clicked.
					menu.hide();
				}
			)
		;
		// Hook up a click handler on the document so that
		// we can hide the menu if it is not the target of
		// the mouse click.
		$( document ).click(
			function( event ){
				// Check to see if this came from the menu.
				if (
					menu.is( ":visible" ) &&
					!$( event.target ).closest( "#menu" ).size()
					){

					// The click came outside the menu, so
					// close the menu.
					menu.hide();

				}
			}
		);
	});
 
</script>

    <style type="text/css">
        html, body { margin: 0; padding: 0; height: 100%; }
        #bar { height: 32px; background: red; }
        iframe {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border: none; padding-top: 0px;
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
        }
    </style>

<script>
function foo()
{
alert("foo!");
}
</script>

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

    function CallParentWindowFunction()
    {
        window.opener.CallAlert();
        return false;
    }
</script>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>

**gits** · Apr 20 '10, 02:34 PM

the surrounding script-tags are missing as far as i can see ... and the call with apply() should be:

Code:

parent.myMenuHide.apply(parent, [ event ]);

since the second arg needs to be an array ...

kind regards

**thekingsnake** · Apr 21 '10, 12:05 AM

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

**gits** · Apr 21 '10, 11:32 AM

:) ... glad to hear that it works now ...

kind regards,
gits

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment