random start position of multiple elements

marinedel · 06-16-2010, 06:45 PM

hi,

I am now building my website as a final project for my year. I am doing graphic design, so the website is actually some kind of portfolio. The idea of this website (which is not yet online) is this : it is some kind of big pasteboard on which i will display all the work i have done in my academy since a couple of years. The pasteboard is at the moment a background image/color field of given dimension (i figure that was the only way to do what i wanted...see further)

Every works/image load on a random place and then can be dragged, and dropped (this part i already figured out). At the moment, every image (for every project), is inside a <div>.

What i need help for is this:
at the moment, my function successfully load 1 element at random position.
I now want this function to work separately, for every <div>, so that every image is randomly placed on load, on the background image (and not the browser window, which is smaller).

Here is the code i have for the moment (sorry for the mess, i really am just beginning! and truely, i don't get half of this, i just know it is working at the moment):

Code:

<head>

	<!--// function random start position-->
<script>

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;// JavaScript Document

</script>
</head>

<body bgcolor="#9A9B95" background="../website/background.jpg">


<div id="myobj" style="position:absolute" >
	<img src="oblique strategies holes.jpg" width="595" height="842" style="position:absolute" class="dragme"/>
</div>

<div id="div2">
  <img src="oblique strategies choices.jpg" width="842" height="595" style="position:absolute" class="dragme" />
</div>

</body>

now, what i really want is this function to work for every <div>

but i know there are also some flaws (that i'm unfortunately unable to fix myself):
the integers "230 and 50" in the "random position script" should be replaced byt the width and heigh of the image/div (so i guess i should find a function that can get those numbers, name them "ImgWeidth" and "ImgHeigh" so that those integer can be called in this "random position" function.
also, once the div 'myobj' is loaded, randomly, it behaves like if position=fixed (so stays on the spot when i scroll down the window). I think this is because it calculates the position according to the browser window and not my background. this has be fixed, because i don't want all my images to load only in the browser window (but on the whole pasteboard/background image).

well, i guess this is already 3 questions in one. so i will let it like that for the moment. Sorry if i'm saying too much/not enough... beginners mistake!:confused:

thanks in advance for any help you will give me!