Firefox 3 flash replacement issue

[markyis_cool]

Right, initially I developed a piece of javascript which finds every H2 element on a page and replaces it with Flash.

The first thing it does is use getElementsByTagName then replaces its content with the Flash dynamic titles.

See http://0100.tv/portfolio/ for the preview of the javascript. I have attached a screenshot of my friends FF2 (goddum.JPG) and a screenshot in my FF3 (ff3.jpg) which shows you the issue.

A direct link to my JS is http://0100.tv/js/functions.js and starts within the jquery document.ready function. I have also tried using this without jquery (body onload) as well as removing all the params.

If I try to replace the H2 elements with things such as images and text it works without an issue. There is only a problem with flash.

Thanks for any help on this matter! Tearing my hair out!

P.s this may be the incorrect forum, it is client side but it's also possibly programming....

[clonk]

I recommend you check sifr out. http://novemberborn.net/sifr3

Solves the exact same problem you are attempting to with your flash replacement, but you don't need to worry about maintaining it. (And I can confirm its working fine in FF3).

In regards to your problem at hand, if you are styling object or embed tags, you may be seeing a side effect of those cascading onto the replacement flash. Try using position:relative; and some high z-index to see if they pop out at you.

[markyis_cool]

I recommend you check sifr out. http://novemberborn.net/sifr3

Solves the exact same problem you are attempting to with your flash replacement, but you don't need to worry about maintaining it. (And I can confirm its working fine in FF3).

In regards to your problem at hand, if you are styling object or embed tags, you may be seeing a side effect of those cascading onto the replacement flash. Try using position:relative; and some high z-index to see if they pop out at you.

Thanks for that, I will give it a go. I'd rather use my own stuff. jQuery is the only third party script I have used, and that was because it's awesome to use. It's my own flash titles script and obviously my own javascript. It's just an issue I decided needed a second impression, as I started running out of ideas.

Just to add as well, when I remove the CSS (in FF) no Flash shows up still......

[clonk]

I looked at the site myself and I am wondering if the non-display has to do with the way your are writing your object tags, perhaps there is something about them that FF3 is not understanding.

[markyis_cool]

I have modified the javascript to simply write the following:

var insideElem = "<object data='/portTitle.swf?titleParam="+elements[i].innerHTML+"' type='application/x-shockwave-flash' height='25' width='330'></object>";

Theoretically it should just write the object (with no params or anything). But this still doesn't work.

I then used Firefox's "view selection source" by highlighting the area the flash should be.

Instead of getting the above code it crashes at the type="application/x-shockwave-flash" which is strange....

<h2><object height="25" width="330" data="/portTitle.swf?titleParam=Our design Portfolio" type="application/x-shockwave-flash"/></h2>

It should actually read:

<h2><object height="25" width="330" data="/portTitle.swf?titleParam=Our design Portfolio" type="application/x-shockwave-flash" height='25' width='330'></object></h2>

Any idea why it stops there?

[clonk]

Not without seeing your scripts.

I can confirm that FF3 was not liking those <params>. I got this bit of code to work:

<object height="25" width="290" type="application/x-shockwave-flash" data="http://www.0100.tv/portTitle.swf?titleParam=PH Solutions">
	<param name="movie" value="http://www.0100.tv/portTitle.swf?titleParam=PH Solutions"/>
	<div>PH Solutions</div>
</object>

(you wouldn't need the absolute path, i just needed that to test).

[Jesse Carlton]

I have modified the javascript to simply write the following:

var insideElem = "<object data='/portTitle.swf?titleParam="+elements[i].innerHTML+"' type='application/x-shockwave-flash' height='25' width='330'></object>";

Theoretically it should just write the object (with no params or anything). But this still doesn't work.

I then used Firefox's "view selection source" by highlighting the area the flash should be.

Instead of getting the above code it crashes at the type="application/x-shockwave-flash" which is strange....

<h2><object height="25" width="330" data="/portTitle.swf?titleParam=Our design Portfolio" type="application/x-shockwave-flash"/></h2>

It should actually read:

<h2><object height="25" width="330" data="/portTitle.swf?titleParam=Our design Portfolio" type="application/x-shockwave-flash" height='25' width='330'></object></h2>

Any idea why it stops there?

It's not stopping it there, it's just rearranging the attributes, and getting rid of the extraneous end tag.

[markyis_cool]

I looked at the site myself and I am wondering if the non-display has to do with the way your are writing your object tags, perhaps there is something about them that FF3 is not understanding.

Not without seeing your scripts.

I can confirm that FF3 was not liking those <params>. I got this bit of code to work:

<object height="25" width="290" type="application/x-shockwave-flash" data="http://www.0100.tv/portTitle.swf?titleParam=PH Solutions">
	<param name="movie" value="http://www.0100.tv/portTitle.swf?titleParam=PH Solutions"/>
	<div>PH Solutions</div>
</object>

(you wouldn't need the absolute path, i just needed that to test).

The thing is I removed all of the <params>, to see if anything appeared, and it changed nothing.

All the code is situated above.

I also tried the test and it worked fine on a test document (http://0100.tv/test.html). I know it's not viewable but if you right click you will eventually find it. It should output exactly the same but it doesn't.

It's a very strange problem.......

[The_Decryptor Veteran]

The whole div seems to be pushed down too far.

#portLeft {
		width: 150px;
		float: right;
		margin-top: 35px;
}

Fixed it for me, but that'll probably look wrong in other things.

What padding/margins are you applying to the <object> tag?

[Marcel T]

Hmm, you're not using Firebug already?

[markyis_cool]

The whole div seems to be pushed down too far.

#portLeft {
		width: 150px;
		float: right;
		margin-top: 35px;
}

Fixed it for me, but that'll probably look wrong in other things.

What padding/margins are you applying to the <object> tag?

I don't believe I am adding any padding/margins to the object tag.

As I said before, when removing the CSS the Flash doesn't even seem to appear on the page.

Hmm, you're not using Firebug already?

The easiest way to see the issue is removing all the styles

I am using the web developer plugin for firefox to remove any style applied to the page.

If I modify the CSS using the web developer toolbar and simply change it to

body {
	background-color: #000000;
}

Theoretically, if the flash was being rendered I should be able to see the flash on the page (as it's white text). It should appear like in the second screenshot in my original post....

I appreciate all your help too but I believe this to be something other than a CSS issue, and more a browser rendering issue.....

[Marcel T]

Yeah, I'd agree it's not a CSS issue, I have a feeling it's the way you're constructing and injecting the HTML. Why don't you construct the DOM element "properly"?

Also, try chucking this in your CSS to see how the object elements stack up.

object {
	padding: 20px;
	display: block;
	visibility: visible;
	background-color: #333;
}

[markyis_cool]

Yeah, I'd agree it's not a CSS issue, I have a feeling it's the way you're constructing and injecting the HTML. Why don't you construct the DOM element "properly"?

Also, try chucking this in your CSS to see how the object elements stack up.

object {
	padding: 20px;
	display: block;
	visibility: visible;
	background-color: #333;
}

That did nothing lol Firefox fails to render the flash at all.

Having said that I have just cracked the problem.

According to W3C standards, XHTML 1.1's Mime type should be served as application/xhtml+xml. I was serving up the page as application/xhtml+xml using this little piece of PHP:

header("Vary: Accept");
if (stristr($_SERVER["HTTP_ACCEPT"], "application/xhtml+xml") or stristr($_SERVER["HTTP_USER_AGENT"], "W3C_Validator")) {
	header("Content-Type: application/xhtml+xml; charset=utf-8");
}
else {
   header("Content-Type: text/html; charset=utf-8");
}

Which for those of you who understand the code was displaying the page as text/html to IE and application/xhtml+xml to the W3C validator and Firefox. This was causing an issue with Firefox (which ends up getting complex into the DOM). After removing the PHP the flash renders but I receive the warning from the validator here.

A real ball ache I think you will agree, and if anyone read all that, thanks!

[+mrbester MVC]

^ Then don't send it as XHTML1.1 when XHTML 1.0 Strict is adequate.

The act of sending XHTML1.1 as text/html is non-compliant tag soup. The act of sending XHTML1.0 as text/html is compliant.

When a page is sent as application/xhtml+xml there are distinct changes in the DOM which make it tricky to use jQuery to insert content. This is because jQuery works in a more HTML-y way than a XML-y way.

[markyis_cool]

^ Then don't send it as XHTML1.1 when XHTML 1.0 Strict is adequate.

The act of sending XHTML1.1 as text/html is non-compliant tag soup. The act of sending XHTML1.0 as text/html is compliant.

When a page is sent as application/xhtml+xml there are distinct changes in the DOM which make it tricky to use jQuery to insert content. This is because jQuery works in a more HTML-y way than a XML-y way.

The thought has crossed my mind. Because I had been using 1.1 Strict from the start, I initially never thought the application/xhtml+xml whould be a problem with injecting the flash (as Firefox 2 seems to disregard the problem) but I may change this as it's not currently necessary to use 1.1.

Thanks for your help. I guess Firefox 3 is even more of a standards compliant browser. Good stuff!