Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc

[exael]

Salutare...

Am un mic script in ajax asa zice omu ca e de pe net... bun

Eu am mai mudificat putin designu... in fine

dar ce vreau eu... vreau sa aleg culoarea din colorpicker popup si sa-mi aduca codul culorii intr-un input si nu stiu cum sa fac treaba asta.... sunt BUBA la javascript

aici am scriptul

css-ul

Cod:
<style type="text/css">

#cmd_color {
    background:#ffffff;
   cursor:pointer;
   border:#999999 solid 1px;
    padding: 2px;
   width:20px;
   height:20px;
}

#colorpicker_popup {
    border: 1px solid #999;
    position: absolute;
    background: #fff;
   padding:8px;
    display: none;
}

.colorbox {
   
    height: 10px;
    width: 10px;

}

.colorbox_cell {

}

.colorbox_hover {

   cursor:pointer;
}

</style>


js-ul

Cod:
<script    type="text/javascript">

var userAgent     = navigator.userAgent.toLowerCase();
var is_op         = (userAgent.indexOf('opera') != -1); //is opera
var is_saf         = (userAgent.indexOf('safari') != -1); //is safari
var is_ie         = (userAgent.indexOf('msie') != -1 && (!is_op) && (!is_saf)); //is internet explorer
var is_nn         = (userAgent.indexOf('netscape') != -1); //is netscape
var is_moz         = ((navigator.product == 'Gecko') && (!is_saf)); //is mozilla

var colors = new Array(new Array("#0247FE", "albastru_inchis"),  new Array("#0392CE", "albastru_deschis"), new Array("#66B032", "verde_inchis"), new Array("#D0EA2B", "verde_deschis"),new Array("#FEFE33", "yellow"),new Array("#FABC02", "portocaliu"), new Array("#FFCC99", "piele"), new Array("#FD5308", "caramiziu"), new Array("#FD1408", "rosu"), new Array("#A7194B", "violet_inchis"), new Array("#FD08F4", "roz"), new Array("#8601AF", "violet"), new Array("#3D01A4", "albastru"), new Array("#663300", "maro")

, new Array("#f5f5f5", "alb"), new Array("#CCCCCC", "gry_1"), new Array("#999999", "gry_2"), new Array("#666666", "gry_3"), new Array("#333333", "gry4"), new Array("#000000", "negru")

);
var color_enabled = false;

/* Create the main div cell, position and initiate */
function color_init()
{
    var body = document.body;
    var color = document.createElement("div");
    color.setAttribute("id", "colorpicker_popup");
    body.appendChild(color);
   
    var elem = getObject("cmd_color");
    var e = getObject("colorpicker_popup");
   
    /* Build Color */
    var head = color_createTable(e);
    color_createPalette(head);
   
    /* Positioning */
    if (!is_ie)
    {
        var top = elem.offsetTop + elem.offsetHeight + "px";
        var left = elem.offsetLeft + "px";
        e.style.top = top; e.style.left = left;
    }
    else
    {
        var top = elem.offsetTop + elem.offsetHeight + "px";
        var left = elem.offsetLeft + "px";
        e.style.top = top; e.style.left = left;
    }
   
    color_enabled = true;
}

/* Create the Table */
function color_createTable(id)
{
    var table = document.createElement("table");
    table.setAttribute("cellpadding", 0);
    id.appendChild(table);
    return table;
}

/* Create the Rows (TR) pass on to other function to create Cells */
function color_createPalette(head)
{
    var row;
    for (var i = 0; i < colors.length; i = i + 1)
    {
        if ((i % 14) === 0)
        {
            row = document.createElement("tr");
            head.appendChild(row);

        }
        color_createCell(row, colors[i]);
    }
}

/* Create the Table Cell (Td) with ID, Class and inside it the DIV Tag with the background color */
function color_createCell(row, colorArray)
{
    var td = document.createElement("td");
    td.setAttribute("id", "cell_palette_" + colorArray[1]);
    td.setAttribute("class", "colorbox_cell");
   
    var div = document.createElement("div");
    div.setAttribute("id", "palette_"+colorArray[1]);
    div.setAttribute("class", "colorbox");
    div.setAttribute("style", "background: "+ colorArray[0]);
   
    var divtxt = document.createTextNode(1);
   
    td.appendChild(div);
    row.appendChild(td);
   
    var e = getObject("palette_"+colorArray[1]);
    if (!is_ie && !is_op)
    {
        e.addEventListener("mouseover", color_cellHover, true);
        e.addEventListener("mouseout", color_cellHover, true);
    }
    else
    {
        e.onmouseover = color_cellHover;
        e.onmouseout = color_cellHover;
    }
}

/* Make the TD Cell hover with a background color */
function color_cellHover(e)
{
    e = (window.event ? window.event : e);
    var id = (!is_ie ? e.target.id : e.srcElement.id);
   
    var elem = getObject("cell_" + id);
    if (elem.className != "colorbox_hover")
    {
        elem.className = "colorbox_hover";
    }
    else
    {
        elem.className = "colorbox_cell";
    }
   
}

/* End Color */

function getObject(id)
{
    if (document.getElementById(id) !== null)
    {
        return document.getElementById(id);
    }
}

function showColor()
{
    if (color_enabled === true)
     getObject("colorpicker_popup").style.display = (getObject("colorpicker_popup").style.display === "none" ? "block" : "none");
}

</script>


si HTML-ul

Cod:
<body onload="color_init();">
<div onclick="showColor();" id="cmd_color" ></div>

</body>



Scuze ca am pus toata chila de cod dar poate mai are cineva nevoie de asa ceva ;)

aaa si inca ceva... poate va ganditi de ce nu iau unu de pe net... am cautat dar nu gasesc ce vreau eu...

Daca ma puteti ajuta o sa va raman dator :P

Va multumesc

[carco]

JQuery + Farbtastic
http://www.acko.net/dev/farbtastic

[exael]

Merci carco dar eu nu am nevoie de toata paleta de culori am nevoie doar de cateva culori...

Dar am sa ma uit si la ce ai dat tu sa vad poate prind de acolo ideea cum pot trimite inntr-un form culoarea

Merci mult

[exael]

salutare....

Am reusit sa fac sa pot alege culoarea dar nu stiu cum s-o aduc intr-un input acum... merge doar sa schimb culoarea backbround-ului dar eu vreau sa-mi afiseze codul culorii

am asa

Cod:
<iframe   width="200" height="70" name="palette" id="palette" src="palette.html" marginwidth="0" marginheight="0" scrolling="no" style="position:absolute;visibility:hidden;"></iframe>
<br>

     <div id="cmd_color"  onClick="showPalette(this,'document.body.style.background')" style=" background: ;display:block;width:30px;height:30px;padding:0px;margin:0px;background:#FFFFFF;border:1px #333333 solid;"></div>
   </center>

nu stiu ce sa scriu in chestia asta ca sa-mi afiseze culoarea

Cod: showPalette(this,'document.body.style.background')

vreau un exemplu ceva

va multumesc

[exael]

Gata am rezolvat.... am gasit cateva tutoriale pe net

acum sa pun si rezolvarea poate are cineva nevoie de un color picker de genu


Cod:
<html>
<head>
<style type="text/css">

#agent99 {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:10px;
    color:#666666;
   background:#ffffff;
   cursor:pointer;
   border:#999999 solid 1px;
   padding: 2px;
   width:200px;
   height:auto;
   position:absolute; visibility:hidden;
   left: 35px;
   top: 10px;
}

#colorpicker_popup {
    border: 1px solid #999;
    position: absolute;
    background: #fff;
   padding:8px;
    display: none;
}

.colorbox {
   
    height: 10px;
    width: 10px;

}
</style>

<script type="text/JavaScript">
var colours = new Array("#0247FE", "#0392CE", "#66B032", "#D0EA2B", "#FEFE33", "#FABC02", "#FFCC99", "#FD5308", "#FD1408", "#A7194B", "#FD08F4", "#8601AF", "#3D01A4", "#663300", "#f5f5f5", "#CCCCCC", "#999999", "#666666", "#333333", "#000000");

var divPreview;
function mouseOver(el, Colour){
  divPreview.style.background = Colour;
  document.frmColour.ColorHex.value = Colour;
  el.style.borderColor = '#FFFFFF';
}

function mouseOut(el){
  el.style.borderColor = '#666666';
}

function mouseDown(Colour){
  self.parent.setColor(Colour);
  self.parent.palette.style.visibility = 'hidden';
}

function init(){
   divPreview = Obj("divPreview");
}

function Obj(name) {
   return document[name]||(document.all && document.all[name])||(document.getElementById && document.getElementById(name));
}
//Arata paleta de culori

var state = 'hidden';

function showhide(layer_ref) {

if (state == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.visibility = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].visibility = state;
}
if (document.getElementById && !document.all) {
maxwell_smart = document.getElementById(layer_ref);
maxwell_smart.style.visibility = state;
}
}


</script>

</head>
<body bgcolor="#FFFFFF" onLoad="init();">


<form name="frmColour" style="padding:0px;margin:0px;">
  <table width="100" border="0">
    <tr>
      <td><div name="divPreview" onclick="showhide('agent99');" id="divPreview" style=" cursor:pointer; height:20px;width:20px;border:1px #000000 solid;"></div></td>
      <td><input readonly type="hidden" name="ColorHex" value="" size=10 style="width:80px;font-size: 12px"></td>

    </tr>
  </table>
</form>

<div id="agent99"> Color palete
<script type="text/JavaScript">
<!--
code = "<table  cellpadding='0' cellspacing='0' border='0' width='200'>";
for (i = 0;i < 20; i++){
   if((i)%14 == 0)code += "<tr>";
   code += "<td style='cursor:pointer' width='25' id='el_"+i+"' colspan=2 bgcolor="+colours[i]+" onclick=\"showhide('agent99');\" onMouseOver=\"mouseOver(this, '"+colours[i]+"');\" onMouseOut='mouseOut(this)' onClick=\"mouseDown('"+colours[i]+"');\">&nbsp;</td>\n";
   if((i+1)%14 == 0)code += "</tr>\n";
}
document.write(code+"</table>");
//-->
</script>
</div>

</body>
</html>

[PHPRomania Bot]