• 0

Firefox 3 flash replacement issue


Question

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....

post-141784-1213972821_thumb.jpg

post-141784-1213972911_thumb.jpg

Link to post
Share on other sites

14 answers to this question

Recommended Posts

  • 0
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.

Link to post
Share on other sites
  • 0
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......

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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?

Link to post
Share on other sites
  • 0
clonk

Not without seeing your scripts.

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

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

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

Link to post
Share on other sites
  • 0
Jesse Carlton
I have modified the javascript to simply write the following:

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

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....

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

It should actually read:

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

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.

Link to post
Share on other sites
  • 0
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:

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

(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.......

Link to post
Share on other sites
  • 0
The_Decryptor

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?

Link to post
Share on other sites
  • 0
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.....

Link to post
Share on other sites
  • 0
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;
}

Link to post
Share on other sites
  • 0
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!

Link to post
Share on other sites
  • 0
+mrbester

^ 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.

Link to post
Share on other sites
  • 0
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!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.