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

**gits** · Apr 12 '10, 08:51 PM

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

**thekingsnake** · Apr 12 '10, 10:38 PM

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:

Code:

menua
	.click(
		function(){
			menu.hide();

the code I used for the mouseout toggle was:

Code:

menu
	.mouseout(
		function(){
			menu.toggle();

Any help is greatly appreciated.
Thanks,
Tyler

**gits** · Apr 15 '10, 12:10 PM

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

**thekingsnake** · Apr 16 '10, 02:07 AM

re: Script in an IFRAME not calling particular function defined in the parent documen

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.co m/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm

Code:

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

**gits** · Apr 17 '10, 11:53 AM

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

**thekingsnake** · Apr 17 '10, 04:41 PM

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.

**gits** · Apr 17 '10, 05:05 PM

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:

Code:

parent.functionName.call(parent, arg1, arg2);

or

Code:

parent.functionName.apply(parent, [ arg1, arg2 ]);

kind regards

**thekingsnake** · Apr 17 '10, 07:06 PM

I think I understand that.

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

Code:

<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 "functionNa me", 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:

Code:

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

Code:

var menuhide = $( "#menu.hide" );

and add this to the existing function:

Code:

menuhide
function(){
menu.hide();

**gits** · Apr 17 '10, 07:21 PM

try:

Code:

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

**thekingsnake** · Apr 17 '10, 10:21 PM

I gave it a shot but no luck.

**gits** · Apr 17 '10, 11:00 PM

is there any error in the console or firebug?

**thekingsnake** · Apr 17 '10, 11:10 PM

Ahh, there is. Never knew FF had a console.

Error: parent.menu is undefined

**gits** · Apr 17 '10, 11:25 PM

then try to create a global var:

Code:

var menu = $("#menu");

first in the parent ...

kind regards

**thekingsnake** · Apr 18 '10, 08:27 PM

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:

Code:

var menuhide = $( "#menuhide" );

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

This is what the parents content looks like between the <head> tags on my test pages I'm working with:

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>

var menuhide = $( "#menuhide" );

	menuhide
		function(){
			// Toggle the menu display when link clicked.
			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();
				}
			)
		;
		// 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>

the body tag on the child still says:

Code:

<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

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

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

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment