Skip to main content
GameDev.net gamedev.net
🔒 Locked

[web] JavaScript/CSS : Doesn't work in firefox?

Started by OrangyTang Jul 5, 2004 at 12:48 PM 24 replies 5k views
Original Post
OrangyTang
OrangyTang
This little test thing I've been experimenting on works fine in Opera where I've been testing it on, and identically in IE(5 and 6). Yet Firefox just shows a load of static images. :( I have no idea really what I'm doing wrong, I'm sure its a bug in my own code rather than Firefox, but I don't use it regularly so I'm not very familiar with it. Anyone any pointers on how to figure out whats not working?
igni ferroque
igni ferroque
Download the full Mozila and use the &#106avascript debugger.<br><br>(... and this belongs in the Web Development forum)
Free Mac Mini (I know, I'm a tool)
Kylotan
Kylotan
I can confirm that it does exactly the same thing in Konqueror as it does in Firefox 0.8, both in Linux. I'm guessing you're using some IE-specific aspects of the object model, but who knows.

Oh, and it seems to consume all the CPU time in both cases. Might want to see if that can be changed with longer timeouts, perhaps? :)
markr
markr
It's not at all clear why it doesn't work in Mozilla / gecko.

You aren't using any IE-specific DOM things, so I guess it's something to do with CSS. It seems that the elements which are supposed to move, stay still. Interestingly, the z-order of them changes occasionally, so perhaps that works.

I'm guessing here - but it is only a guess - that somehow the method that you're using to position the elements is wrong. But it looks right to me when I visually inspected the code.

o.style.left and o.style.top is a valid way to position elements in Mozilla.

Another possibility, is that somehow the elements which are supposed to be absolute positioned, in fact aren't. Although this seems unlikely as they appear on top of one another.

I suppose another possibility is that there's a subtle &#106avascript language difference, which is causing the maths to fail and all the objects to appear at 0,0 (as they seem to be sometimes)<br><br>Mark
evolutional
evolutional
Running it through a CSS Validator reports an error.

Quote:

Line: 115
File not foundhttp://www.orangytang.net/Test/style.css: Not Found


Perhaps it's this?
botman2
botman2
Yeah this is what I get when I open the Edit CSS plug-in.

/**** Imported style sheet style.css ****/<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"><HTML><HEAD><TITLE>404 Not Found</TITLE></HEAD><BODY><H1>Not Found</H1>The requested URL /Test/style.css was not found on this server.

Additionally, a 404 Not Founderror was encountered while trying to use an ErrorDocument to handle the request.


<ADDRESS>Apache/1.3.29 Server at www.orangytang.net Port 80</ADDRESS></BODY></HTML>/**** Inline STYLE-tag style sheet ****/ /* @import url(style.css); */ #origin { position: absolute; left: 200px; top: 200px; } #planet { position: absolute; } #moon { position: absolute; } #dust1 { position: absolute; } #dust2 { position: absolute; } #dust3 { position: absolute; } #comet { position: absolute; } #dualO { position: absolute; } #dual1 { position: absolute; } #dual2 { position: absolute; }



Edit: Oops, I thought it might be that Firefox is case sensitive when it comes to importing the stylesheet (It's style.css, not style.css), but that doesn't seem to be it...

[Edited by - botman2 on July 5, 2004 9:58:10 PM]
MrPoopypants
MrPoopypants
I have a feeling it is the < div > tags that are screwing things up... Firebird has always been a little screwy when it comes to formatting like that.


Anyway, that is an incredible piece of &#106avascript work there. I've been trying to do stuff like that in &#106avascript but that just blows everything I have done right out of the water. That is by far the coolest piece of &#106avascripting I have ever seen!
(0110101101000110)The Murphy Philosophy: Smile . . . tomorrow will be worse.
botman2
botman2
Thanks for the tip about case sensitivity.

Nay about it being a problem with the include though. If you download all the files and run it on your computer you get the same problem even if you remove the include altogether. The included stylesheet does nothing anyway (it defines two P-tags).

OrangyTang
OrangyTang
Ooo, gamedev got a web dev forum, neat. Thanks for moving the topic. :)

I think its fair to rule out the case change for the CSS, the case got changed somehow when FTPing it to the sever, but it was correct on my local machine (which doesn't work in Firefox). Removing the import still doesn't get anything working on Firefox. Equally I don't think theres anything IE specific (especially as it works in Opera).

As markr said, the z-order changes so the scripting is being executed, but the positioning seems to fail. The bit of code for movement:
				for (i=0; i<objects.length; i++)				{					var o = objects;										var angleRad = angles*Math.PI /180;										var x = Math.cos(angleRad) * radiusX;					var y = Math.sin(angleRad) * radiusY;										y += x * axisTilt;										if (parent != -1)					{						x += (size[ parent ] / 2);						y += (size[ parent ] / 2);					}											o.style.left = Math.round(originX + x - (size/2) );					o.style.top = Math.round(originY + y - (size/2) );										if (angles > 180)					{						o.style.zIndex = -1;					}					else					{						o.style.zIndex = 1;					}										angles += speed;					if (angles > 360)						angles -= 360;				}

o.style.zIndex works, but o.style.left doesn't. The position values do stray into negative sometimes, but I don't see why that should be a problem. Anyway, even while positive there should be some kind of movement rather than the current results.

I'm going to try and distil it to a really simple test case and see how that works in Firefox, but there isn't really any complex stuff that I expect will make a difference. And yes, it probably does need a smaller timestep for slower computers. :)
OrangyTang
OrangyTang
Hmm, a much simplified version still doesn't do any movement in Firefox.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>	<head>		<title>Orbit test</title>				<script type="text/javascript">			var animateSpeed = 10; <!-- Delay in millis between frames -->						var x = 10;			var y = 10;						function startAnimation()			{				animate();			}						function animate()			{				o = document.getElementById('comet');								o.style.left = x++;				o.style.top = y++;								setTimeout('animate()', animateSpeed);				return;			}		</script>				<style type="text/css" media="screen">						#origin			{				position: absolute;				left: 200px;				top: 200px;			}						#comet			{				position: absolute;				left: 10px;				top: 10px;			}		</style>	</head>	<body onload="startAnimation()">			
<img src="origin.gif" />
<img src="comet.gif" />
</body></html>

It really doesn't get any simpler than that.
nate0326
nate0326
Even though it doesn't work in firebird, it still looks very cool. Good work!
osto
osto
i think its css absolute that's creating the problem. O__O
Jason Zelos
Jason Zelos
Absolute is only absolute to the containing block. IE moon is absolute to planet not to body. Used fixed instead for true absolute.

Jay

Edit: Although I'm not sure thats what you need.
OrangyTang
OrangyTang
I think absolute is what I need - its deliberatly written so that the hirarcy of bodys affects their orbits.

Eg. the main planet has one orbit, then the moon orbits around it, effectivly using 'absolute' to have its own coordinate system relative to its parent body. Besides, last I heard 'fixed' was broken in IE to the point of being unusable.

I'm not quite sure what the difference between absolute and relative is though. Perhaps I really need relative positioning?
Jason Zelos
Jason Zelos
relative *should* reserve its normal position for other elements but using left and right etc 'float' overtop of them (offset values). I wish I could kick whomever named these things.

Static is 'Normal', for what thats worth [smile].

Jay

Kylotan
Kylotan
I've tried for the last hour to work out what on earth is going wrong here, but have had no luck.

Maybe you should post on the Firefox forum and see if any of the knowledgeable people there can shed any light on the matter.
OrangyTang
OrangyTang
Someone on the Firebird forums pointed me at the answer - apparently I need to specify the units when setting the new position, so the new code becomes
o.style.left = x + 'px';


That seems rather unintuitive to me, as I've already set an initial position and units with the object ids. Even the &#106avascript console was blank where you'd expect it to chuck out an error.<br/><br/>Although firefox also seems to choke now on negative z-indexes (only sometimes though), at least it moves. :)
Jason Zelos
Jason Zelos
Hmmm, would not have throught of that. Still I suppose it gives you the ability to go from points to percent.

You live and learn....

Very nice script, it would make a good tutorial on how different CSS display elements interact, not to mention DOM.

Jay
Kylotan
Kylotan
Quote:
Original post by OrangyTang
Someone on the Firebird forums pointed me at the answer - apparently I need to specify the units when setting the new position, so the new code becomes
o.style.left = x + 'px';


That seems rather unintuitive to me, as I've already set an initial position and units with the object ids. Even the &#106avascript console was blank where you'd expect it to chuck out an error.<!--QUOTE--></td></tr></table></BLOCKQUOTE><!--/QUOTE--><!--ENDQUOTE--><br><br>Glad you got it working at last! This makes me wonder whether that's a bug in Firefox's implementation of the CSS spec, or whether it's a valid interpretation of the DOM standard, or something else entirely.</td></tr></table></blockquote>

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.

Sign in to reply to this topic.