#1
Animated Random Option Combo Javascripts on Sun Oct 23, 2011 5:35 am
Lucky4U
Moderator
User Title
Posts: 230 Rep Points: 254 Thanks: 0 Age: 32
Gender: 
This is a unique combo menu script that lets the user make a URL selection in two ways:
By directly selecting the option you wish to go to, or
Let the script randomly decide for you, by cycling through all available options and picking one randomly.
Step 1: Insert the below into the <HEAD> section of your page:
Step 2: Insert the below two sample combo boxes the <body> section of your page:
By directly selecting the option you wish to go to, or
Let the script randomly decide for you, by cycling through all available options and picking one randomly.
Step 1: Insert the below into the <HEAD> section of your page:
- Code:
<script type="text/javascript">
/***********************************************
* Animated Random Option Combo- by presmurdu.com (www.presmurdu.com)
* This notice must stay intact for usage
* Visit Presmurdu http://www.presmurdu.com/ for this script and 100s more
***********************************************/
var animatedList={
navigate:function(selectId){
this.selectObj=document.getElementById(selectId)
window.location=this.selectObj[this.selectObj.selectedIndex].value
},
randomizeInit:function(selectId){
this.selectObj=document.getElementById(selectId)
this.curframe=0
this.optionscount=this.selectObj.options.length
//calculate number of frames to animate (cycle through options before settling on one)
this.maxframes=Math.floor(Math.random()*this.optionscount)+Math.floor(Math.random()*this.optionscount)
this.randomize()
},
randomize:function(){
if (this.curframe<this.maxframes)
this.selectObj.selectedIndex=this.settledIndex=(this.curframe<this.optionscount)? this.curframe : this.curframe-this.optionscount
else{ //settle on and select this option
this.selectObj.selectedIndex=(this.selectObj.selectedIndex==-1)? this.settledIndex : -1
}
this.curframe++
if (this.curframe<this.maxframes+4) //Keep running this function until "maxframes" cycle plus 4 (4 being cycle for highlighting selected option)
setTimeout("animatedList.randomize()", 100)
else
window.location=this.selectObj[this.selectObj.selectedIndex].value
}
}
</script>
Step 2: Insert the below two sample combo boxes the <body> section of your page:
- Code:
<form>
<select id="webdevlinks" size="6" onChange="animatedList.navigate('webdevlinks')">
<option value="http://www.presmurdu.com">Presmurdu Pakistani Forum</option>
<option value="http://www.Presmurdu.com/jsref/">JavaScript Reference</option>
<option value="http://www.presmurdu.com/domref/">DOM Reference</option>
<option value="http://www.codingforums.com">CodingForums.com</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
</select><br />
<input type="button" onClick="animatedList.randomizeInit('webdevlinks')" value="Random Link!" />
</form>
<form>
<select id="newslinks" size="1" onChange="animatedList.navigate('newslinks')">
<option value="http://www.cnn.com/">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://news.yahoo.com/">Yahoo News</option>
</select> <input type="button" onClick="animatedList.navigate('newslinks')" value="Go" /> <input type="button" onClick="animatedList.randomizeInit('newslinks')" value="Random" />
</form>
Love You Presmurdu
Happiness is a perfume.
You cannot spread on others without getting a few drops on urself.
So always be happy to make others happy !
Awards Showcase 
