PDA

View Full Version : 2-level combo box colour text in one line



jackam
08-07-2014, 11:03 AM
Hi
I am using "2-level combo box" javascript code successfully but I wish to make one line of the drop down text a different colour, for it to stand out.
Can anyone please help.
Thanks.
http://www.javascriptkit.com/script/script2/2levelcombo.shtml

vwphillips
08-13-2014, 04:33 PM
apply your own style to the DIV items


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#fake {
position:relative;overflow:hidden;width:200px;height:20px;border:solid red 1px;
}

#fake DIV {
position:absolute;width:100%;
}

#fake DIV DIV{
position:relative;background-Color:#FFFFCC;border-Bottom:solid red 1px;
}

#fake DIV DIV IMG{
position:absolute;right:0px;
}


/*]]>*/
</style></head>

<body>
<div id="fake" >
<div >
<div onclick="menu.GoTo(0);" ><a >Level 0</a><img src="http://www.vicsjavascripts.org/StdImages/Down1.gif" /></div>
<div ><a onclick="menu.GoTo(1);" >Level 0 1</a></div>
<div ><a onclick="menu.GoTo(2);" >Level 0 2</a></div>
<div ><a >Link</a></div>
</div>
<div >
<div onclick="menu.GoTo(1);" ><a onclick="menu.GoTo(1);" >Level 1</a><img src="http://www.vicsjavascripts.org/StdImages/Down1.gif" /></div>
<div ><a onclick="menu.GoTo(0);" >Level 0</a></div>
<div ><a onclick="menu.GoTo(2);" >Level 2</a></div>
<div ><a >Link</a></div>
</div>
<div >
<div onclick="menu.GoTo(2);" ><a onclick="menu.GoTo(2);" >Leve 2</a><img src="http://www.vicsjavascripts.org/StdImages/Down1.gif" /></div>
<div ><a onclick="menu.GoTo(0);" >Level 0</a></div>
<div ><a onclick="menu.GoTo(1);" >Level 1</a></div>
</div>
</div>

<script type="text/javascript">
/*<![CDATA[*/

function zxcSlideMenu(o){
var p=document.getElementById(o.ParentID),ms=o.Animate,ph=o.ParentHeight;
if (p){
var ph=typeof(ph)=='number'&&ph>5?ph:false,c=p.childNodes,o=this,z0=0;
o.p=p;
o.sz=p.offsetWidth;
o.a=[];
for (;z0<c.length;z0++){
if (c[z0].nodeName.toUpperCase()=='DIV'){
c[z0].style.position='absolute';
c[z0].style.left=(o.a.length!=0?o.sz:0)+'px';
c[z0].style.top='0px';
o.a.push([c[z0],'left']);
}
}
o.p=[p,'height',ph,ph?ph:o.a[0][0].offsetHeight];
p.style.height=o.p[3]+'px';
o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
o.ud=false;
o.n=0;
}
}

zxcSlideMenu.prototype={

GoTo:function(n){
var o=this,ud=n>o.n?1:-1,d=new Date();
if (n==o.n&&o.p[2]){
this.animate(o.p,o.p[3],o.ud?o.p[2]:o.a[n][0].offsetHeight,d,o.ms);
o.ud=!o.ud;
}
if (o.a[n]&&n!=o.n){
this.animate(o.p,o.p[3],o.p[2]?o.p[2]:o.a[n][0].offsetHeight,new Date(),o.ms);
this.animate(o.a[o.n],0,o.sz*-ud,d,o.ms);
this.animate(o.a[n],o.sz*ud,0,d,o.ms);
o.ud=false;
o.n=n;
}
return false;
},

animate:function(a,f,t,srt,mS){
clearTimeout(a[4]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[3]=Math.max(f<0||t<0?n:0,n);
a[0].style[a[1]]=a[3]+'px';
}
if (ms<mS){
a[4]=setTimeout(function(){ oop.animate(a,f,t,srt,mS); },10);
}
else {
a[3]=t;
a[0].style[a[1]]=t+'px';
}
}

}


var menu=new zxcSlideMenu({
ParentID:'fake', // the unique ID name of the parent DIV. (string)
ParentHeight:20, //(optional) the default height of the parent DIV. (number, default = the height of the current sub menu)
Animate:500 //(optional) the animation duration in milli seconds. (number, default = 1000)
});
/*]]>*/
</script>

<form name="dynamiccombo">
<select name="stage2" size="1" onChange="displaysub()">
<option value="#">This is a place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
<option value="#">This is a Place Holder text </option>
</select>
<input type="button" name="test" value="Go!"
onClick="gothere()">
</form>

<script>
<!--

//2-level combo box script- by javascriptkit.com
//Visit JavaScript Kit (http://javascriptkit.com) for script
//Credit must stay intact for use

//STEP 1 of 2: DEFINE the main category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the first line, as it's used to display main title

var category=new Array()
category[0]=new Option("SELECT A CATEGORY ", "") //THIS LINE RESERVED TO CONTAIN COMBO TITLE
category[1]=new Option("Webmaster sites", "combo1")
category[2]=new Option("News sites", "combo2")
category[3]=new Option("Entertainment", "combo3")

//STEP 2 of 2: DEFINE the sub category links below
//EXTEND array as needed following the laid out structure
//BE sure to preserve the LAST line, as it's used to display submain title

var combo1=new Array()
combo1[0]=new Option("JavaScript Kit","http://javascriptkit.com")
combo1[1]=new Option("Dynamic Drive","http://www.dynamicdrive.com")
combo1[2]=new Option("Freewarejava.com","http://www.freewarejava.com")
combo1[3]=new Option("Free Web Templates","http://www.freewebtemplates.com")
combo1[4]=new Option("Web Monkey","http://www.webmonkey.com")
combo1[5]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var combo2=new Array()
combo2[0]=new Option("CNN","http://www.cnn.com")
combo2[1]=new Option("MSNBC","http://www.msnbc.com")
combo2[2]=new Option("BBC News","http://news.bbc.co.uk")
combo2[3]=new Option("ABC News","http://www.abcnews.com")
combo2[4]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var combo3=new Array()
combo3[0]=new Option("Hollywood.com","http://www.hollywood.com")
combo3[1]=new Option("MTV","http://www.mtv.com")
combo3[2]=new Option("ETOnline","http://etonline.com")
combo3[3]=new Option("BACK TO CATEGORIES","") //THIS LINE RESERVED TO CONTAIN COMBO SUBTITLE

var curlevel=1
var cacheobj=document.dynamiccombo.stage2

function populate(x){
for (m=cacheobj.options.length-1;m>0;m--)
cacheobj.options[m]=null
selectedarray=eval(x)
for (i=0;i<selectedarray.length;i++)
cacheobj.options[i]=new Option(selectedarray[i].text,selectedarray[i].value)
cacheobj.options[0].selected=true

}

function displaysub(){
if (curlevel==1){
populate(cacheobj.options[cacheobj.selectedIndex].value)
curlevel=2
}
else
gothere()
}


function gothere(){
if (curlevel==2){
if (cacheobj.selectedIndex==cacheobj.options.length-1){
curlevel=1
populate(category)
}
else
location=cacheobj.options[cacheobj.selectedIndex].value
}
}

//SHOW categories by default
populate(category)

//-->
</script>

</body>

</html>