Hi,
Shuffle div in jquery
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.span1
{
width: 228px;
background-color: #2D89EF
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span2
{
width: 228px;
background-color: #00A300
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span3
{
width: 228px;
background-color: #FFC40D
!important;
height: 63px;
float: left;
cursor: pointer;
}
.span3:hover
{
cursor: pointer;
}
.place-right
{
float: right !important;
margin-left: 10px;
}
.fg-color-white
{
color: #FFFFFF !important;
}
</style>
<script src="Scripts/jquery-1.8.3.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
shuffle();
});
function shuffle() { //
pass the divs to the function
var e = $('#shuffle div');
var replace = $('<div>');
var size = e.size();
while (size >= 1) {
var rand = Math.floor(Math.random() *
size);
var temp = e.get(rand); // grab a
random div from our set
replace.append(temp); // add
the selected div to our new set
e = e.not(temp); // remove our selected
div from the main set
size--;
}
$('#shuffle').html(replace.html()); // update
our container div with the
// new, randomized divs
}
setInterval(shuffle, 2000);
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 550px">
<div id="shuffle">
<div id='d1' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='d2' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='d3' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
<div id='Div1' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='Div2' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='Div3' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
<div id='Div4' class="span1">
<img
class="place-right"
style="margin: 10px;" src="images/simple.png"
/>
<h2
class="fg-color-white">
D1</h2>
</div>
<div id='Div5' class="span2">
<img
class="place-right"
style="margin: 10px;" src="images/grid.png"
/>
<h2
class="fg-color-white">
D2</h2>
</div>
<div id='Div6' class="span3">
<img
class="place-right"
style="margin: 10px;" src="images/responsive.png"
/>
<h2
class="fg-color-white">
D3</h2>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
To see the demo check out the menu of this blog
If u had any trouble just ask, Happy to help u :)
Stay Tune...
Have a nice day... 'N happy Coding :)
