Adaptando el selector de color de caricatos

[X3mdesign]

Hola amigos!!! estoy intentando adaptar el selector de color que está en http://www.pepemolina.com/generador/generador.html si pinchamos en "configuración" aparece un popUp... pues bien quiero algo parecido a lo que ocurre si pinchas sobre un color... que se abre un popUp con el "gran selector"

Ahora os cuento cómo lo tengo yop y qué quiero que haga :)... tengo el site en PHP...

primeramente detecto si el campo que se muestra es un campo "color" y entonces escribo el código para que me muestre un <input> con el texto del campo y una tabla con el color para que al pincharlo me abra un popUp... esta es la función para mostrarlo:

Código PHP:

  function mostrarColor($name_campo,$color){ 
    echo "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" onclick=\"EditaColor(0, '$color')\"><tr><td>"; 
    echo "<input class=\"tb_input\" name=\"$name_campo\" type=\"text\" value=\"$color\" size=\"7\" maxlength=\"7\">"; 
    echo "</td><td width=\"10\"></td><td>"; 
    echo "<table width=\"22\" border=\"0\" cellpadding=\"0\" cellspacing=\"1\" bgcolor=\"#000000\"><tr><td bgcolor=\"$color\">&nbsp;</td></tr></table>"; 
    echo "</td></tr></table>"; 
}  
   

al pinchar sobre la tabla se ejectua el .js "editor_color.js" que es este:

Código:

<!-------------------      funciones          -------------------->
function alerta()	{
{alert("Esta página solo funciona como pop-up"); window.close();}
}

var boton = document.getElementsByName("color");
var colores;
var botones = document.getElementsByName("boton");
function ini()	{
if (!opener) alerta();
colores = opener.colores;

for (var i = 0; i < botones.length; i ++) {
	botones[i].style.cursor = (document.all) ? "hand" : "pointer";
	botones[i].style.backgroundColor = colores[2];
	botones[i].style.color = colores[3];
	}
for (var i = 0; i < boton.length; i ++) {
	boton[i].style.cursor = (document.all) ? "hand" : "pointer";
	boton[i].style.backgroundColor = colores[i];
	boton[i].style.border = "2px dotted white"; //***
	}
for (var i = 0; i < colores.length; i ++)	{
	editando = i;
	recoger(colores[i]);
	}
}

function fin()	{
	if (ventana) ventana.close();
	if (opener)
		opener.no_popup(5);
}

var editando;
var ventana = false;

function EditaColor(x, color)	{
if (!opener) alerta();
else	{
	for (i=0; i<8; i++) //***
		boton[i].style.border="2px solid white"; //***
	boton[x].style.border="2px dotted red"; //***
	editando = x;
	if (!ventana)
		ventana = window.open("color.html" + "?" + color, "flotante", "width=600,height=350");
	else
		ventana.document.getElementById("visor").style.backgroundColor = color;
	}
}

var resultado = "";
function recoger(x)	{
	resultado = x;
	boton[editando].style.backgroundColor = resultado;
	colores[editando] = resultado;
	switch (editando)	{
	case 0:
	document.getElementById("ej0").style.backgroundColor = resultado;
	break;
	case 1:
	document.getElementById("ej0").style.color = resultado;
	break;
	case 2:
	document.getElementById("ej1").style.backgroundColor = resultado;
	break;
	case 3:
	document.getElementById("ej1").style.color = resultado;
	break;
	case 4:
	document.getElementById("ej2").style.backgroundColor = resultado;
	break;
	case 5:
	document.getElementById("ej2").style.color = resultado;
	break;
	case 6:
	document.getElementById("ej3").style.backgroundColor = resultado;
	break;
	case 7:
	document.getElementById("ej3").style.color = resultado;
	break;
	}
}

function no_popup(x)	{
	ventana = false;
	return true;
}

var temas = [
	"#ffff00", "#000000", "#c0c0c0", "#000000", "#add8e6", "#000000", "#90ee90", "#000000",

	"#6600cc", "#ffffff", "#99afcc", "#ff0000", "#3399ff", "#66ff99", "#669999", "#99ffff",
	"#ffffff", "#660000", "#ffffff", "#660000", "#ffffff", "#660000", "#ffffff", "#660000",
	"#ffcc99", "#ff0066", "#3399ff", "#ffffff", "#669999", "#000033", "#ffffcc", "#990066",
	"#333399", "#ffffff", "#ccccff", "#330000", "#cc9999", "#660000", "#cc3333", "#ffffff",
	"#339999", "#ccffff", "#ffff99", "#cc0033", "#66cc66", "#660000", "#0099cc", "#ccffff",

	"#c0c0c0", "#ff0000", "#ffff00", "#000000", "#90ee90", "#000000", "#add8e6", "#000000",
	"#90ee90", "#ff0000", "#ff0000", "#000000", "#c0c0c0", "#000000", "#ffff00", "#000000",
	"#3333ff", "#ffff00", "#00ffff", "#660066", "#00ff00", "#660099", "#ff0000", "#ccff00",
	"#333366", "#ff0066", "#000000", "#00cc00", "#2f4f4f", "#ccff00", "#8b008b", "#00ccff"
	];

function tema(n)	{
var ini = 8 * n;
for (var i = 0; i < 8; i ++)	{
	colores[i] = temas[ini + i];
	boton[i].style.backgroundColor = colores[i];
	switch (i)	{
	case 0:
	document.getElementById("ej0").style.backgroundColor = colores[i];
	break;
	case 1:
	document.getElementById("ej0").style.color = colores[i];
	break;
	case 2:
	document.getElementById("ej1").style.backgroundColor = colores[i];
	break;
	case 3:
	document.getElementById("ej1").style.color = colores[i];
	break;
	case 4:
	document.getElementById("ej2").style.backgroundColor = colores[i];
	break;
	case 5:
	document.getElementById("ej2").style.color = colores[i];
	break;
	case 6:
	document.getElementById("ej3").style.backgroundColor = colores[i];
	break;
	case 7:
	document.getElementById("ej3").style.color = colores[i];
	break;
	}
}
}
function formulario()	{
	var c = confirm("enviar colores al autor para incluirlos");
	if (c)	{
		document.forms[0].tema.value = window.prompt("Introduzca el nombre del tema:", "Tema");
		document.forms[0].colores.value = colores;
		document.forms[0].submit();
	}
}

function actualizar()	{
	opener.colores = colores; 
	opener.ponColores();
	opener.expandir();
}

y me sale el mensaje de error: Esta página solo funciona como pop-up tengo desactivado el anti-popUp para ese dominio... pero sigue sin funcionar...

me podéis echar un cable?? muchas gracias!!!

[JavierB]

Hola X3mdesign

¿Quieres poner el selector de color en la misma página o en un pop-up?

Saludos,

[X3mdesign]

quiero que salga en un popUp... lo que me he dado cuénta es que al pinchar sobre la tabla para abrirlo primero comprueba si está en un popUp el script... es lo que me parece entender del .js... pero es que de javascript ando bastante flojo....

[JavierB]

Hola de nuevo.

Revisando la página de caricatos (Cuantos recuerdos, Maestro ) veo que lo que hace es abrir en un pop-up la página color.html y ahí es donde está el código que has puesto en tu mensaje.

Es decir, tienes tienes que crearte una página en la que pongas:

<script type="text/javascript" src="editor_color.js"></script>

en el body pones:

<body style="margin:0;padding:0;" onload="ini()" onunload="fin()" >

y cuando lo necesites la llamas con: window.open('tupagina.html');

Espero que se entienda. Saludos,

P.D. Me parece que este mensaje terminará en el foro de JavaScript

[X3mdesign]

mmmmmmm a ver si me aclaro...

el .js lo tengo que lincar a la weg donde aparezca la mustra del color actual?? o en la web donde aparece el selector... y lo del <body>??

La cuestión es que cuando se abra el popUp, al pinchar en la muestra de color, la modificación que se realice en el selector deberá ser actualizada en la muestra...

Gracias Javier!!!

[caricatos]

Iniciado por JavierB

... Cuantos recuerdos, Maestro

Iniciado por JavierB

P.D. Me parece que este mensaje terminará en el foro de JavaScript

Hola a todos:

El proyecto completo se puede ver en este enlace: http://www.forosdelweb.com/f4/trabajo-equipo-82337/

Otro tema que empecé que supongo que te puede interesar es este: http://www.forosdelweb.com/f4/todo-sobre-colores-124097/

Creo que este tema estaría mejor en javascript... si coincides en ello, te recomiendo que lo notifiques a los moderadores para que lo cambien (o que lo junten al "otro")

Saludos

[X3mdesign]

okas, les echaré un vistazo

lo notificaré... lo puse en PHP porque como uso PHP en parte del código... pues igual era mejor... pero lo cierto es que el el js lo que no me funciona bien (debido a mi torpeza)

gracias de nuevo!!!

editado: mmmmmmmmmm, por cierto, cómo notificarlo?? he vuscado un enlace para ello... pero no lo veo...

[JavierB]

Hola X3mdesign

Ya he reportado el mensaje para que lo muevan a JavaScript. De todas formas te cuento como se hace:

En la parte de arriba a la derecha de cada mensaje (excepto en los que pones tú) hay un triangulo lo pulsas y te sale una pantalla para que indiques a los moderadores el motivo de tu reporte.

Saludos,

[caricatos]

Hola otra vez:

Ya en "casa", recapitulemos

Si tienes una página donde ver tus progresos es mucho mejor... También puedes empezar por algo más sencillo, y luego ir mejorándolo.

Saludos

[Holden]

Si hubiera sabido antes de esto me hubiera ahorrado horas de laburo jajajajja

[X3mdesign]

por supuesto caricatos, aquí lo he subido :)

http://fiesta-amigos.webcindario.com/menu.htm

al pinchar en la muestra del color a mi me sale un avis de que se está ejecuando un script que ralentiza el firefox... pero creo que es por la publi de miarroba :)