jquery.flash plugin not working in IE6 - javascript

I use jquery.flash() plugin to embed flash into my website. The problem is that in IE6 this doesn't work. I tried swfobject (1.5), also, but it gives me (sometimes) some strange errors with n null or something like that, so I decided to use jquery.flash() also. (I use both swfobject and jquery.flash() now)
So, basically, swfobject works but gives me that strange error sometimes (all browsers), so NOT all my flash banners work, and jquery.flash() WORKS in all other browsers, except IE6.
That's frustrating, really.
The website is infinitdev.ro/medlife/
Thanks in advance

Have you tried jQuery version of swfobject? You can grab it from http://jquery.thewikies.com/swfobject/ and it works out of the box. It implements swfobject 2.2 and I use it quite often. Maybe this will help you to embed flash on your website.

Related

JQuery Mobile and Firefox don't play well together?

Having some teething issues with jQuery Mobile. Was wondering if anybody else is experiencing a smattering of errors when they're using Firefox (desktop) and have the jQuery Mobile script includes in their <head> like so:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
In both Chrome and Firefox I get a host of CSS errors, which I presume are negligible. But in Firefox I get a couple of JS errors on top of that, which also seems to break my page (responsive elements not rendering like they would when I remove the jQuery Mobile script).
The JS errors:
Empty string passed to getElementById(). # http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js:11100
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. # http://code.jquery.com/jquery-1.9.1.js:3346
I know the errors seem pretty verbose, but I'm not familiar with bloaty javascript plugins and their policy on graceful degradation. Anyone else having this issue?
Update
As per Tim's answer, I've snapshotted evidence that these jQuery Mobile 'warnings' are actually effecting the page. Below is the page when I comment the jQuery Mobile script tags out:
And here is what the page looks like when the jQuery Mobile script tags are left in:
Note that the reason I wanted to use jQuery Mobile is purely for it's mobile touch/swipe events. I have no interest in adopting it's hash/ajax linking functionality.
What Firefox is giving you are warnings, not errors :)
Taking a look at the jQuery Mobile source :
// find present pages
var path = $.mobile.path,
$pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
hashPage = document.getElementById( hash );
Setting a breakpoint on that line using the Chrome Development Tools (Firefox and Firebug seemed unable to load the entire script), we can see that path.parseLocation().hash will be nothing when there is no hash in the URL, so document.getElementById( hash ) will throw the warning you saw in Firefox.
If it bothers you, you can turn off warnings in the Firefox Development Console, but if you're going to use jQuery Mobile I'm afraid the warning will be displayed for URL's with no hash. It isn't Firefox trying to tell you something IS wrong, it's just Firefox telling you something COULD be wrong, which is not true in this case.
Regarding the other warning, this discussion might be useful. It seems jQuery uses the deprecated getPreventDefault() for compatibility with Android 2.3.
Yes, jQuery Mobile does "mess with the DOM" when it's loaded. For example, jQuery Mobile will wrap your content in a "page" div:
Behind the scenes, the framework will inject the page wrapper if it's
not included in the markup because it's needed for managing pages
(Pages - jQuery Mobile Docs)
But you could see if it's the CSS or the Javascript that's breaking your site by including only one of the jQuery Mobile bits at a time.
I too am getting the same warning regarding the call to getElementById(), and I can confirm that it is just a warning and does not impact layout. I have asked specifically about getting rid this warning, but to no avail.
Finally, have you tried using jQuery Mobile's custom builder to get just the parts you are interested in (i.e. the touch features)?
My stuff often gets thrown out of format when using Firefox (many other small bugs too) If its just for testing, I suggest Google Chrome or Safari for best performance...

IE8 not loading jQuery 2.0 even though it's the first include and it's loaded from the same domain?

I have a page in which I use jQuery for damn nearly everything, thus I find it kind of problematic when jQuery won't load in IE8 (works fine in IE9 and, I presume, IE10).
I've tried all the usual trickery: putting jQuery at the top of the header and I am loading the file from the same site as I am trying to run. I always do these things, but now you know ;)
The IE8 console isn't to much help, as it just bangs on about stuff being undefined, and not having this and that property and method. All i can get out of it is that the jQuery file is being loaded (it finds errors in that too :/), but for same reason it isn't working.
If someone would be so kind as to have a look at it, this is a link to the actual page.
jQuery 2.0 completely dropped support for IE 8. You need to use 1.10.2 to support IE 6,7,8
They both currently have all the same features and functionality but 2.0 and up is smaller in KB due to dropping legacy code for IE and earlier.
60% of my visitors are on IE8 so I will be using v1.x for a long time
It's not surprising that this doesn't work, because jQuery v2 does not support IE8.
It says so very clearly on the jQuery site.
You need to use jQuery v1.x if you want to support IE8 or earlier.
(the functionality of v1.10 is identical to v2; the only difference is that v2 removes all the extra code they had in there to support old IE versions)

Javascript in IE8 very slow, IE7 + others fast using jQuery, jQuery UI, nyroModal

The page is rendered within an nyroModal (loaded via ajax) and the DOM is manipulated quite a bit using several plugins before actually showing the page.
Everything is fine in non-IE-Browsers and IE7, but in IE8 the resizable and draggable of an div is very slow and crawles along.
I know IE8 is slow. I know my DOM is big. I know i use a lot of plugins. My question is, what exactly slows it down, as other Browsers do it well?
I deactivated every plugin after each other to locate the culprit. Only having resizable activated it is still slow.
I used IE8 profiler and it says offset uses most of the time.
EDIT: I analyzed the page using dynaTrace AJAX Edition and it showes me that these 2 functions are responsible for the most exec time:
jQuery.fn.offset = function(options)
and
jQuery.expr.filters.hidden = function(elem)
both in jquery.js
i read somewhere that IE8 has problems with offset, but how can i circumvent this?
Edit2: I builded a test-page with just a link to open the page with all the resizing in a modal. works nice also in ie8 ! so i guess the big DOM of the modal-parent-page is the problem.
any advice appreciated!
Dynatrace has a very good javascript profiler. Check it out.
Check that your browser is not running in IE7 emulation mode.

Object Focus problem with Safari and Chrome browsers

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.

What is the most stable modal dialog implementation across browsers to use from javascript for a web app?

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.

Categories