Results 1 to 2 of 2

Thread: 2-level combo box colour text in one line

  1. #1
    Join Date
    Aug 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile 2-level combo box colour text in one line

    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/...velcombo.shtml

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,821
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    apply your own style to the DIV items

    Code:
    <!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>
    Last edited by vwphillips; 08-14-2014 at 10:49 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. If function between combo box and text value
    By vvomble in forum JavaScript
    Replies: 1
    Last Post: 12-06-2011, 03:24 AM
  2. From that changes all text colour on site.
    By spamburger in forum Looking for such a script or service
    Replies: 12
    Last Post: 01-16-2011, 03:46 PM
  3. Text Colour Change
    By djohno24 in forum HTML
    Replies: 7
    Last Post: 03-02-2009, 11:08 PM
  4. Default Text Colour
    By Calista in forum CSS
    Replies: 2
    Last Post: 09-19-2006, 03:36 PM
  5. Replies: 6
    Last Post: 04-25-2006, 04:14 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •