Okay this is killing me, I can’t figure out what I’m doing wrong I have multiple divs which have a width of 350px and a height of 100px and I want to avoid them overlapping… This is the code I currently have but they are still overlapping, I don’t know what I’m doing wrong
<html>
<head>
<title>WebWall</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.timeliner{
width: 350px;
height: 100px;
background: #eeeeee;
border-radius: 4px;
background: #f8faf9; /* Old browsers */
background: -moz-linear-gradient(top, #f8faf9 0%, #c1cdcc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8faf9), color-stop(100%,#c1cdcc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* IE10+ */
background: linear-gradient(top, #f8faf9 0%,#c1cdcc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8faf9', endColorstr='#c1cdcc',GradientType=0 ); /* IE6-9 */
opacity: 0.9;
display: none;
position: absolute;
}
.timeline_title{
font-family: Arial;
font-weight: bold;
font-size: 18px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
}
.timeline_subtitle{
font-family: Arial;
font-weight: bold;
font-size: 13px;
color: #555555;
text-shadow: 0 1px 0 #ffffff;
}
.timeline_text{
font-family: Arial;
font-size: 12px;
color: #777777;
text-shadow: 0 1px 0 #ffffff;
}
</style>
<script type="text/javascript">
var vert_array = new Array();
var hori_array = new Array();
function getRandomizer(a,b) {
var y = (Math.floor( Math.random()* (1+b-a) ) ) + a;
var check = checky(y); // 200
if(check==1){
return y;
}
else{
getRandomizer(a,b);
}
}
function getRandomizerx(a,b) {
var x = (Math.floor( Math.random()* (1+b-a) ) ) + a;
var check = checkx(x); // 200
if(check==1){
return x;
}
else{
getRandomizer(a,b);
}
}
function checky(y){
for(var i = 0; i<=vert_array.length;i++){
if(y>=vert_array[i] && y<=vert_array[i]+100){
return 0;
}
else{
return 1;
}
}
}
function checkx(x){
for(var i = 0; i<=hori_array.length;i++){
if(x>=hori_array[i] && x<=hori_array[i]-350){
return 0;
}
else{
return 1;
}
}
}
function slide_in(div){
var y = getRandomizer(100, 600);
document.getElementById(div).style.top = y + "px";
document.getElementById(div).style.display="block";
vert_array.push(y);
var x = getRandomizerx(1, 1000);
hori_array.push(x);
$("#" + div).animate({
left: x + "px"
},1200);
}
function init(){
vert_array.push(100);
hori_array.push(1);
slide_in('timeline_1');
setTimeout("slide_in('timeline_2')",2000);
setTimeout("slide_in('timeline_3')",4000);
}
</script>
</head>
<body onload="javascript: init();" style="background: #111111; background-image: url('http://newevolutiondesigns.com/images/freebies/hd-wallpaper-8.jpg');">
<div id="timeline_1" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="http://i1.ytimg.com/i/H-_hzb2ILSCo9ftVSnrCIQ/1.jpg?v=4f457758">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
<br>
<div id="timeline_2" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="http://i2.ytimg.com/i/y1Ms_5qBTawC-k7PVjHXKQ/1.jpg?v=b1e249">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
<div id="timeline_3" class="timeliner">
<table width="100%" height="100%" cellspacing="0" cellpadding="0">
<tr valign="top">
<td style="padding: 10px; width: 80px;">
<div style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; position: absolute; top: 10px; height: 80px; width: 80px;"></div>
<img height="80" width="80" style="border-radius: 4px; box-shadow:inset 0 0 20px #000000; background: #333333;" src="img/f###.png">
</td>
<td align="left" style="padding: 12px;">
<span class="timeline_title"></span><br>
<span class="timeline_subtitle"></span><br>
<span class="timeline_text"></span>
</td>
</tr>
</table>
</div>
</body>
the function init() gets called when the page loads
You’re right that first solution didn’t work. I thought it was a quick fix but… no. This should work though.
http://jsfiddle.net/fWP2u/1/