[CSS] Kleurselectie

[Icelus]

Ik heb op dit moment een kleurselectie zoals dit:


Werkt prima door ieder <option> element de juiste kleur/stijl te geven.

Ik wil echter zoiets:


Weet iemand of dit überhaupt mogelijk is? Spans in een option lijken te worden genegeerd in zowel Firefox als IE.

[OkkE]

Een backgorund-image op de <option>'s zetten? Anders zal je waarschijnlijk zelf iets moeten maken met javascript..

[Icelus]

OkkE schreef op maandag 04 september 2006 @ 12:50:
Een backgorund-image op de <option>'s zetten? Anders zal je waarschijnlijk zelf iets moeten maken met javascript..

De kleuren worden uit een database gehaald. Is natuurlijk wel mogelijk met een extra script dat een afbeelding genereerd maar is - op dit moment - te omslachtig.

[Reinier]

Je kunt de option wel een border-left geven, dan mis je wel het bordertje om de kleur maar het is i.i.g. iets

Edit:

Met dit:

HTML:

<select>
<option>Kleur:</option>
<option style="border-left: solid 10px red">Red</option>
<option style="border-left: solid 10px green">Green</option>
<option style="border-left: solid 10px yellow">Yellow</option>
<option style="border-left: solid 10px blue">Blue</option>
<option style="border-left: solid 10px magenta">Magenta</option>
<option style="border-left: solid 10px cyan">Cyan</option>
<option style="border-left: solid 10px #880000">Dark Red</option>
</select>

Dan krijg je dit:

[ Voor 73% gewijzigd door Reinier op 04-09-2006 13:04 ]

[PsyBelgium]

Maar dit werkt helaas niet in IE.

[Gersomvg]

werkt het ook niet met javascript?

bijv:
this.style.background='#000000';

[OkkE]

gersompie schreef op maandag 04 september 2006 @ 14:45:
werkt het ook niet met javascript?

bijv:
this.style.background='#000000';

1. De background-color werkt wel in Firefox en Explorer, maar dat wil de topicstarter juist niet, en de oplossing van Reinier werkt dus niet in Explorer.

2. Als CSS niet werkt in een browser, dan werkt het via JS toevoegen van CSS ook niet.

[Geert.H]

Kun je niet gewoon een aantal afbeeldingen er naast invoegen? Of wil je het puur css houden?

[Tepel]

Zoals Ghoek al aangeeft zijn plaatjes de enige oplossing, dus:
http://0x7f.nl/GoT/test.htm

-- edit

Of je maakt je eigen listbox maar dat zal prolly niet rendabel zijn

[ Voor 31% gewijzigd door Tepel op 04-09-2006 18:08 ]

[Reinier]

De oplossing van Tepel heeft met de mijne gemeen dat ie niet in IE werkt

[Tepel]

Heh, kan ik wat moeilijk testen maar ik geloof je direct. Heb even een andere mogelijkheid op diezelfde testpagina gezet. Een eigen listbox, viel me nog mee qua hoeveelheid text e.d. Of die werkt onder IE weet ik niet maar dit valt in ieder geval wel werkend te krijgen onder IE. Een paar andere JS calls en voila.

[Gersomvg]

helaas

als je in IE op de knop met ">" drukt komt er niks terwijl er in firefox netjes een keuzemenu'tje komt

[Reinier]

Dat komt omdat IE graag className ziet in plaats van class
Dus zo:

JavaScript:

        function colorList( )
        {
            Container.setAttribute('className', 'ListOn'); 
        }

[Tepel]

Reinier schreef op maandag 04 september 2006 @ 19:58:
Dat komt omdat IE graag className ziet in plaats van class
Dus zo:

JavaScript:

        function colorList( )
        {
            Container.setAttribute('className', 'ListOn'); 
        }

Leuke is dat FF het daarmee niet doet Heb ze er nu beide in staan, maar het was meer een proof-of-concept

[Geert.H]

Maar, heb je al iets geprobeerd met div's ? of iets anders? of gebruik je alleen maar spans? Het is wellicht niet erg netjes, maar wellicht werkt het. Ik wilde het zelf uitproberen, maar m'n server doet een beetje raar. Want volgens mij moet dit toch zonder j-script te fixxen zijn?

[Reinier]

Tepel schreef op maandag 04 september 2006 @ 20:01:
[...]
Leuke is dat FF het daarmee niet doet

Ik weet het... setAttribute werkt niet zoals je verwacht in IE. Daarom werkt de onClick ook niet

[XWB]

JavaScript:

Container.className = 'ListOn';

ipv setAttribute, wil wel eens helpen

Span is een inline element en dat kan je dus geen width meegeven, dus daarmee zal het moeilijk gaan

Voor die onclick, probeer eens:

JavaScript:

Button.onClick = colorList;

of

JavaScript:

Button.onClick = function() { colorList(); }

[ Voor 53% gewijzigd door XWB op 04-09-2006 20:32 ]

[XWB]

Dit lijkt in IE7 te werken, als iemand dat in IE6 even kan nakijken

HTML:

<html>
<head>
    <title>Yaaarrr</title>
    <style type="text/css">
        #optColorRed, #liColorRed {
            padding: 2px 5px 2px 30px;
            background: url('http://0x7f.nl/GoT/color/red.gif') 3px no-repeat;
        }
        #optColorBlue, #liColorBlue {
            padding: 2px 5px 2px 30px;
            background: url('http://0x7f.nl/GoT/color/blue.gif') 3px no-repeat;
        }
        #optColorGreen, #liColorGreen {
            padding: 2px 5px 2px 30px;
            background: url('http://0x7f.nl/GoT/color/green.gif') 3px no-repeat;
        }
        #optColorYellow, #liColorYellow {
            padding: 2px 5px 2px 30px;
            background: url('http://0x7f.nl/GoT/color/yellow.gif') 3px no-repeat;
        }
        #optColorBlack, #liColorBlack {
            padding: 2px 5px 2px 30px;
            background: url('http://0x7f.nl/GoT/color/black.gif') 3px no-repeat;
        }
        
        #liColorRed:hover, #liColorYellow:hover, #liColorBlue:hover, #liColorGreen:hover, #liColorBlack:hover {
            background-color: #ABABAB;
        } 

        .ListOn {
            display: block;
        }
        .ListOff {
            display: none;
        }
        label {
            display: block;
            position: relative;
            float: left;
            width: 7em;
        }
        #txtColor {
            border: 1px solid #000;
        }
        #ColorContainer {
            margin: 0px;
            padding: 0px;
            margin-left: 7em;
            border: 1px solid #000;
            position: relative;
            width: 120px;
        }
        #ColorContainer ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
    </style>
    
    <script type="text/javascript">
    var Field;
    var Button;
    var Container;
    var Options;
    
    function __init()
    {
        Field     = document.getElementById("txtColor");
        Container = document.getElementById("ColorContainer");
        Options   = new Array("liColorRed", "liColorYellow", "liColorBlue", "liColorGreen", "liColorBlack");
        
        for (var i = 0; i < Options.length; i++)
        {
            document.getElementById(Options[i]).onclick = function() 
            { 
                Field.value = this.id; 
                Container.className = 'ListOff';    
            }       
        }
    }
    
    function colorList ()
    {
        Container.className = 'ListOn';
    }
    </script>
</head>
<body onload="__init()">

<form name="yaarrrr" method="POST" action="text.htm?pirate=yaarrr">
<p>
    <label for="lstColor">Yaaarrr:</label>

    <select id="lstColor" name="yaaarrr">
        <optgroup label="Kleur">
            <option id="optColorRed">Red</option>
            <option id="optColorYellow">Yellow</option>
            <option id="optColorBlue">Blue</option>
            <option id="optColorGreen">Green</option>
            <option id="optColorBlack">Black</option>
        </optgroup>
    </select>
</p>
<p>
    <label for="txtColor">Yaaaarrr!!:</label>
    <input id="txtColor" name="yyyyaaaaarrrr" type="text" value="NULL" /> <input onClick="colorList();" id="colorButton" type="button" name="btnSelect" value="&gt;" />
    <div class="ListOff" id="ColorContainer">
        <ul>
            <li id="liColorRed">Red</li>
            <li id="liColorYellow">Yellow</li>
            <li id="liColorBlue">Blue</li>
            <li id="liColorGreen">Green</li>
            <li id="liColorBlack">Black</li>
        </ul>
    </div>
</p>

</form>

</body>
</html>

[Tepel]

Ah het komt allemaal weer bij me terug! Ik heb dit allemaal al eens gedaan alleen met een ander doel. Toen moest ik ook alles weer om gooien omdat IE het niet snapte. Prachtig dat web-devven vind je ook niet.
Ik vind echter wel dat mijn manier de mooiste is

[XWB]

De mooiste? setAttribute is gewoon DOM lvl 2, dat is daarom niet netter.

[Verwijderd]

Hacku schreef op maandag 04 september 2006 @ 20:57:
Dit lijkt in IE7 te werken, als iemand dat in IE6 even kan nakijken

Het werkt maar dat is ook alles.

Bovenste select: false

Onderste select: beetje... (geen rode kleur bv).

[ Voor 15% gewijzigd door Verwijderd op 04-09-2006 22:55 ]

[XWB]

<zucht> even kijken of ik hier ergens een IE6 pc kan vinden

[OkkE]

Hacku;

In IE6 (op WinXP + SP2), de eerste geeft alleen tekst in de dropdown, werkt hier verder wel: de naam van de kleur kan geselecteerd worden. De tweede lijkt goed te werken, de waarde liColorRed komt er als waarde te staan na het selecteren.

Op Firefox doen alletwee de voorbeelden het, zover ik kan zien.

Opmerking:
Natuurlijk is dit alleen een testcase, maar het zou helemaal mooi zijn als je er een groep radio-buttons van kunt maken (lijkt me niet zo lastig, een li of een label gebruiken ), zodat het ook zonder javascript te gebruiken is.

[ Voor 3% gewijzigd door OkkE op 05-09-2006 08:54 ]

[Icelus]

Gebruik voorlopig de ‘truc’ van de border-left kleur. Het wordt gebruikt op een intranet dus gebruik van Firefox is dan geen probleem. Overigens wel een idee om in de toekomst te gebruiken (met afbeeldingen).

Zoals al gezegd haal ik de kleuren uit een database. Ik zou dan de afbeeldingen real-time moeten genereren of wanneer er kleuren worden toegevoegd/verwijderd de bestanden in één keer moeten aanmaken op de server.

[Reinier]

\o/ Mijn FF-only oplossing dus
Wel erg vervelend trouwens dat IE geen border op een select ondersteunt. Het is toch echt een CSS property die geldig is voor alle elementen. Snapt IE7 het trouwens ook niet?

[BCC]

Icelus schreef op dinsdag 05 september 2006 @ 10:16:
Zoals al gezegd haal ik de kleuren uit een database. Ik zou dan de afbeeldingen real-time moeten genereren of wanneer er kleuren worden toegevoegd/verwijderd de bestanden in één keer moeten aanmaken op de server.

Realtime generereren is toch heel simpel? Gewoon <img src="genereerblokje.php?kleur=FFBBDD" />

[Icelus]

BCC schreef op dinsdag 05 september 2006 @ 10:20:
[...]


Realtime generereren is toch heel simpel? Gewoon <img src="genereerblokje.php?kleur=FFBBDD" />

Het is inderdaad niet moeilijk. Uit de database komen echter zowel RGB hex-triplets (#RRGGBB), web safe colors (#RGB) en web color names. Ik zou met alle drie rekening moeten houden en een lijst van web safe colors moeten aanmaken. De kleuren maken maar een klein gedeelte van het intranet uit; het is op dit moment niet de moeite waard.