Cambiar CSS de forma permanente (JQuery)

NSD · #1 (**permalink**) 17/09/2012, 11:18

hola gente que tal, tengo un problema con la siguiente funcion:

Código Javascript:

Ver originalfunction CambiarTheme(ID){
                THM = new Array();
                THM[0] = new Array();
                THM[0][1] = "800000";   
                THM[0][2] = "AA0000";
                THM[1] = new Array();
                THM[1][1] = "008000";
                THM[1][2] = "00AA00";
                THM[2] = new Array();
                THM[2][1] = "000080";
                THM[2][2] = "0000AA";
                STL = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#'+THM[ID][1]+'), to(#'+THM[ID][1]+'), Color-stop(.5,#'+THM[ID][2]+'),Color-stop(.9,#'+THM[ID][2]+'))';
                $('Body > Header').css('background-image', STL);
                $('Input[Type=\'Submit\']').css('background-image', STL);
            }

obviamente utilizo jquery (lo notaran por la sintaxis).

bien el tema es el siguiente, la funcion anda perfectamente el tema es que una parte de mi web se carga de forma asincronica y si ejecuto la funcion cambian los colores pero al cargarse un nuevo "submit" lo hace con el estilo por defecto y no con el especificado y debo ejecutar nuevamente la funcion.

la pregunta, hay alguna forma de aplicar ese estilo para todos los elementos que se creen dinamicamente luego?

Naahuel · #2 (**permalink**) 17/09/2012, 15:50

Lo mejor sería usar una cookie. Cuando hagas el traspaso del tema, con AJAX podés enviar al servidor el cambio de theme y este almacenaría una cookie en el cliente. Luego, usarías esa cookie para cargar el theme.

También podés usar cookies directamente con jQuery. Ahí podés almacenar la preferencia del usuario. http://www.electrictoolbox.com/jquery-cookies/

Naahuel · #3 (**permalink**) 17/09/2012, 15:51

Acá podés ver un ejemplo http://lineadecodigo.com/jquery/usan...es-con-jquery/

NSD · #4 (**permalink**) 18/09/2012, 18:00

hola naahuel gracias por responder, creo que me he expresado mal porque usar cookies para lo que quiero hacer me parece innesesario.

mi problema es el siguiente (intento reformular) tengo en css:

Código CSS:

Ver originalBody > Header , Input[Type='Submit'] {background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#000), Color-stop(.5,#222),Color-stop(.9,#222))}

ese esta en la hoja de estilos y anda bien, por otro lado tengo la funcion que mostre antes.
cuando corro la funcion todos los elementos que veo en pantalla cambian su css pero los que se crean nuevamente no.

yo creo nuevos input (como son input podria ser tambien con una clase css) y esta toma la que esta en la hoja css no la que cambie, mi pregunta mas directa es como cambiar un atributo de la hoja de estilos css principal con jquery, puesto que si lo hago como hasta ahora cambio el de los elementos actuales pero no de la hoja principal.

espero haberme explicado bien saludos.

Naahuel · #5 (**permalink**) 18/09/2012, 18:39

Creo haber entendido. Aplicás estilos CSS a unos inputs, unos por uno. Y querés que los nuevos hereden ese estilo.

¿Por qué no usas clases? Añadí clases al <body>. Y en tu hoja de estilos pondrías algo así:

Código CSS:

Ver original.dark input{
background: black; color: white;
}
 
.light input{
background: white; color: black;
}

De esta manera los inputs nuevos simplemente heredarán los estilos de acuerdo a la clase que tenga el body.

Creo que un ejemplo explicará mejor: http://jsbin.com/akipup/1

Como verás ahí, si cambias el tema, los inputs (nuevos y viejos) siempre cambian.

-edit-
En el ejemplo, los inputs se agregan en cualquier lado :P No tengo ganas de corregirlo, igual funciona.

NSD · #6 (**permalink**) 18/09/2012, 18:54

hola de nuevo, ahi te estas acercando a lo que quiero hacer jaja

Cita:

En el ejemplo, los inputs se agregan en cualquier lado :P No tengo ganas de corregirlo, igual funciona.

no problem, para dar la idea alcanza y sobra.

estube viendo el codigo pero hay un detalle, no usaria clases :S
el valor de los atributos no siempre son predefinidos.

por la web encontre esto:

Código Javascript:

Ver originalfunction cambiarPropiedad(regla,propi,valor) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++)
    if (reg.selectorText.toLowerCase() == regla.toLowerCase() )
      reg.style[propi]=valor;
}

y funciona como quiero (masomenos) esa funcion cambia el valor en el css de forma directa el tema es que no me convence mucho eso de hacer un for recorriendo todos los estilos hasta dar con el indicado, no habra algo asi en jquery?

Naahuel · #7 (**permalink**) 18/09/2012, 18:58

Mmm. No sé. Me parece ineficiente. Yo usaría las clases, es todo lo que se me ocurre. No veo por qué la limitación...

NSD · #8 (**permalink**) 18/09/2012, 19:05

Cita:

Me parece ineficiente.

a mi tambien, es lo que no me cierra.
el tema es que tendria un boton de una clase y cada vez que lo creo tendia que estar "pendiente" a variale la clase segun corresponda, en cambio si una sola vez cambio el atributo de una clase unica me olvido del tema y funcionaria ciempre de forma eficiente.

vere si puedo adaptarlo a algo un poco "mas lindo" y lo publico, muchas gracias por tu ayuda

NSD · #9 (**permalink**) 18/09/2012, 19:57

bueno como lo prometido es deuda aqui publico la solucion que utilizare por si a alguien mas le sirve:

utilice el plugin de jquery: http://flesler.blogspot.com.ar/2007/11/jqueryrule.html

y con eso lo arregle XD

la funcion quedo asi:

Código Javascript:

Ver originalfunction CambiarTheme(ID){
    var EST = xajax.call('EVCCT', {mode:'synchronous', parameters:[ID]});
    if (EST){
        THM = new Array();
        THM[0] = new Array();
        THM[0][1] = "800000";   
        THM[0][2] = "AA0000";
        THM[1] = new Array();
        THM[1][1] = "008000";
        THM[1][2] = "00AA00";
        THM[2] = new Array();
        THM[2][1] = "000080";
        THM[2][2] = "0000AA";
        STL = '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#'+THM[ID][1]+'), to(#'+THM[ID][1]+'), Color-stop(.5,#'+THM[ID][2]+'),Color-stop(.9,#'+THM[ID][2]+'))';
        $.rule('Body > Header { Background-Image : '+STL+'; }').appendTo('link');
        $.rule('Input[Type=\'Submit\'] { Background-Image : '+STL+'; }').appendTo('link');
        CargarContenido('ESV','Cambiado',1);
    } else {        
        CargarContenido('ESV','Error',1);
    }
    return false;   
}