Thaimisc.com : ทำ Content แบบมีการสุ่มเลือกสลับตำแหน่ง
ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us | Colocation | Web Hosting | เปิดร้านค้าฟรี


Category : Today's Tips Print Article Only Print Aticle With Comment
ทำ Content แบบมีการสุ่มเลือกสลับตำแหน่ง
เขียนโดย Poj , 24-04-2007
ทำ Content แบบมีการสุ่มเลือกสลับตำแหน่งของ Content ไม่ซ้ำกันในการเข้าเว็บแต่ละครั้ง ดูตัวอย่างได้ ที่นี่ ครับ

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ

<style type="text/css">

.jsclass body .randomordercontent{
display: none;
}

</style>

<script type="text/javascript">

/***********************************************
* Random Order 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 randomordercontentdisplay={
divholders:new Object(),
masterclass: "randomordercontent",

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 object to hold this group of divs doesn't exist yet
this.divholders[RegExp.$1]=new Object() //create object
this.divholders[RegExp.$1].ref=[] //create array to hold each div within group
this.divholders[RegExp.$1].contents=[] //create array to hold each div's content within group
}
this.divholders[RegExp.$1].ref.push(alldivs[i]) //add this div to the array
this.divholders[RegExp.$1].contents.push(alldivs[i].innerHTML) //add this div's content to the array
}
}
this.scrambleorder()
},

scrambleorder:function(){
for (group in this.divholders){ //loop thru each array within object
this.divholders[group].contents.sort(function() {return 0.5 - Math.random()}) //scramble contents array
for (var i=0; i<this.divholders[group].ref.length; i++){
this.divholders[group].ref[i].innerHTML=this.divholders[group].contents[i]
this.divholders[group].ref[i].style.display="block"
}
}
}
}

</script>



2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ

<h3>Random Order Content Group 1 (4 pieces of content total):</h3>

<div class="randomordercontent group1">

<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content 1</p>

</div>

<div class="randomordercontent group1">

<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content 2</p>

</div>

<div class="randomordercontent group1">

<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content 3</p>

</div>

<div class="randomordercontent group1">

<p style="border:1px dashed gray; background-color:lightyellow; padding: 10px">Group 1 Content 4</p>

</div>

 

<h3>Random Order Content Group 2 (2 pieces of content total):</h3>

<div class="randomordercontent group2">

<p style="border:1px dashed gray; background-color:#D8EA99; padding: 10px">Group 2 Content 1</p>

</div>

<div class="randomordercontent group2">

<p style="border:1px dashed gray; background-color:#D8EA99; padding: 10px">Group 2 Content 2</p>

</div>

<script type="text/javascript">

randomordercontentdisplay.init()

</script>

<- Back | Next ->

ThaiMisc.Com : Free Webboard | Free GuestBook | Free Poll | Free Ecard Server | Free Java Chat Room | Advertising | Contact Us
Copyright 1999-2006 Thailand Miscellaneous. Allrights reserved. webmaster@thaimisc.com