471,873 Members | 1,896 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

Problems with Safari 'blur' and 'focus' events on a Flash Movie

Hi there all,

Using prototype.js I render a flash movie within a DIV dynamically and then I try to attach some events in order to maintain focus on main window cuz is responsible of event handling some keyboard events -ie.

Expand|Select|Wrap|Line Numbers
  1. Event.observe(document,'keyup',function (e) {
  2. // code here
  3. });.
The problem is that when somebody clicks a button within the flash movie, the document and/or window event handlers for keypress or keyup do not work at all. To workaround that problem I did the following:

Expand|Select|Wrap|Line Numbers
  1. Event.observe($('flashmovieid'),'focus',function () {
  2. $('flashmovieid').blur();
  3. });
With other browsers but Safari, this work fine, it seems that returns control to the document event handler and I can return to capture document key events... In Safari looks like it cancels somehow the document event bubbling. I manage to get mouse events to work and I tried to make the movie loose focus to capture again document key events but no luck at all...

Any help will be highly appreciated
Sep 11 '07 #1
2 3696
Hi there all,

After I broke my head against a wall trying to find a solution, I found the most primitive one (try to capture focus and blur events on a text field to return keyboard events trapping to the document).

The problem relied that Safari 3 do listen 'blur and focus' events over a FLASH MOVIE (embed) objects. At least, I could not find a solution for that problem anywhere. Well, this was my solution, I hope I can help somebody with it:

Expand|Select|Wrap|Line Numbers
  1. var so = new SWFObject('FLASH.MOVIE.URL', 'FLASHID', "100%", "100%", "9", "#000000");
  3.     so.write('DIV.ID.TO.RENDER.MOVIE');
  6.     $('DIV.ID.TO.RENDER.MOVIE').innerHTML += '<input id="FIELD.ID" type="text" style="background:#00000;width:1px;height:1px;top:0px;left:-20px;position:absolute;border:#000000 1px solid;">';
  8.     $('DIV.ID.TO.RENDER.MOVIE').show();
  10.     if (Prototype.Browser.WebKit)
  11.     {
  12.         Event.observe($('DIV.ID.TO.RENDER.MOVIE'),'blur',
  13. function () { $('DIV.ID.TO.RENDER.MOVIE').focus(); // return focus to field
  14. });    
  15.         $('DIV.ID.TO.RENDER.MOVIE').focus();
  16.     }
  17.     else
  18.         Event.observe($('FLASHID'),'focus',function () {
  19.             $('FLASHID').blur(); // return focus to our self window
  20.         });
I know it looks awkward but that is the solution that actually works the way I wanted.

Sep 12 '07 #2
5,390 Expert Mod 4TB
hi ...

glad to hear that you found a solution for your problem ... and many thanks for sharing it here ... may be it helps other users with a similar problem ...

kind regards
Sep 12 '07 #3

Post your reply

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

Similar topics

2 posts views Thread by delerious | last post: by
2 posts views Thread by Chris | last post: by
6 posts views Thread by dieselmachine | last post: by
3 posts views Thread by SAM | last post: by
15 posts views Thread by GinnTech | last post: by
reply views Thread by YellowAndGreen | last post: by

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.