/    Sign up×
Community /Pin to ProfileBookmark

Random position of multiple divs

Hi everyone…..

I am trying to have multiple divs load in random positions…… I have managed to get one div to work
I am not sure what to add to the javascript to make it work…..

this is my script below……


—————————————————————————————————

<html>
<head>
<title>
Random Start Position Test
</title>

<style>
#myobj {background-color:#cccccc;visibility:hidden;position:absolute}
</style>

<script>
// Cross Browser DOM
var aDOM = 0, ieDOM = 0, nsDOM = 0; var stdDOM = document.getElementById; if (stdDOM) aDOM = 1; else {ieDOM = document.all; if (ieDOM) aDOM = 1; else { var nsDOM = ((navigator.appName.indexOf(‘Netscape’) != -1) && (parseInt(navigator.appVersion) ==4)); if (nsDOM) aDOM = 1;}}
function xDOM(objectId, wS) { if (stdDOM) return wS ? document.getElementById(objectId).style: document.getElementById(objectId); if (ieDOM) return wS ? document.all[objectId].style: document.all[objectId]; if (nsDOM) return document.layers[objectId]; }

// More Object Functions
function setObjVis(objectID,vis) {var objs = xDOM(objectID,1); objs.visibility = vis;}
function moveObjTo(objectID,x,y) {var objs = xDOM(objectID,1); objs.left = x; objs.top = y;}

// Browser Window Size and Position
function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}
function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}
function posLeft() {return typeof window.pageXOffset != ‘undefined’ ? window.pageXOffset:document.documentElement.scrollLeft? document.documentElement.scrollLeft:document.body.scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != ‘undefined’ ? window.pageYOffset:document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop?document.body.scrollTop:0;}

// Random Position Script
var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()*
(pageHeight()-50));

function start() {var x = (posLeft()+xxx) + ‘px’; var y = (posTop()+yyy) + ‘px’; moveObjTo(‘myobj’,x,y); setObjVis(‘myobj’,’visible’);}
window.onload = start;
window.onscroll = start;
</script>
</head>
<body>
<div id=”myobj”>This is a web page object.</div>
</body>
</html>


—————————————————————————————————

I hope u can help!

ben

[url]www.d-e-p-i-c-t.com[/url]

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@ShampieFeb 20.2008 — <script>

function popp(){


for (i=0; i<10; i++){

var rndom_left = Math.round(Math.random() * 500) % 500;

var rndom_top = Math.round(Math.random() *
200) % 200;

document.write("<div id='coverup' class='cover' style='z-index:"+i+";position:relative;visibility:visible;left:"+rndom_left+"px;top:"+rndom_top+"px;width:50px;height:50px;color:red;'>Box:"+i+"</div>");}

}

</script>

<body >

<input type="button" name="Button" onclick="popp();" value="Plop" />

</body>

Do you mean something like that?
Copy linkTweet thisAlerts:
@benreynolds4authorFeb 20.2008 — cooll....

almost....

but it it just changes on the refresh of the page!

thanks....do you have any other tricks up your sleever??!??
×

Success!

Help @benreynolds4 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...