I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.
Related
You may be aware that Chrome has problems with datalist/option autocompletes.
Essentially whilst it works in IE, Chrome doesn't allow you to scroll through the list and the list runs out of the browser into the main window.
My question is whether someone can suggest a good method of overriding the Chrome implementation, and what to override it with. Solution has to work in main modern browsers and mobiles
I had the exact same problem. I searched for 2 days and ended up using https://jqueryui.com/autocomplete/
It is far better than datalist.
long time lurker, first time poster.
The basics are this:
Inspired by this blog post, I'm attempting to create a bookmarklet for our QA team to quickly populate a form.
The bookmarklet works perfectly on my machine (TM) in Chrome, IE 10, and IE 9 compatibility mode. I've tested the bookmarklet on the QA team's machines, and while it works fine on their Chrome browsers and on IE 9, the bookmarklet doesn't work on the two machines running IE 11.
Details:
Of the two machines running IE 11, one is on Win 7, the other is on Win 8.1. The machine running IE 11 on Win 7 is updated to IE version 11.0.9600.17207IS, and will also run the bookmarklet correctly in Chrome.
I've attempted a couple different variations, the first based on the CSS-Tricks blog post mentioned above.
<a href="javascript:
(function(d) {
var body = d.getElementsByTagName('body').item(0);
var script = d.createElement('script');
script.src = 'https://company.siteurl.com/unrelated/DisclosureRegister.js';
body.appendChild(script);
}(window.document));
alert('Bookmarklet js fired!');">Disclosure Register Bookmarklet</a>
The second, based on a StackOverflow Response, is as follows:
<a href="javascript:
(function(){
var s=document.createElement('script');
s.type='text/javascript';
s.src='https://company.siteurl.com/unrelated/DisclosureRegister.js';
document.getElementsByTagName('head')[0].appendChild(s);
}());">Disclosure Register 2</a>
Both codes work on my machine in the previously mentioned browsers, neither work in IE 11 on the other machines (I don't have IE 11, can't test it directly on my machine).
I get no error message in console in the developer tools, and the DisclosureRegister.js file isn't listed in the developer tools' file list. It appears that the bookmarklet simply isn't firing.
Neither one of those bookmarklets have a Web Documents tab when I right click > properties, however, a simple javascript alert bookmarklet I provided them with does have the Web Documents tab, and it works perfectly in all browsers (including IE 11).
Click me!
I'm delivering the bookmarklets by writing the html in Codepen, emailing them a direct link to the Codepen (I don't have enough reputation points to post the link), and having them drag the link from the Codepen output to their browser favorites bar.
I came across something that gave me hope it was a bug with an older version of IE 11, but the IE version being used is even newer than the version that fixed the related bug.
Just in case there's something in the DisclosureRegister.js file that's causing IE 11 to abort the javascript, I'm including the code for that as well:
(function (win, doc, $, undefined) {
//Don't run if jQuery isn't loaded
if (typeof window.jQuery === 'undefined') {
return;
}
alert("Script is being called!");
}(window, window.document, window.jQuery));
The question:
While I'm certainly not ruling out an error with my code (and of course, please correct me if it's wrong), is there anything peculiar with IE 11 in the way it handles javascript bookmarklets that I need to account for in the code?
Thanks in advance for your time!
I wrote that article. Really glad you guys are finding it useful.
It seems there a bunch of people complaining about bookmarklets not working properly in IE11. One thing I'd test is how IE11 handles same origin policy. Check out this link, and see if you can temporarily disable same origin policy. Then test.
Obviously it won't solve the problem, but it could lead you in the right direction.
Hope that helps a bit. Let me know.
I think I found what is the problem with bookmarklets in IE11. I just added a bookmarklet in IE11 and it wasn't working so I started googling and found this page. Then I found bookmarklets at Microsoft's own website where they actually recommend to use it and it works. Then I decided to check if the syntax is correct and this where I found a problem. For some reason IE cuts part of long bookmarklets when it adds it to the toolbar by draggin-dropping. My bookmarklet that I was tried to add was several brackets short of original and because of that the syntax was incorrect. I then copy-pasted full code manually and it started working.
I was able to resolve the same problem by removing all line breaks from the bookmarklet code. IE 11 apparently doesn't know how to handle them.
With line breaks in the bookmarklet code, after adding it to "Favorites" the properties showed a blank URL and nothing would happen when clicking it.
With the linebreaks removed (ran a regex to collapse all whitespace to a single space character), after adding it to the "Favorites" the properties show the correct javascript in the URL field and it runs correctly when clicked.
I wasn't able to find anything anywhere documenting this limitation.
We have a thin client business app, and we are heading to use HTML5 on client side (first only for specific tasks, like some SVG drag'n'drop UI and Canvas image generating).
I know, I can't call a HTML5 page in an iframe on a non-HTML5 page in Internet Explorer, because it will displayed as non-HTML5 page, like its parent.
I tought i can call it to a new window, via javascript.
But it isn't work too.
In the base app there is an
open.window('HTML5.asp','_blank')
function, where the HTML5.asp uses SVG and Canvas. And yes, it's tested, it's works, when called from a HTML5 environment.
There are any solution or workaround to make it work?
Thank you guys!
UPDATE
Thank you for your help, finally i found the mistake.
I've tried to create a simplified code for you, but i couldn't reproduce the bug, so i went over our algorithm again, first block by block, then line by line.
We have a function dictonary, what should be the same in all systems, but it doesn't :)
And i've used a formatting function from there, and the HTML5 page has crased, due to it.
Thank you, again :)
That's quite a coincidence: I was just, by chance, reading about the Google Chrome Frame IE plugin that apparently allows you to use Webkit and the V8 JS engine in IE.
In the web page, we add the tag:
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
(Of course, Chrome Frame needs to be installed. If it's not, perhaps a redirection to an installer might be an option...)
As I said, I just happened to be reading about this a few minutes before I saw your question, so I don't know if this would be of any use to you (nor do I have experience using it).
Good luck!
the site link is http://www.kosfan.com (korean site)
in some web browser (IE 7 and 8), the site suddenly stop and turn off in not only main pages but also other pages.
i have tried to find the reason why it happens, but i cannot.
i thought that possible reasons are javascript error, onload(ready) function and ajax-load something like that.
is there any one who can solve this problem? help me!
thanks :)
I've had similar issues with IE and JQuery - it is definitely bug of the IE browser. You need to go debug the code and find where the crash happens. In my case it was a problem of accessing an element by id in JQuery way. When I replaced $("#id") for document.getElementById it stopped crashing :-)
I'm using a lot of JQuery in a web application that I am building for a client and I want to find an javascript implementation of a modal dialog that is reasonably stable across the following browser set.
IE 7+
FF 2+
Chrome and Safari
I've tried a couple of jQuery plugins but there always seems to be artifacts in one of these browsers.
--- Edit
jqModal seems to be more stable but I have an issue in IE7 where the dialog immediately disappears after popping up. I suspect a js event isn't being canceled or something. I'll have a bit more of a play.
I used jqModal few times and I'm very satisfied. It is pretty configurable yet very light weight.
Have you tried YUI? I'm not sure what the support is for Chrome but I've had good luck with it for IE and Firefox and allegedly it works with Safari.
We currently use BlockUI. It's awesome, in word. Can be styled via css (of course), blocks any element and seems stable, certainly in block IE and Firefox....
If you need a hand with it, post and I'll lend a hand...
http://www.malsup.com/jquery/block/
I went through a similar exercise, tried most of the plugins I could find. I used YUI for quite a while with good results; the only issue I ran into was resizing centered modals, which is quite an obscure use case.
I ended up with http://dev.iceburg.net/jquery/jqModal/ , I'm pretty happy with it.