How can change div, span etc position randomly ?
How can change div, span etc position randomly ?
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Welcome to Notizza</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js”></script>
<style>
.tip1 {
width:44px;
height:30px;
vertical-align:middle;
text-align:center;
font-weight:bold;
color:#222;
line-height:30px;
padding-right:6px;
background:url(../images/bubble1.png) 0 0 no-repeat;
z-index:100;
margin-top:5px;
}
.toolTip {
position: relative;
}
.toolTip a {
text-decoration: none;
text-align: center;
}
.toolTip .alt {
display: none;
}
.toolTip a:hover ~ .alt {
display: inline;
padding: 6px;
margin: 0px;
margin-top: 5px;
color: #222;
font: 13px Arial, sans-serif;
font-weight: bold;
line-height:;
border-top: 1px solid #dde1e7;
text-align: center;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .3);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;
-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.5), 0px 2px 5px 0px #fff;
background: #f1f1f1;
background: -moz-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f1f1), color-stop(100%, #d2d2d2));
background: -webkit-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
background: linear-gradient(top, #f1f1f1 0%, #d2d2d2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f1f1f1′, endColorstr=’#d2d2d2′, GradientType=0 );
font-weight: normal;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:225px;
display:block;
}
.tip1 .toolTip a:hover ~ .alt {
color: #000;
text-shadow: 1px 1px 0px rgba(255, 255, 255, .3);
background: #ff9900;
background: -moz-linear-gradient(top, #fdcd86 0%, #ff9900 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdcd86), color-stop(100%, #ff9900));
background: -webkit-linear-gradient(top, #fdcd86 0%, #ff9900 100%);
background: -o-linear-gradient(top, #fdcd86 0%, #ff9900 100%);
background: -ms-linear-gradient(top, #fdcd86 0%, #ff9900 100%);
background: linear-gradient(top, #fdcd86 0%, #ff9900 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fdcd86′, endColorstr=’#ff9900′, GradientType=0 );
}
.alt:hover{
display:none;
}
</style>
<script language=”javascript”>
$(document).ready(function() {
$(“.tip1”).each(function() {
var numRand = Math.floor(Math.random()*180);
$(this).css({‘margin-left’: numRand});
});
});
</script>
</head>
<body>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>323</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>100</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>100</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>90</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>80</a>
<span clas
s=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
s=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>80</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>50</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
<div class=”tip1″>
<div class=”toolTip”>
<a href=”#”>50</a>
<span class=”alt”>Share the link jmkjikmnbjk bkjbkjdsbs, djkdddbkjcb </span>
</div>
</div>
</body>
</html>
