Presmurdu - Pakistani Urdu Forum | urdu shayari | Urdu Islam | Design Urdu PoetryLog in

Share

descriptiondefaultAnimated Random Option Combo Javascripts

more_horiz
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:

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 !


descriptiondefaultRe: Animated Random Option Combo Javascripts

more_horiz
v nice sharing keep it up


Arzoo.........

Nothing is good or bad,but thinking makes it so....



Permissions in this forum:
You cannot reply to topics in this forum