Question posted by: gene
(Guest)
on
July 20th, 2005 04:26 PM
I have some javascript code that displays random images in random
places on the page by making changes to the document's css. This
works in Safari and IE, but I can't get it to work on Mozilla. Using
the javascript debugger, it seems that everything is working at that
end, so I wonder if the problem is mozilla/css related. The live page
is at
http://www.smalltime.com/exhibitions/washanddry
Here is the relevant html and javascript code:
<head>
<script src="bubble.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
..bubbles { position: relative; top: 0; left: 0; z-index: 0; }
-->
</style>
</head>
<body onLoad="set_up();bubble();" onclick="bubble();">
<div id="div_1_1" class="bubbles"><img name="image_1_1"
src="bkgd/pixel.gif"></div>
<div id="div_2_1" class="bubbles"><img name="image_2_1"
src="bkgd/pixel.gif"></div>
<div id="div_1_2" class="bubbles"><img name="image_1_2"
src="bkgd/pixel.gif"></div>
<div id="div_2_2" class="bubbles"><img name="image_2_2"
src="bkgd/pixel.gif"></div>
<div id="div_3_2" class="bubbles"><img name="image_3_2"
src="bkgd/pixel.gif"></div>
<div id="div_1_3" class="bubbles"><img name="image_1_3"
src="bkgd/pixel.gif"></div>
<div id="div_2_3" class="bubbles"><img name="image_2_3"
src="bkgd/pixel.gif"></div>
<div id="div_3_3" class="bubbles"><img name="image_3_3"
src="bkgd/pixel.gif"></div>
<div id="div_4_3" class="bubbles"><img name="image_4_3"
src="bkgd/pixel.gif"></div>
</body>
</html>
bubble.js:
function bubble() {
var div_name;
var s;
var i;
for (i=0; i < img_3.length; ++i) {
div_name = "div_" + (i+1) + "_3";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-3;
document.images[5+i].src=img_3_set[i];
}
for (i=0; i < img_2.length; ++i) {
div_name = "div_" + (i+1) + "_2";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-2;
document.images[2+i].src=img_2_set[i];
}
for (i=0; i < img_1.length; ++i) {
div_name = "div_" + (i+1) + "_1";
s = getStyleObject(div_name);
s.top = Math.round(h*Math.random()) + "px";
s.left = Math.round(w*Math.random()) + "px";
s.zIndex=-1;
document.images[i].src=img_1_set[i];
}
}
function getStyleObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
}
return false;
}
|
|
July 20th, 2005 04:26 PM
# 2
|
Re: Can't get javascript/css random image placement to work in Mozilla
gene wrote:
[color=blue]
>I have some javascript code that displays random images in random places on the page by making changes to the document's css. This works in Safari and IE, but I can't get it to work on Mozilla.
>[/color]
<snip>
[color=blue]
> s.zIndex=-3;
> s.zIndex=-2;
> s.zIndex=-1;
>[/color]
Unfortunately negative zIndexes are currently invisible in Mozilla :-(
--
Warning: May contain traces of nuts.
|
|
|
July 20th, 2005 04:27 PM
# 3
|
Re: Can't get javascript/css random image placement to work in Mozilla
Neil <neil@parkwaycc.co.uk> wrote in message news:<bno3k7$sgu1@ripley.netscape.com>...[color=blue]
> gene wrote:
>[color=green]
> >I have some javascript code that displays random images in random places on the page by making changes to the document's css. This works in Safari and IE, but I can't get it to work on Mozilla.
> >[/color]
> <snip>
>[color=green]
> > s.zIndex=-3;
> > s.zIndex=-2;
> > s.zIndex=-1;
> >[/color]
> Unfortunately negative zIndexes are currently invisible in Mozilla :-([/color]
I see. I stumbled on the negative zindexes after the positive values
didn't appear to be positioning things correctly. I guess I'll have
to resort to a browser detection hack for this. Thanks!
