Menu
Community /Pin to ProfileBookmark
@cootheadNov 28.2010 — #Hi there Charlie Penrose,
and a warm welcome to these forums. ?
Does this example help...
[i]coothead[/i]@cootheadOct 31.2011 — #Hi there HugoH,
and a warm welcome to these forums. ?
You must be a silly webpage aficionado. ?
I trust that the following code will bring a little smile to your face. ?
[i]coothead[/i]
Random Div Placement…
Hello,
I wonder if anyone could help me – I’m a bit lost. I’m trying to use Javascript to place a Div box randomly on a page. I think I just want to use Javascript to alter the ‘top’ and ‘left’ settings of the div tag in the CSS… Could anyone tell me how to do this please?
Many thanks!
Charlie
Sign in
to post a comment7 Comments(s) ↴
0
@cootheadNov 28.2010 — #Hi there Charlie Penrose,and a warm welcome to these forums. ?
Does this example help...
[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>random positioned box</title>
<style type="text/css">
html {
height:100%;
}
body {
background-color:#f93;
}
#randomBox {
width:322px;
height:198px;
border:1px solid #000;
background-color:#f00;
}
.pstn {
position:absolute;
z-index:99;
}
</style>
<script type="text/javascript">
function init(){
var obj=document.getElementsByTagName('html')[0];
var obj1=document.getElementById('randomBox');
var w=obj.offsetWidth;
var h=obj.offsetHeight;
var l=Math.floor(Math.random()*w);
var t=Math.floor(Math.random()*h);
if(l>w-obj1.offsetWidth){
l=w-obj1.offsetWidth;
}
if(t>h-obj1.offsetHeight){
t=h-obj1.offsetHeight;
}
obj1.style.left=l+'px';
obj1.style.top=t+'px';
obj1.className='pstn';
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div id="randomBox">
</div>
</body>
</html>
[/color][i]coothead[/i]
0
@cootheadOct 31.2011 — #Hi there HugoH,and a warm welcome to these forums. ?
You must be a silly webpage aficionado. ?
I trust that the following code will bring a little smile to your face. ?
[color=navy]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>randomly positioned boxes</title>
<style type="text/css">
html,body {
height:100%;
margin:0;
overflow:hidden;
background-color:#ccc;
}
#randomBox1,#randomBox2,#randomBox3,
#randomBox4,#randomBox5,#randomBox6 {
width:322px;
height:198px;
border:1px solid #000;
background-color:#f00;
border-radius:15px;
box-shadow:#000 10px 10px 30px;
}
#randomBox2 {background-color:#0f0;}
#randomBox3 {background-color:#00f;}
#randomBox4 {
line-height:198px;
background-color:#f0f;
margin:20px auto;
text-align:center;
}
#randomBox5{background-color:#ff0;}
#randomBox6{background-color:#0ff;}
.pstn {
position:absolute;
}
.non-mover{
position:relative;
}
</style>
<script type="text/javascript">
var speed=1200;
var l=[];
var t=[];
var obj,w,h,c; <br/>
var objs=document.getElementsByTagName('div');
var bit=30;
function init(){
obj=document.getElementsByTagName('html')[0];
w=obj.offsetWidth;
h=obj.offsetHeight;
for(c=0;c<objs.length;c++){
if(objs[c].className=='non-mover'){
objs[c].style.zIndex=Math.floor(Math.random()*w)/2;}
if(objs[c].className!='non-mover'){
l[c]=Math.floor(Math.random()*w);
t[c]=Math.floor(Math.random()*h);
objs[c].style.zIndex=Math.floor(Math.random()*w);
if(l[c]>=w-objs[c].offsetWidth){
l[c]=w-objs[c].offsetWidth-bit;
}
if(l[c]<=0){
l[c]=0+bit;
}
if(t[c]>=h-objs[c].offsetHeight){
t[c]=h-objs[c].offsetHeight-bit;
}
if(t[c]<=0){
t[c]=0+bit;
}
objs[c].style.left=l[c]+'px';
objs[c].style.top=t[c]+'px';
objs[c].className='pstn';
}
}
setTimeout(function(){init()},speed);
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
</script>
</head>
<body>
<div id="randomBox1"></div>
<div id="randomBox2"></div>
<div id="randomBox3"></div>
<div id="randomBox4" class="non-mover">this is a non mover</div>
<div id="randomBox5"></div>
<div id="randomBox6"></div>
</body>
</html>
[/color][i]coothead[/i]