CSS de objeto dinámico

Krlinhos · #1 (**permalink**) 19/11/2012, 06:22

Hola,

tengo un problema con el css. Cuando creo un elemento que antes no existia en el DOM y a este quiero cambiarle el estilo del css, pues lleva uno u otro dependiendo de unas cosas, no puedo.

Por ejemplo se que existe el evento live, pero no me sirve, porque ya lo probé.

Alguien me podria dar una solución, u orientarme al menos??

Gracias y un saludo.

caricatos · #2 (**permalink**) 19/11/2012, 06:41

Hola:

Cita:

Iniciado por Krlinhos

...se que existe el evento live...

Pues no... ese evento no existe en javascript

A los elementos creados dinámicamente no hay problema en aplicarle estilos o clases...

Saludos

Albuss · #3 (**permalink**) 19/11/2012, 07:03

Ejemplo para cambiar "dinamicamente" css mediante jsvascript :

Código Javascript:

Ver originaldocument.getElementById('id').style.(propiedad) 
 
/*El id puedes crearlo mediante un node, la propiedad puede ser cualquiera de CSS3 (en chrome) ne firefox y en IE hay reestricciones.*/
 
document.getElementById('id').style.backgroundImage = 'parametro' 
 
//el parametro tiene que ir entre comillas simples, no como en un array.

¿Que pasa si quiero añadir valores tipo int/float? , me alegra que me hagas esa pregunta (de nada, brais) gracias brais!** xD , veamos un ejemplo :

Código Javascript:

Ver originaldocument.getElementById('id').style.webkitTransform ='translateX('+(valor)+'px)';
/*simplemente utilizamos el digno de concatenar elementos , es decir + a la apertura y al cierre.
ejemplo completo : */
document.getElementById('divCAJABOX').style.webkitTransform ='translateX('+(120)+'px)';

Espero que te sea de ayuda. Recuerda que Javascriopt es un lenguaje imperativo y el termino "dinamico" es pura redundancia.

ps. **me llamo brais, era una pequeña irreverencia por mi parte.

caricatos · #4 (**permalink**) 19/11/2012, 07:11

Hola:

Cita:

Iniciado por Albuss

//el parametro tiene que ir entre comillas simples, no como en un array.

No sé quién es el autor de los comentarios (no me refiero al código)... pero el tipo de comillas no tiene importancia... incluso podría ser una variable...

Saludos

emprear · #5 (**permalink**) 19/11/2012, 07:14

Cita:

Iniciado por Krlinhos

Hola,

tengo un problema con el css. Cuando creo un elemento que antes no existia en el DOM y a este quiero cambiarle el estilo del css, pues lleva uno u otro dependiendo de unas cosas, no puedo.

Por ejemplo se que existe el evento live, pero no me sirve, porque ya lo probé.

Alguien me podria dar una solución, u orientarme al menos??

Gracias y un saludo.

Eso de live, me suena a que estás utilizando jquery, lo cual desvirtuaría la respuesta a tu pregunta, en casos como este debés acompañar la pregunta del código utilizado, incluso si no te funciona.
De estar creando un elemento y en base aciertas condiciones modificar su estilo, lo apropiado sería

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
/* estilos */ 
.rojo{
color: red;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function crearCapa(){
var capa=document.createElement("div");
var texto=document.createTextNode("hola");
capa.appendChild(texto);
/* aqui ponés una condición para asignar una clase o definir un estilo */
capa.className = "rojo";
capa.style.border="1px solid #000";
document.body.appendChild(capa);
};
onload=crearCapa;
//]]>
</script>
</head>
<body>
 
</body>
</html>

Pero eso es solo orientativo ya que no se sabe, repito, que estás haciendo al momento

Saludos

Albuss · #6 (**permalink**) 19/11/2012, 07:18

Cita:

Iniciado por caricatos

Hola:
No sé quién es el autor de los comentarios (no me refiero al código)... pero el tipo de comillas no tiene importancia... incluso podría ser una variable...
Saludos

Nop, lo se, lo he intentado y al menos ami solo me funcionan las comillas simples, creo que tiene algo que ver con la interpretacion que hace el interprete, aunque puedes ponerme un ejemplo si me equivoco.

Por cierto, ¿que pasa si queremos pasar una variable en vez de un integer o un valor puro? , veamos :

Código Javascript:

Ver originaldocument.getElementById('divCAJABOX').style.webkitTransform ='translateX('+(MiVariable)+'px)';
/*Vease lo facil que resulta
 Podriamos complicar un poco mas el asunto aunque seria tarea dificil, pues para modificar una variable en el mismo aprametro solo hay que usar operadores logicos como en una sentencia normal :*/
document.getElementById('divCAJABOX').style.webkitTransform ='translateX('+(120+MiVariable)+'px)';

emprear · #7 (**permalink**) 19/11/2012, 08:20

Cita:

Iniciado por Albuss

aunque puedes ponerme un ejemplo si me equivoco.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
 
#divCAJABOX{
background: lime;
width: 300px;
height: 200px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function tr(MiVariable){
document.getElementById('divCAJABOX').style.margin ="10px " + MiVariable + "px";
document.getElementById('divCAJABOX').style.border ='solid #000 '+(3+MiVariable)+'px';
document.getElementById('divCAJABOX').innerHTML ="texto <br \/> " +(3*MiVariable) + "<br \/>texto<br \/>" + (3+MiVariable);
}
//]]>
</script>
</head>
<body>
<button  onclick="tr(20);">modificar</button>
<div id="divCAJABOX">
xxxxx
</div>
</body>
</html>

Funciona de las dos formas
SAludos

Albuss · #8 (**permalink**) 19/11/2012, 08:26

He observado que has utilizado el signo de concatenar como si fuera un operador de suma, aunque no sea necesario al igual que en los if/else, siempre hay que tender a utilizar las llaves de apertura y cierre, que en este caso son los paréntesis.

'12px' no es igual que 'parametro('+(12)+'px)'; , luego vienen los fallos ¿aleatorios? y nos volvemos locos buscando algo simple. Hablo desde la experiencia.

emprear · #9 (**permalink**) 19/11/2012, 08:58

Cita:

Iniciado por Albuss

He observado que has utilizado el signo de concatenar como si fuera un operador de suma, aunque no sea necesario al igual que en los if/else, siempre hay que tender a utilizar las llaves de apertura y cierre, que en este caso son los paréntesis.

'12px' no es igual que 'parametro('+(12)+'px)'; , luego vienen los fallos ¿aleatorios? y nos volvemos locos buscando algo simple. Hablo desde la experiencia.

querías un ejemplo en el que las comillas simples y las comillas dobles fuesen indistintos en el funcionamiento, pues bien, en ese ejemplo se demuestra.
la modificación de un estilo requiere en este caso la especificación del tipo de unidad en la que se trabaja,
miVariable + 'px' representa dicho valor para la propiedad a modificar, border.
No veo diferencia con hacer

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
function tr(MiVariable){
document.getElementById('divCAJABOX').style.margin ="10px " + MiVariable + "px";
document.getElementById('divCAJABOX').style.border ='solid #000 '+(3+MiVariable)+'px';
document.getElementById('divCAJABOX').style.borderRadius =(2*MiVariable+(50))+'px';
document.getElementById('divCAJABOX').innerHTML ="texto <br \/> " +(3*MiVariable) + "<br \/>texto<br \/>" + (3+MiVariable);
document.getElementById('divCAJABOX').style.webkitTransform ='translateX('+(MiVariable)+'px)';
document.getElementById('divCAJABOX').style.webkitTransform ="translateY("+(620+MiVariable)+"px)";
}
 
//]]>
</script>

Los paréntesis son necesarios para definir la operación, no es lo mismo
"translateY("+(620+MiVariable)+"px)"
que
"translateY("+620+MiVariable+"px)"

en cuanto a los paréntesis contenidos entre las comillas, simple o dobles, son solo parte de la cadena que corresponde a la propiedad css.
Utilizo el signo + ya sea para concatenar y crear la cadena final ó para definir la operación según vaya siendo necesario.

Fallos aleatorios?

No encuentro la relación

Saludos

Albuss · #10 (**permalink**) 19/11/2012, 09:04

Gracias por el ejemplo extendido, por cierto en cuanto a lod e fallos aleatorios , ¿Mi lexico se confunde demasiado como para apreciar ironias?

emprear · #11 (**permalink**) 19/11/2012, 09:23

Cita:

Iniciado por Albuss

Gracias por el ejemplo extendido, por cierto en cuanto a lod e fallos aleatorios , ¿Mi lexico se confunde demasiado como para apreciar ironias?

De nada @Albuss.
Con respécto a tu léxico, tenés que entender lo siguiente, no todos los que participan de un post tiene el mismo nivel de conocimiento y por extensión de comprensión de lo que se señala. Por eso ciertos conceptos no los podemos dejar en el aire, por ejemplo:

Cita:

el parametro tiene que ir entre comillas simples, no como en un array.

(imaginate si la gente que esta empezando con js toma eso como una premisa cierta)
@caricatos te lo señalo y yo te lo ejemplifiqué, lo mismo se aplica al uso de 12 ó (12)
entre quienes manejamos un poco más la cosa, son aceptables la "ironías", pero no siempre los que están comenzando las van a interpretar correctamente.
Y te lo dice alguien que también se pone bastante irónico a veces
http://www.forosdelweb.com/f4/como-i...2/#post4313369
http://www.forosdelweb.com/f4/como-i...2/#post4313703

Saludos colega

Krlinhos · #12 (**permalink**) 19/11/2012, 10:06

Hola, si que dio q hablar jajaja gracias a todos. Como dice Emprear estoy usando jQuery. Probare lo que me deciis a ver si consigo de una vez arreglar el desaguisado :)

PD.- simplemente estoy intentando hacer que cuando se haga click sobre un icono, aparezca un div con un texto informativo, pero eso necesito dar "dinamicamente" el valor de 'left' y 'top' para que el div se posicione en el sitio correcto :)

Saludos!

Krlinhos · #13 (**permalink**) 20/11/2012, 05:32

Hola os adjunto mi código para que podáis ver la función:

Código:

function mostrarAlt(info,event)
{
	$('body').prepend('<div id="wInfo"">'+info.attr("alt")+'</div>');
	//determina un margen de pixels del div al raton
	margin=5;

	//La variable IE determina si estamos utilizando IE
	var IE = document.all?true:false;
	//Si no utilizamos IE capturamos el evento del mouse
	var tempX = 0;
	var tempY = 0;

	if(IE)
	{ //para IE
		tempX = event.clientX + document.body.scrollLeft;
		tempY = event.clientY + document.body.scrollTop;
	}else{ //para netscape
		tempX = event.pageX;
		tempY = event.pageY;
	}
	if (tempX < 0){tempX = 0;}
	if (tempY < 0){tempY = 0;}

	document.getElementById('wInfo').style.top = (tempY+margin);
	document.getElementById('wInfo').style.left = (tempX+margin);
	document.getElementById('wInfo').style.display='block';
	return;
}

caricatos · #14 (**permalink**) 20/11/2012, 05:51

Hola:

No creo que seas necesario usar una librería, pero ya que has puesto el código, no te olvides de las magnitudes, que creo que son pixeles...

Código:

document.getElementById('wInfo').style.top = (tempY+margin) + "px";

Saludos

emprear · #15 (**permalink**) 20/11/2012, 07:48

@Krlinhos
Quizás no entendí lo que querés hacer, pero creo que algo asi bastaría

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Sitio en Mantenimiento</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
.icono{
width: 100px;
height: 20px;
margin: 10px 0;
background: lime;
cursor: pointer;
}
#wInfo{
border: dotted 1px #666;
width: 300px;
height: 100px;
position: absolute;
top: -500px;
margin: 10px;
}
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
function info(l,t,texto){
if(l == undefined){
document.getElementById('wInfo').style.top ="-500px";
return false;
}
document.getElementById('wInfo').style.top = t + "px";
document.getElementById('wInfo').style.left = l + 'px';
document.getElementById('wInfo').innerHTML = texto;
}
//]]>
</script>
</head>
<body>
<div class="icono" onclick="info(100,300,'texto informativo para icono 1')">icono 1</div>
<div class="icono" onclick="info(400,500,'texto informativo para icono 2')">icono 2</div>
<div class="icono" onclick="info(650,50,'texto informativo para icono 3')">icono 3</div>
<div id="wInfo" onclick="info();"><!-- click sobre esta capa oculta el mensaje --></div>
</body>
</html>

Krlinhos · #16 (**permalink**) 23/11/2012, 10:41

Ey! gracias a todos, ya esta solucionao, es que soy medio tonto y no ponia lo de px... o cuando lo puse lo puse mal y por eso crei que ahí no andaba el fallo ;)

Gracias de nuevo!