<html>
<head>
<style type="text/css">
.jsclass body .randomcontent{ /*Do NOT remove! CSS to hide random contents in JS enabled
browsers*/
display: none;
}
</style>
<script type="text/javascript">
/***********************************************
* Random Content (from DIVs) script- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
***********************************************/
if (document.getElementById)
document.documentElement.className = 'jsclass'; //hide content for DOM capable browsers
var randomcontentdisplay={
divholders:new Object(),
masterclass: "randomcontent",
init:function(){
if (!document.getElementById)
return
var alldivs=document.getElementsByTagName("div")
var randomcontentsearch=new RegExp(this.masterclass+"\\s+(group\\d+)", "i")
//check for CSS class="randomcontent groupX" (x=integer)
for (var i=0; i<alldivs.length; i++){
if (randomcontentsearch.test(alldivs[i].className)){
if (typeof this.divholders[RegExp.$1]=="undefined") //if
array to hold this group of divs doesn't exist yet
this.divholders[RegExp.$1]=new Array() //create
array first
this.divholders[RegExp.$1].push(alldivs[i]) //add
this div to the array
}
}
this.showone()
},
showone:function(){
for (group in this.divholders){ //loop thru each array within object
var chosenOne=Math.floor(Math.random()*this.divholders
[group].length) //randomly pick one entry from array
this.divholders[group][chosenOne].style.display="block" //display
content corresponding to the chosen entry
}
}
}
</script>
<body>
<h3>Random Content Group 1 (4 pieces of content total):</h3>
<div class="randomcontent group1">
<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content
1</p>
</div>
<div class="randomcontent group1">
<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content
2</p>
</div>
<div class="randomcontent group1">
<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content
3</p>
</div>
<div class="randomcontent group1">
<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content
4</p>
</div>
<h3>Random Content Group 2 (2 pieces of content total):</h3>
<div class="randomcontent group2">
<p style="border:1px dashed gray; background-color:#D8EA99; padding: 10px">Group 2 Content
1</p>
</div>
<div class="randomcontent group2">
<p style="border:1px dashed gray; background-color:#D8EA99; padding: 10px">Group 2 Content
2</p>
</div>
<script type="text/javascript">
//Call this following all random contents HTML on the page:
randomcontentdisplay.init()
</script>
<div class="randomcontent group1">
//Some content here
</div>
<div class="randomcontent group1">
//Some content here
</div>
</body>
</html>
Tidak ada komentar:
Posting Komentar