Random position of multiple divs

benreynolds4 · 02-20-2008, 01:46 PM

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.scroll Left? document.documentElement.scrollLeft:document.body. scrollLeft? document.body.scrollLeft:0;}
function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scroll Top? 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

d-e-p-i-c-t dot com

02-20-2008, 01:46 PM	#1
benreynolds4 New Member Join Date: Feb 2008 Posts: 13	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.scroll Left? document.documentElement.scrollLeft:document.body. scrollLeft? document.body.scrollLeft:0;} function posTop() {return typeof window.pageYOffset != 'undefined' ? window.pageYOffset:document.documentElement.scroll Top? 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 d-e-p-i-c-t dot com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode