[JS] DHTML color picker werkt niet object vereist

[Verwijderd]

Tweakers,

Ik ben bezig met een site waarop een colorpicker willen maken zodat de gebruikers bepaalde kleuren kunnen kiezen voor bijvoorbeeld de tabelkoppen.

Omdat ik zelf niet echt een javascript freak ben, ben ik op internet op zoekgegaan naar een color picker script. Ik heb de volgende gevonden: http://www.flooble.com/scripts/colorpicker.php.

Als ik dit in een losstaande HTML pagina gooi dan werkt het perfect. Zodra ik het echter in mijn PHP pagina gooi werkt het niet meer. Het enige wat de PHP pagina doet is de file in de body includen.

Ik zelf al wat aan het analyseren gegaan en ben er achter gekomen dat het te maken heeft met het feit dat er meerdere div (id's) op de pagina voorkomen. Zodra alle div's uit mijn pagina haal werkt het wel goed. Volgens mij maakt dit script een div aan met de id: colorpicker. Ik begrijp dan niet waarom de andere (mijn) div's in de weg kunnen zitten, omdat het script de aangemaakte div toch op basis van de id opvraagt?

Ik weet dat jullie niet een door andere gemaakte script debuggen doen, maar dat is ook niet de bedoeling. Ik hoop alleen dat jullie me op weg kunnen helpen.

Het script:

code:

<script language="Javascript">
// Color Picker Script from Flooble.com
// For more information, visit 
//  http://www.flooble.com/scripts/colorpicker.php
// Copyright 2003 Animus Pactum Consulting inc.
// You may use and distribute this code freely, as long as
// you keep this copyright notice and the link to flooble.com
// if you chose to remove them, you must link to the page
// listed above from every web page where you use the color
// picker code.
//---------------------------------------------------------

     var perline = 9;
     var divSet = false;
     var curId;
     var colorLevels = Array('0', '3', '6', '9', 'C', 'F');
     var colorArray = Array();
     var ie = false;
     var nocolor = 'none';
     if (document.all) { ie = true; nocolor = ''; }
     function getObj(id) {
        if (ie) { return document.all[id]; } 
        else {  return document.getElementById(id); }
     }

     function addColor(r, g, b) {
        var red = colorLevels[r];
        var green = colorLevels[g];
        var blue = colorLevels[b];
        addColorValue(red, green, blue);
     }

     function addColorValue(r, g, b) {
        colorArray[colorArray.length] = '#' + r + r + g + g + b + b;
     }
     
     function setColor(color) {
        var link = getObj(curId);
        var field = getObj(curId + 'field');
        var picker = getObj('colorpicker');
        field.value = color;
        if (color == '') {
            link.style.background = nocolor;
            link.style.color = nocolor;
            color = nocolor;
        } else {
            link.style.background = color;
            link.style.color = color;
        }
        picker.style.display = 'none';
        eval(getObj(curId + 'field').title);
     }
        
     function setDiv() {     
        if (!document.createElement) { return; }
        var elemDiv = document.createElement('div');
        if (typeof(elemDiv.innerHTML) != 'string') { return; }
        genColors();
        elemDiv.id = 'colorpicker';
          elemDiv.style.position = 'absolute';
        elemDiv.style.display = 'none';
        elemDiv.style.border = '#000000 1px solid';
        elemDiv.style.background = '#FFFFFF';
        elemDiv.innerHTML = '<span style="font-family:Verdana; font-size:11px;">Kies een kleur: ' 
            + getColorTable() 
            + '</span>';

        document.body.appendChild(elemDiv);
        divSet = true;
     }
     
     function pickColor(id) {
        if (!divSet) { setDiv(); }
        var picker = getObj('colorpicker');         
        if (id == curId && picker.style.display == 'block') {
            picker.style.display = 'none';
            return;
        }
        curId = id;
        var thelink = getObj(id);
        picker.style.top = getAbsoluteOffsetTop(thelink) + 20;
        picker.style.left = getAbsoluteOffsetLeft(thelink);     
    picker.style.display = 'block';
     }
     
     function genColors() {
        addColorValue('0','0','0');
        addColorValue('3','3','3');
        addColorValue('6','6','6');
        addColorValue('8','8','8');
        addColorValue('9','9','9');                
        addColorValue('A','A','A');
        addColorValue('C','C','C');
        addColorValue('E','E','E');
        addColorValue('F','F','F');                                
            
        for (a = 1; a < colorLevels.length; a++)
            addColor(0,0,a);
        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(a,a,5);

        for (a = 1; a < colorLevels.length; a++)
            addColor(0,a,0);
        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(a,5,a);
            
        for (a = 1; a < colorLevels.length; a++)
            addColor(a,0,0);
        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(5,a,a);
            
            
        for (a = 1; a < colorLevels.length; a++)
            addColor(a,a,0);
        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(5,5,a);
            
        for (a = 1; a < colorLevels.length; a++)
            addColor(0,a,a);
        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(a,5,5);

        for (a = 1; a < colorLevels.length; a++)
            addColor(a,0,a);            


        for (a = 1; a < colorLevels.length - 1; a++)
            addColor(5,a,5);
            
        return colorArray;
     }
     function getColorTable() {
         var colors = colorArray;
         var tableCode = '';
         tableCode += '<table border="0" cellspacing="1" cellpadding="1">';
         for (i = 0; i < colors.length; i++) {
              if (i % perline == 0) { tableCode += '<tr>'; }
              tableCode += '<td bgcolor="#000000"><a style="outline: 1px solid #000000; color: ' 
                  + colors[i] + '; background: ' + colors[i] + ';font-size: 10px;" title="' 
                  + colors[i] + '" href="javascript:setColor(\'' + colors[i] + '\');">&nbsp;&nbsp;&nbsp;</a></td>';
              if (i % perline == perline - 1) { tableCode += '</tr>'; }
         }
         if (i % perline != 0) { tableCode += '</tr>'; }
         tableCode += '</table>';
         return tableCode;
     }
     function relateColor(id, color) {
        var link = getObj(id);
        if (color == '') {
            link.style.background = nocolor;
            link.style.color = nocolor;
            color = nocolor;
        } else {
            link.style.background = color;
            link.style.color = color;
        }
        eval(getObj(id + 'field').title);
     }
     function getAbsoluteOffsetTop(obj) {
        var top = obj.offsetTop;
        var parent = obj.offsetParent;
        while (parent != document.body) {
            top += parent.offsetTop;
            parent = parent.offsetParent;
        }
        return top;
     }
     
     function getAbsoluteOffsetLeft(obj) {
        var left = obj.offsetLeft;
        var parent = obj.offsetParent;
        while (parent != document.body) {
            left += parent.offsetLeft;
            parent = parent.offsetParent;
        }
        return left;
     }
</script>

De aanroep:

code:

                <b>Achtergrondkleur</b>
                  <a href="javascript:pickColor('picker1');" id="picker1" 
                    style="border: 1px solid #000000; font-family:Verdana; font-size:10px;
                    text-decoration: none;">&nbsp;&nbsp;&nbsp;</a>
                <input id="picker1field" size="7" type="hidden" onChange="relateColor('picker1', this.value);">

[BtM909]

Het is niet de bedoeling dat je een volledig script hier neerplempt en vervolgens wacht totdat iemand anders het oplost.

Je moet wel degelijk zelf debuggen en zelf erachter proberen te komen waar het probleem waarschijnlijk ligt. In dit geval zou ik contact opnemen met de maker, aangezien er weinig mensen zin hebben om 3rd party support te leveren.

Succes iig.