Cambiar estilos sin recargar

rimtzg · #1 (**permalink**) 11/10/2006, 21:22

Como puedo cambiar el estilo de mi pagina sin recargarla
tengo un HTML y varios CSS y el HTML usa el estilo del CSS como puedo cambiar de forma que no recargue la pagina el archivo CSS del que toma el estilo?

MaBoRaK · #2 (**permalink**) 12/10/2006, 15:37

loading.............

es sencillo si tu estructura es asi

Código:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
</head>
<body>
</body>
</html>

entonces lo que debes hacer es una funcion por ejemplo:

Código:

remover=function(elemento)
{
elem = (typeof elemID == "string")?document.getElementById(elemID):elemID;
				if(elem.parentNode)
				{
					elem.parentNode.removeChild(elem);
				}
				else if(elem.parentElement)
				{
					elem.parentElement.removeChild(elem);
				}
}
cambia=function()
{
a=document.getElementsByTagName("HTML");
b=a[0].getElementsByTagName("HEAD");

//remover el estilo.css
remover(b[0].getElementsByTagName("link")[0]);

//poner nueva hoja de estilos
link=document.createElement("link")
link.rel="stylesheet";
link.type="text/css";
link.href="nuevahoja.css";
b[0].appendChild(link)
}

ahora todo en uno

Código:

<html>
<head>
<link rel="STYLESHEET" type="text/css" href="estilo.css">
<script type="text/javascript">
remover=function(elemento)
{
elem = (typeof elemID == "string")?document.getElementById(elemID):elemID;
				if(elem.parentNode)
				{
					elem.parentNode.removeChild(elem);
				}
				else if(elem.parentElement)
				{
					elem.parentElement.removeChild(elem);
				}
}
cambia=function()
{
a=document.getElementsByTagName("HTML");
b=a[0].getElementsByTagName("HEAD");

//remover el estilo.css
remover(b[0].getElementsByTagName("link")[0]);

//poner nueva hoja de estilos
link=document.createElement("link")
link.rel="stylesheet";
link.type="text/css";
link.href="nuevahoja.css";
b[0].appendChild(link)
}
</script>
</head>
<body>
blabla texto con formato aqui.


<a href="cambia(); return false;">cambiar css</a>
</body>
</html>

bueno lo hice a la rápida sin probarlo asi que espero te funciona caso contrario, informa errores x)

connection closed.

ikhuerta · #3 (**permalink**) 13/10/2006, 05:45

Buenas MaBoRaK,

revisando tu codigo me encuentro con que defines las funciones como variables.

remover= function (elemento) {}

Estoy mirando de adaptar mi script de ajax para que admita cargar por ajax nuevas funciones mediante eval()

sabes si declarando las nuevas funciones de esta forma (definiendo las variables fuera de función) me dejará usarlas en las llamadas a eventos del HTML?

la idea sería entonces crear un array de funciones e ir llenandolo con las nuevas.

rimtzg · #4 (**permalink**) 15/10/2006, 10:08

Muchas gracias por la ayuda

MaBoRaK · #5 (**permalink**) 15/10/2006, 14:41

loading.........

Bueno puedes usar clases literales, eso hago yo.
Si quieres interpretar codigo proveniente de AJAX entonces te sugiero usar otra forma de usar Ajax.

http://leimnud.info/index.php?&artic...=view&cat=AJAX

De esa forma podras recibir de tu servidor un OBJETO javscript una funcion o variable.

bueno como te decia mi objeto literal lo hago.

Código:

var a={
  x:{a:1121212},
  b:function()
 {
   //code
 },
 c:function ()
 {
  //code
 }
}

entonces en la forma que te dice de recibir un objeto en ajax, simplemte le añado a mi objeto literal.

a.nuevo=objetoAjax;

de esa forma haces que tu objeto literal cresca y la haces re-usable ademas de poder interpretar en cualquier momento tus nuevas funciones.

connection closed.

ikhuerta · #6 (**permalink**) 16/10/2006, 05:02

Sobre lo primero:

woooooow!

No sabía que podia hacerse esto:

Código:

 _n = document.createElement('script');
_n.src = uri;
_n.type = "text/javascript";
document.getElementsByTagName("HTML")[0].getElementsByTagName("HEAD")[0].appendChild(_n);

Y lo has probado y luego funciona??? Y de que forma? solo las funciones o si le meto codigo suelto lo va a interpretar como si estubiese ahí desde el principio (por ejemplo un document.write)?

Si funciona tiene miles de aplicaciones... Es decir puedo ir metiendole más y más scripts externos dependiendo de lo que haga el usuario... Eso debería liberar muchisimo el peso de carga inicial de javascript...

Se me ocurren trucos como:

- no cargar la validación de formulario hasta que este se empiece a rellennar (para poder mostrar antes la pagina).

- cargar los scripts DHTML de cada contenido cargado con ajax solo cuando estos hayan sido llamados. (para que quiero las funciones del chat si este aun no ha sido inciado...)

- y muchas cosas más...

Solo veo una pega... como controlas cuando ha sido cargado ya el script nuevo?

Sobre lo segundo:

Veo que más o menos es lo mismo... Claro que será mas comodo y claro definir fuera de funciones la variable por ejemplo "$funcion" y luego llamar a las funciones con

$funcion.cambioClase(id,nuevaClase)

que usar arrays como yo proponia en un principio y hacer la llamada con

$funcion["cambioClase"](id,nuevaClase)

Como lo usas veo que simplemente funciona y creo que prefiero tu metodo al mio pero no suelo usar literales asi que me repasare algunos cursillos por internet. Gracias!

Por favor contestame a las 2 preguntas que plateaba sobre el primer metodo:
1) lo has probado?
2) Como controlas el estado de carga del nuevo archivo?

Por

MaBoRaK · #7 (**permalink**) 16/10/2006, 13:57

loading..................

Lo primero, FUNCIONA:

Lo segundo, bueno mira en caso de que cargues como te dije un javascript externo y que el mismo tenga este codigo.

a.js

z=function(aa)
{
//code
}

La unica forma que yo hice para averiguar si se ha cargado la funcion es.

Código:

verificar:function(param)

    {

        _1=aji.database[param];

        if(!_1.aji)

        {

            _1.g+=1;

            return;

        }

        else

        {

            clearInterval(_1.interval);

            aji.tools.element.remove(_1.script);

            aji.finish(param);

        }

    },

la forma de ver su tu javascript externo fue cargado depender'ia de la estructura que tiene ese nuevo javascript, por eso mismo yo defino a mis funcions u objetos como variables y consultar en un intervalo de x segundos o milisegs. si typeof func!="undefined" entonces se ha cargado.

connection closed.

ikhuerta · #8 (**permalink**) 17/10/2006, 01:48

Tu forma me parece correcta pero yo no tengo las funciones definidas como variables/objetos sino directamente como funciones... (de haberlo sabido hace un tiempo...)

La cosa es que no puedo cambiar esas librerías porque son comunes a varios proyectos (y ni siquiera todas son desarrolladas por mi, con lo que no puedo redefinir su forma porque "sea mejor", me busco bronca con los demás programadores).

Necesitaría algo que no dependiese en absoluto de la función para ver si esta ha cargado... pero con la etiqueta script ni inneHTML, ni data, ni nodeValue, ni text dan resultados... :(

Se me ha ocurrido que tal vez si primero cargo la función por ajax y simplemente desecho el responseText al cargarlo, luego al aplicar este metodo ya estaría en caché con lo que sería instantaneo... tengo que hacer pruebas a ver...

ikhuerta · #9 (**permalink**) 17/10/2006, 02:01

Bueno de momento iré tirando definiendo el array "cargados"

cargados= new Array;

Y luego al principio de la función meto un

var n = cargados.length

y en la comprobacion del intervalo meto un

if (cargados.length>n) HA_CARGADO

eso Sólo me obliga a añadir al final de toooooodas mis librerias la linea:

if (cargados) cargados[cargados.length]="";

Es a lo rapido, ya lo mejoraré...

MaBoRaK · #10 (**permalink**) 17/10/2006, 18:47

loading....................

BUeno algo que se me ocurre es que por ejemplo

tu a.js

linea 1: funciontion blabla
.
.
.
.
linea N: var ddd=true;

entonces supongo que cuando cargas un javascript se carga linea a linea.
entonces sabrias que a cargado toda si solo consultas si la variable ddd existe.

Nose, no lo he probaod aun pero intentalo asi.

connection closed.

ikhuerta · #11 (**permalink**) 18/10/2006, 03:09

Si al principio pense en eso... pero luego me di cuenta de que entonces necesitaría una versión de js con el ddd=true y otra sin el... porque si no si cargase antes la libreria con aji que la libreria con el ddd=true podría comprobar si ha cargado.

He probado la solución que yo daba de ampliar el array con todas las librerias. y me funciona. La carga y avisa de que ha terminado.

Genial. Muchas gracias... ahora ya no se me resitira nada!!! :D