Try this updated version of the script:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Greater Random Content w/cookies - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.group1 {
visibility: hidden;
}
</style>
<noscript>
<style type="text/css">
.group1 {
visibility: visible;
}
</style>
</noscript>
<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- (c) 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/
* Modified 02/28/2012 dual cookie persistence for greater randomness by jscheuer1 in http://www.dynamicdrive.com/forums/
***********************************************/
function randomizeContent(classname, days){
var $ = jQuery, contents = {
ref: $('.' + classname),
text: [],
cookie: randomizeContent.cookie.get(classname)? randomizeContent.cookie.get(classname).split('.') : [],
longterm: randomizeContent.cookie.get(classname + 'long')? randomizeContent.cookie.get(classname + 'long').split('.') : [],
set: function(){
randomizeContent.cookie.set(classname, contents.cookie.join('.'), days || 0);
randomizeContent.cookie.set(classname + 'long', contents.cookie.join('.'), 365);
}
};
contents.ref.each(function(i){
contents.text[i] = [this.innerHTML, i];
});
if(contents.cookie.length === 0 && contents.longterm.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];
});
contents.set();
} else if (contents.cookie.length === 0 && contents.longterm.length === contents.text.length){
contents.longterm.sort(function(){return 0.5 - Math.random();});
contents.ref.each(function(i){
$(this).html(contents.text[contents.longterm[i]][0]).css('visibility', 'visible');
contents.cookie[i] = contents.text[contents.longterm[i]][1];
});
contents.set();
} 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>
<input type="button" value="Kill" onclick="randomizeContent.cookie.kill('group1');"><br>
<input type="button" value="Kill Long" onclick="randomizeContent.cookie.kill('group1long');"><br>
<input type="button" value="Check" onclick="alert(document.cookie);">
<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: You will have to run:
Code:
javascript:void(randomizeContent.cookie.kill('group1'))
as I've changed the separator in the cookie. If you don't kill the old one, you will get a persistent error.
Other changes in this version:
- Added a noscript tag with a style section which makes the content visible in its normal order for users without javascript enabled.
- Added a second long term cookie. If the short term cookie has expired or been killed, the long term cookie still holds the previous random order. Instead of randomizing the order of the elements on the page, this long term order is shuffled. This leads to a greater degree of true randomness.
I hit on this method after having helped someone with a game where items had to be picked randomly and repeatedly over the course of the game. By constantly shuffling the order instead of starting from the same order for each shuffle, a high degree of true randomness was achieved.
However, you might not notice it in a small sample. That's just the nature of randomness. You can get the same or nearly the same result repeatedly because random only guarantees that over a large sample the results will fall nearly equally into whatever the various categories are.
Increase Randomness of Random Content Order script
Reply With Quote
Bookmarks