Announcement

**Old Pedant** · Apr 9, 2009, 03:04 AM

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>

**Chris4** · Apr 9, 2009, 12:35 PM

That looks like HTML to me. O.o

I need JavaScript, as in a .js file.

**Eldarrion** · Apr 9, 2009, 12:47 PM

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

**Chris4** · Apr 9, 2009, 01:39 PM

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);

}

**Eldarrion** · Apr 9, 2009, 01:55 PM

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.

**Chris4** · Apr 9, 2009, 02:03 PM

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.

**Eldarrion** · Apr 9, 2009, 02:16 PM

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.

**Chris4** · Apr 9, 2009, 03:15 PM

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

**Old Pedant** · Apr 10, 2009, 01:52 AM

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)?

**Chris4** · Apr 10, 2009, 03:25 AM

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.

Announcement

Colored Drop Down Menu

Colored Drop Down Menu

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment