Link to home
Start Free TrialLog in
Avatar of heise_man
heise_manFlag for Australia

asked on

body onFocus=functionname, not working on IE

Hi, I'm working on a flash website and am having difficulty figuring out how to have a function triggered when the window becomes active. I am having limited success with:

<body onFocus=myFadeBack();>
*myFadeBack is a function which fades the window on/off depending on whether the window is active or not.

This code works fine with Firefox and Safari, but not Internet Explorer. Is there a way to achieve this in all 3 browsers?

Here is a link of the site (test) in action.
http://www.lukeheise.com/test5/

and here are the source files:
http://www.lukeheise.com/test5/flash_files.zip

Thanks.
Avatar of kadaba
kadaba
Flag of India image
I do not have IE right now... but try out this example.
when the focus is on page.. you will get an alert focus and then you minimize the window to lose focus you will get a alert blur..

you can even try using window.onfocus, this will trigger when the window is in focus..

<body onfocus="alert('focus');" onblur="alert('blur');">
</body>
 
 
<script type="text/javascript">
window.onfocus=function()
{
alert('focus');
};
window.onblur=function()
{
alert('blur');
};
</script>

Open in new window

Avatar of heise_man
heise_man
Flag of Australia image

ASKER

Thanks Kadaba, that did work. It must be the window.onfocus that did it. However, it only seemed to worked for the alert example that you gave me.

When I apply it to my page, it fails:
http://www.lukeheise.com/test5/index9.html
* works in Firefox & Safari, but not Internet Explorer.

I'm not so much interested in the onblur code as I already have a solution for that. I'd just like for a function to be triggered when the page comes into focus.

Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
	body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	object {
		width: 100%;
		height: 1550px;
		display: block;
		outline: none;
	}
</style>
 
<script language="JavaScript"> 
function Launch(page, width, height) { 
  OpenWin = this.open(page, "kirupa", "toolbar=no, menubar=no ,location=no, scrollbars=no, resizable=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
	}
	
function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
    return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}
 
function myFadeBack()
{
  var flashMovie=getFlashMovieObject("FlashID");
  flashMovie.TPlay("_level0.fadeanimation");
}
</script>
 
<script type="text/javascript">
window.onfocus=myFadeBack()
</script>
 
</head>
 
<body onfocus="myFadeBack()">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8.0.35.0"
 WIDTH="100%" HEIGHT="1550" id="FlashID" ALIGN="">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#1E1B15" />
<embed src="index.swf" swliveconnect="true" wmode=opaque quality="high" scale="noscale" salign="lt" bgcolor="#1E1B15" width="100%" height="1550" NAME="FlashID" ALIGN="" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</BODY>
</HTML>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
the correct way of calling it is

<script type="text/javascript">
window.onfocus=myFadeBack; // replace the event handler
</script>
 
</head>
 
and remove it from here:
<body onfocus="myFadeBack()">



Avatar of heise_man
heise_man
Flag of Australia image

ASKER

Thanks mplungjan, however it still does not work in Internet Explorer. Here is a link:
http://www.lukeheise.com/test5/index17.html

and below is the full code:

Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<style type="text/css">
	body {
		margin-left: 0px;
		margin-top: 0px;
		margin-right: 0px;
		margin-bottom: 0px;
	}
	object {
		width: 100%;
		height: 1550px;
		display: block;
		outline: none;
	}
</style>
 
<script language="JavaScript"> 
function Launch(page, width, height) { 
  OpenWin = this.open(page, "kirupa", "toolbar=no, menubar=no ,location=no, scrollbars=no, resizable=no, width=" + width + ", height=" + height + ", top=" + (screen.height/2 - height/2) + ", left=" + (screen.width/2 - width/2) + "\""); 
	}
	
function getFlashMovieObject(movieName)
{
  if (window.document[movieName]) 
  {
    return window.document[movieName];
  }
  if (navigator.appName.indexOf("Microsoft Internet")==-1)
  {
    if (document.embeds && document.embeds[movieName])
      return document.embeds[movieName]; 
  }
  else // if (navigator.appName.indexOf("Microsoft Internet")!=-1)
  {
    return document.getElementById(movieName);
  }
}
 
function myFadeBack()
{
  var flashMovie=getFlashMovieObject("FlashID");
  flashMovie.TPlay("_level0.fadeanimation");
}
</script>
 
<script type="text/javascript">
window.onfocus=myFadeBack;
</script>
 
</head>
 
<body>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
 codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8.0.35.0"
 WIDTH="100%" HEIGHT="1550" id="FlashID" ALIGN="">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="index.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#1E1B15" />
<embed src="index.swf" swliveconnect="true" wmode=opaque quality="high" scale="noscale" salign="lt" bgcolor="#1E1B15" width="100%" height="1550" NAME="FlashID" ALIGN="" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
 
</BODY>
</HTML>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Seems the onfocus does not trigger at all so the swf in the parent window has the focus at all times

I tried this:
window.onfocus=function(){alert('focussed')}

and it really does not trigger

I suggest you do

<body onBeforeUnload="if (opener && !opener.closed && opener.myFadeBack) opener.myFadeBack()"
in the child window


Avatar of heise_man
heise_man
Flag of Australia image

ASKER

There are 2 problems with onBeforeUnload.

1) The function isn't triggered if you leave the pop up window open and click back to the main window. Some users will click back to the main window without closing the popup.

2) The function is triggered when the url of the pop up window changes, not just when it is closed. Some of my pop up windows contain navigation with multiple html pages inside. This is problematic because I don't want the parent window to unfade until it is active.

I have gone down this road before and it didn't work out very well. I thought a better solution would be something like onFocus but it seems to have it's fair share of problems too.

Any more ideas? Surely there must be a work around for Internet Explorer since it works fine in the other browsers.

Thanks.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
trigger window.focus() from your swf onfocus
Avatar of heise_man
heise_man
Flag of Australia image

ASKER

Are you familiar with Flash? Can you elaborate? I'm guessing it should be something like:

getURL("javascript:window.onfocus=myFadeBack");

... but I doubt that's right.

Thanks.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
Perhaps


getURL("javascript:swf.blur(); window.focus()");

or similar
Avatar of heise_man
heise_man
Flag of Australia image

ASKER

Will this work with the above html, or do I need to make some further changes?

Also, should I put that code on a loop? I'm not sure what exactly it does.

Thanks.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image
I do not do AS so it was just a suggestion. Others can most likely tell you where to call this. In some focus event in the flash. The swf. should likely be replaced with document.getElementById('id of your flash object')
Avatar of heise_man
heise_man
Flag of Australia image

ASKER

Thanks mplungjan. I tried what you said but unfortunately could not get it working. This is harder than I thought it would be, so I've put the point value up to 500. I'm open to html/javascript and Flash solutions. Maybe there's a way inside Flash to detect whether the stage has focus or not. I'm using Actionscript 2.0 so keep that in mind.

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of scooby_56
scooby_56
Flag of United Kingdom of Great Britain and Northern Ireland image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial