Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 05:26 PM
gene
Guest
 
Posts: n/a
Default Can't get javascript/css random image placement to work in Mozilla

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;
}
  #2  
Old July 20th, 2005, 05:26 PM
Neil
Guest
 
Posts: n/a
Default 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.

  #3  
Old July 20th, 2005, 05:27 PM
gene
Guest
 
Posts: n/a
Default 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!
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles