September 28, 2007

jQuery and SWFObject conflict

I experienced some strange behaviour today when building a site which was using jQuery and SWFObject. Our Flash files were loading ok and 99% of the javascript (using jQuery) was working fine.

The problem was found only in IE (sound familiar?) with the following code:

$(document).ready(function(){

	$('#submitButton').click(function(){

When the ‘submitButton’ was clicked, this function was not firing in IE. After some googling I found that there is a slight conflict with jQuery and SWFObject. I tested this and found the problem in jQuery 1.1.x and 1.2.1.

I found the fix on the SWFObject forums which is basically using jQuery to load the .swf:

<script type="text/javascript">
	$(document).ready(function(){
		var so = new SWFObject("movie.swf", "mymovie", "400", "100%", "8", "#336699");
		so.addParam("quality", "low");
		so.addParam("wmode", "transparent");
		so.addParam("salign", "t");
		so.write("flashcontent");
	});
</script>

All good in all browsers :)

© Michael Sharman 2017