Use this version:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.group1{
visibility: hidden;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
/***********************************************
* Random Content Order script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Modified 03/04/2010 cookie persistence by jscheuer1 in http://www.dynamicdrive.com/forums/
***********************************************/
function randomizeContent(classname, days){
var $ = jQuery, contents = {
ref: $('.' + classname),
text: [],
cookie: (function(){return randomizeContent.cookie.get(classname)? randomizeContent.cookie.get(classname).split('::') : [];})()
};
contents.ref.each(function(i){
contents.text[i] = [this.innerHTML, i];
});
if(contents.cookie.length === 0){
contents.text.sort(function(){return 0.5 - Math.random();});
contents.ref.each(function(i){
$(this).html(contents.text[i][0]).css('visibility', 'visible');
contents.cookie[i] = contents.text[i][1];
});
randomizeContent.cookie.set(classname, contents.cookie.join('::'), days || 0);
} else {
contents.ref.each(function(i){
$(this).html(contents.text[contents.cookie[i]][0]).css('visibility', 'visible');
});
}
}
randomizeContent.cookie = {
set: function(n, v, d){ // cookie.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cookie.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
},
kill: function(n){ // cookie.kill takes (name)
randomizeContent.cookie.set(n, '', -1);
}
};
</script>
</head>
<body>
<div class="group1">
Content 1
</div>
<div class="group1">
Content 2
</div>
<div class="group1">
Content 3
</div>
<div class="group1">
Content 4
</div>
<div class="group1">
Content 5
</div>
<script type="text/javascript">
//randomize order of contents with DIV class="group1" to persist for 1 day (use 0 for session only persistence)
randomizeContent('group1', 1);
</script>
</body>
</html>
Notes: This version uses jQuery, make sure to include it in your page as highlighted in the above. The method for invoking it has changed slightly (from the above):
Code:
<script type="text/javascript">
//randomize order of contents with DIV class="group1" to persist for 1 day (use 0 for session only persistence)
randomizeContent('group1', 1);
</script>
Which is pretty self explanatory.
If there are images in the randomized content, there might be an issue in IE with the page never completely loading. This would likely only happen, if at all, once the page is live. If it does, let me know, it can be fixed.
Any questions, feel free to ask.
Bookmarks