Web Analytics Made Easy -
StatCounter Colored Drop Down Menu - CodingForum

Announcement

Collapse
No announcement yet.

Colored Drop Down Menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Colored Drop Down Menu

    Hey,

    How can I create a javascript drop down menu where each option has a different background color?

    I've looked and I can't find much.

    Anyone help me out, please?

    Chris

    P.S. It's for a greasemonkey script

  • #2
    Code:
    <html>
    <body>
    <form>
    <select>
        <option style="background-color: lightgreen; color: green;">green on green</option>
        <option style="background-color: black; color: yellow;">yellow on black</option>
        <option style="background-color: red; color: white;">white on red</option>
        <option style="background-color: orange; color: brown;">brown on orange</option>
        <option>tired of it yet?</option>
    </select>
    </form>
    </body>
    </html>
    Be yourself. No one else is as qualified.

    Comment


    • #3
      That looks like HTML to me. O.o

      I need JavaScript, as in a .js file.
      Last edited by Chris4; Apr 9, 2009, 12:47 PM.

      Comment


      • #4
        Originally posted by Chris4 View Post
        Thanks, but that is html. I know how to do that.

        I need it in javascript, as in a .js file.
        I'm guessing what Pedant was trying to say was... the color of the menu has nothing to do with JavaScript. If you have a drop-down menu working with a single color, you can change the color any way you like and it will still work. (Unless for some reason the JavaScript relies on the color of an item, though I don't see why it would) If you want a drop-down menu... that is really an entirely different matter, and there are numerous examples of these both on CodingForum and on the web. Here's an example for a JS menu drop-down menu:

        http://www.javascriptkit.com/script/...linemenu.shtml
        The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

        How to ask smart questions?

        Comment


        • #5
          Hmm. If it helps, here's some of the JS coding for the greasemonkey script

          Any idea how I can add color to that?

          PHP Code:
          addFilter("as_filetype",["File type","JPG|JPG","GIF|GIF","PNG|PNG","BMP|BMP"]);
          addFilter("imgc",["Image type","Black & White|Mono","Grayscale|Gray","Full Color|Color"]);
          addFilter("safe",["SafeSearch","Strict|Active","No filter|Off"]);

          function 
          addFilter(param,values)
          {
              var 
          re=new RegExp("(\\?|&)"+param+"=(\\w*)(&|$)","img");        //regexp to extract the parameter from the search string
              
          var pv=re.exec(location.search)?RegExp.$2.toLowerCase():"";        //extracting parameter value
              
          var url=location.pathname+location.search.replace(re,function(){return arguments[3]?arguments[1]:"";});    //search string without parameter
              
              //creating dropdown
              
          var s=document.createElement("select");
              
          s.name=param;
              
          s.setAttribute("onchange","_isr_load(this);");
              
              
          //adding options
              
          s.options[0]=new Option(values.shift(),url);
              
          url+="&"+param+"=";
              
          values.forEach(function(v){var a,n;if(v.match(/\|/)){a=v.split("|");n=a[0];v=a[1];}else{n=v;}
              (
          s.options[s.options.length]=new  Option(n,url+v.toLowerCase())).selected=v.toLowerCase()==pv;});
              
              
          //appending dropdown
              
          s.style.margin='0px 0px 0px 8px'
              
          document.forms[1].appendChild(s);

          Comment


          • #6
            Hmmm, well from the looks of it, the actual options are created here:

            Code:
            (s.options[s.options.length]=new  Option(n,url+v.toLowerCase())).selected=v.toLowerCase()==pv;}
            In this case, you'll be needing to add something along the lines of:

            Code:
            var which = s.options.length;
            (s.options[which]=new  Option(n,url+v.toLowerCase())).selected=v.toLowerCase()==pv;}
            s.options[which].setAttribute('style', 'color: red;')
            Though of course, you'll also need some way of pointing to what style you'll be assigning... i.e. an array, containing the styles perhaps... or if you want to alternate, you can easily just have a temporary variable that will either be 0 or 1... but eh, really up to you. And before someone complains that setAttribute('style') doesn't work in IE... this is for a FireFox plug-in, so I don't see how it would end up crashing with IE.
            The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

            How to ask smart questions?

            Comment


            • #7
              Hmm, adding that code stops it from working, which I presume is meant to happen from your comment.

              I wish I knew how to add the code needed but unfortunately I don't. I'd give you something in return if I could, but I doubt I can lol.

              I don't mind which method is used, what ever you think is the best. If you don't mind helping me out with it or pointing me in the right direction that'd be great.

              Comment


              • #8
                Hmm, well... if you can give me a link to the script so I can test it myself, I could probably work out a solution that will work. Apart from that, what I can offer is:

                Code:
                stylewhich = 0;
                values.forEach(function(v){
                    
                    var a,n;
                    if(v.match(/|/)) {
                        a=v.split("|");
                        n=a[0];v=a[1];
                    } else {
                        n=v; 
                    }
                    var which = s.options.length;
                    (s.options[s.options.length] = new Option( n,url+v.toLowerCase())).selected = v.toLowerCase() == pv
                    if (stylewhich == 0) {
                        (s.options[which]).setAttribute('style', 'color: red;');
                        stylewhich++;
                    }
                    else {
                        (s.options[which]).setAttribute('style', 'color: blue;');
                        stylewhich--;
                    }
                });
                Just replace the following two lines with the code provided and it _should_ work:

                Code:
                values.forEach(function(v){var a,n;if(v.match(/|/)){a=v.split("|");n=a[0];v=a[1];}else{n=v;}
                    (s.options[s.options.length]=new  Option(n,url+v.toLowerCase())).selected=v.toLowerCase()==pv;});
                Though once again... it is untested... so it might not work at all. Give it a whirl and let me know... if not, give me a link to the script so I can download and be able to play around with it for a bit to get it to work.
                Last edited by Eldarrion; Apr 9, 2009, 02:20 PM.
                The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

                How to ask smart questions?

                Comment


                • #9
                  Thanks, that works pretty well. It goes blue, red, blue, red, on each added menu.

                  Although.. because I've been so focused on getting a colored drop down menu, I completely forgot that Google just added the color filter to their image search, and I had to remove it from my script :-/

                  I originally planned it to be for that, so that the user could choose the actual color rather than the name 'blue' for example. So, I'm unsure how I could implement it into my script with the existing filters.

                  Hm. Abandon ship!

                  Sorry

                  Comment


                  • #10
                    That looks like HTML to me. O.o

                    I need JavaScript, as in a .js file.
                    As a general rule, anything you can create with static HTML can be created dynamically via javascript. I was just demonstrating what the CSS properties were that you needed to set.

                    Heck, if worst came to worst, you could apply the colors after the <option>s were all fully built.

                    I don't understand what Google adding a color filter has to do with colors in a <SELECT> list. Would you mind enlightening me (us)?
                    Be yourself. No one else is as qualified.

                    Comment


                    • #11
                      Erm.. With my script.. it adds advanced filters, such as filter by color. Google has now added that feature to their Google Image Search, if you have a look here. So.. there's no point adding it with my script if Google can already do it, right? As a result, there's no use for the colored drop down menu any more.

                      Comment

                      Working...
                      X