In a project I did recently there was a need for randomly displayed content in form of one of those "Did you know" tips. There were 8 to 10 paragraphs of text and client wanted to display just one randomly chosen. Since that was the static site I decided to go with front end solution. I am aware that there are many more elegant back-end solutions but read on and you'll see that there are advantages to this as well.
Take a look at the randomly displayed content demo
Take a look at randomly rotating content demo
Let's Get Started
So first the markup. I placed all of the "did you know" tips into one unordered list:
<ul id="tips"> <li>... if you want to become a better coder you need to eat your vegetables?</li> <li>... it takes more time to code a web page then to make a pizza?</li> <li>... you should validate your code?</li> <li>... jQuery is your friend? For real!</li> <li>... no matter what some people claim, you can't learn CSS in 3 hours?</li> </ul>
The idea is to HIDE all of the tips and then display randomly chosen one using JavaScript.
So to style and hide the tips we use the following CSS code:
#tips, #tips li{
margin:0;
padding:0;
list-style:none;
}
#tips{
width:250px;
font-size:16px;
line-height:120%;
}
#tips li{
padding:20px;
background:#e1e1e1;
display:none; /* hide the items at first only */
}
The downside to this solution is that initially all of the tips are hidden, so users with disabled JavaScript and enabled CSS will not be able to see them at all while users with disabled JS/CSS (as well as search engines) will see all of them.
To display one of them randomly we will use small jQuery script. Of course you will have to download jQuery put it somewhere on your server and link to it by placing this code inside the head tag of your document (link to your jQuery.js file).
<script type="text/javascript" src="js/jquery.js"></script>
Below that add the following script:
<script type="text/javascript">
this.randomtip = function(){
var length = $("#tips li").length;
var ran = Math.floor(Math.random()*length) + 1;
$("#tips li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
randomtip();
});
</script>
Short one isn't it. Take a look at the demo (refresh the page couple of times) to see how it works.
Taking it One Step Further
If this simple functionality doesn't satisfy you, here's more. With modifying the above code a bit we can get fade in/out tips that rotate randomly. Of course the code doesn't allow same tip to display twice in a row.
Note that you are able to modify length of the pause between random rotations.
<script type="text/javascript">
this.randomtip = function(){
var pause = 3000; // define the pause for each tip (in milliseconds)
var length = $("#tips li").length;
var temp = -1;
this.getRan = function(){
// get the random number
var ran = Math.floor(Math.random()*length) + 1;
return ran;
};
this.show = function(){
var ran = getRan();
// to avoid repeating
while (ran == temp){
ran = getRan();
};
temp = ran;
$("#tips li").hide();
$("#tips li:nth-child(" + ran + ")").fadeIn("fast");
};
show(); setInterval(show,pause);
};
$(document).ready(function(){
randomtip();
});
</script>
Take a look at this demo to see it in action.
Thanks for reading this! If you liked the script please remember to bookmark it, share it and subscribe to rss feed using the links below :) Cheers!
Jasmin Halkić 31 Aug, 2009
Veerendra 31 Aug, 2009
thanks for sharing !!!
Pieter 31 Aug, 2009
It's easily fixed:
apply background:#e1e1e1; to #tips too. That should fix it, the background doesn't flash anymore!
And about the accessibility issue:
Remove display: none; from the CSS and modify the Javascript to this:
$(document).ready(function(){
$("#tips li").hide();
randomtip();
});
And tataa, every user sees the list:
CSS, no JS;
No CSS, JS;
Both;
None.
Nice script ;)
cssglobe 31 Aug, 2009
Dalesh Kowlesar 31 Aug, 2009
cancel bubble 31 Aug, 2009
this.randomtip = function(){
In particular, why are you using "this" and not var - or better yet, wrapping it up in a singleton/module pattern?
cssglobe 31 Aug, 2009
Enrico Lamperti 31 Aug, 2009
Rahul - Web Guru 31 Aug, 2009
Diego 31 Aug, 2009
Thanks!
Vicky Rowe 2 Sep, 2009
I set the width in the CSS, and it is displaying wide. Ideas on how to get the width to adhere to 215? Currently it seems to be showing at about 400px wide......
page is at http://www.satoridigitalmarketing.com/clients/traverslasik/template.html
Vicky
cssglobe 2 Sep, 2009
Vicky Rowe 2 Sep, 2009
Randy Verbeck 2 Sep, 2009
Randy Verbeck 2 Sep, 2009
M Patel 5 Sep, 2009
Susan 9 Sep, 2009
I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
Susan
http://dclottery.info
Helio Pascoal 16 Sep, 2009
Schop 24 Sep, 2009
Brian 30 Sep, 2009