PDA

Click to See Complete Forum and Search --> : Layers Random Position

zebdaag
12-03-2003, 03:36 AM
Hi I wanted to let my layers show on random positions i tried something like this but it didn't work.

A = (math.Random() * 100);
B = (math.Random() * 300);

and then

<div id="Layer" style="position:absolute; left:+A+; top:+B+; width:176px; height:168px; z-index:1">
<p>Layer 1</p>

How could I make this work
Pittimann
12-03-2003, 03:53 AM
Hi!

Please try something like the following:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
<!--
function positionLayer(){
var a = Math.round((Math.random() * 100));
var b = Math.round((Math.random() * 300));
Layer1.style.left=a+'px';
Layer1.style.top=b+'px';
}
//-->
</script>
</head>
<body onload="positionLayer()">
<div id="Layer1" style="position:absolute; left:0; top:0; width:176px; height:168px; z-index:1">
<p>Layer 1</p>
<div>
</body>
</html>

Cheers - Pit
zebdaag
12-03-2003, 03:57 AM
works great thank you
Pittimann
12-03-2003, 04:20 AM
You're welcome ;)!!
fredmv
12-03-2003, 12:54 PM
Just as a note, the code provided above will only work correctly in IE since it pollutes the global namespace with all elements assigned an id attribute. To properly access the elements you should use the document.getElementById method or any similar ones (such as document.getElementsByTagName, etc.). That script would ideally look something like this:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
onload = function()
{
with(document.getElementById('foo').style)
{
top = Math.floor(Math.random()*500) + 'px';
left = Math.floor(Math.random()*500) + 'px';
}
}
//]]>
</script>
</head>
<body>
<div id="foo" style="position: absolute; height: 100px; width: 100px; background-color: #f00;">
&amp;nbsp;
</div>
</body>
</html>
Pittimann
12-03-2003, 01:16 PM
Hi!

Excellent, fredmv! I have to admit that - because the majority of advices here are not cross browser compatible - I don't care enough about that compatibility.

One of the browsers in which I test my own things is NS 4.7 (not because I love it - I just know, that it is still used by a considerable number of people). As far as NS 4.7 is concerned - your version doesn't work either.

Please don't take this as something like "Pit made a mistake and he has to tell fredmv, that his stuff is at least not perfect"!

I honestly would like to get things running everywhere and I'm learning a lot here even without posting own threads...

Cheers - Pit
fredmv
12-03-2003, 01:21 PM
Yeah, I'm just trying to provide a generally more compatible way. Mine should work in all version 5+ browsers where yours would only work under IE. I'm aware it fails in Netscape 4.x simply because it doesn't support document.getElementById (or generally any other DOM functions, for that matter).