Truco de cambio de hoja de estilo

[Mikmoro]

Para quien pueda interesarle, otro de esos truquillos de css.

A raiz de una consulta en el foro de AJAX, he ideado un truco con css y una sencillísima función con Javascript para simular el cambio de una hoja de estilo sin refrescar la página. Es bastante simple y lógicamente funciona a toda castaña, sin perder ni un segundo.

http://www.araudi.net/cambio_estilo.html

Y desde luego, con este truco se pueden hacer cosas mucho más bestias.

Aunque este enlace ya está en el foro de AJAX, lo pongo aquí porque puede que haya gente interesada en css que no pase por ese foro, y al que esto podría resultarle útil.

Si a los moderadores esto no os parece correcto, os lo cepilláis.

Mikel.

[mbavio]

Buenisimo! Gracias amigo Mikel!

[kahlito]

Muy bueno Mikmoro

Es algo que tengo pendiente desde hace tiempo, espero ponerme pronto con ello, de todas formas le veo un inconveniente, si el usuario no tiene activado Javascript las hojas de estilos no se cambian.

[Mikmoro]

Iniciado por kahlito

de todas formas le veo un inconveniente, si el usuario no tiene activado Javascript las hojas de estilos no se cambian.

Evidentemente.

Hace tiempo que tenía hecho lo mismo pero sin javascript, pero este tiene otros problemillas:

http://www.araudi.net/simulacion.html

Mikel.

[jtoribioa]

Gracias por el tip Mikel aunque ya te agredeci en el otro foro, porsiaca no lo leas

[kahlito]

Iniciado por Mikmoro

Evidentemente.

Hace tiempo que tenía hecho lo mismo pero sin javascript, pero este tiene otros problemillas:

http://www.menoslobos.com/mikel/foro...mulacion.html#

Mikel.

Muy bueno este también Mikmoro, espero estudiarlo más a fondo en cuanto tenga tiempo ya que es muy interesante

Saludos

[elquique]

Buen truco Mikmoro, igualmente jeje la mayoria tiene activo javascript, conciente o inconcientemente.

[kahlito]

Tú lo has dicho Jorge, la mayoría, pero no todos, creo que no hay que olvidarse de la accesibilidad.

Las páginas deben ser accesibles incluso cuando las tecnologías que incorpore no sean soportadas por el cliente o hayan sido desactivadas por este.

Asegúrese de que las páginas son usables aún cuando los scripts, applets u otros objetos programáticos no son soportados por el navegador cliente. [Prioridad 1].

Por ejemplo, asegúrese de que los enlaces que disparan código script funcionan cuando los scripts no son soportados o están desactivados (no use 'javascript:' como destino de un enlace).

Saludosss

[elquique]

mitos ... solo mitos aun no extendidos :)

[JavierB]

Hola Mikmoro

Está interesante la idea

Hay una línea en el código que no sé si es que se te ha quedado ahí por error, o es que yo no lo entiendo:

#contenedor { }

Saludos,

[Mikmoro]

Hola, JavierB.
En el primero de los ejemplos, el que tiene Javascript, es fundamental porque es el que hace el cambio de clase para todo el resto de la página.

En el de sólo css, pues efectivamente no vale para nada, pero ya sabes, uno empieza poniendo un contenedor para ir colocalndo ahí las cosas, luego no es necesario y se le olvida quitarlo .

Mikel.

[JavierB]

Gracias por la aclaración.

Saludos,

[Subotai]

Wenas, como os las apañaríais para hacer que el ejemplo http://www.menoslobos.com/mikel/foro...o_estilo.html# mantenga la hoja de estilos seleccionada cuando te mueves por las diferentes secciones de la página?
Estoy usando el ejemplo de Mikmoro, me finciona bien, pero claro, al pinchar en los links de la página se pierde la hoja seleccionada.. no controlo mucho de javascript y no se por donde tirar.
Gracias de antemano ^^

[Mikmoro]

Hola, Subotai.
Como ya habrás podido ver, el quiz de la cuentión está en la clase que tiene la etiqueta "contendor":

<div id="contenedor" class="hoja1">
<a href="#" class="hojaestilo" onclick="cambio('hoja1');" title="Cambio de hoja de estilo">Hoja
1</a><br />

<a href="#" class="hojaestilo" onclick="cambio('hoja2');" title="Cambio de hoja de estilo">Hoja
2</a><br />

<a href="#" class="hojaestilo" onclick="cambio('hoja3');" title="Cambio de hoja de estilo">Hoja
3</a>

es decir, que según sea la clase de "contendor" (hoja1, hoja2 u hoja3), cambiarán todos los estilos.

Para lo que dices, habrá que conseguir que un javascript examine la clase de "contenedor" en ese momento y la pase como parámetro al div "contenedor" que tengas en la nueva hoja que abres con un enlace.

Estoy seguro de que en esto podrá ayudar mucho más que yo JavierB, que es un experto en javascript.

Aupa, JavierB, danos una solución a todos (si es que se puede, claro).

Mikel.

[JavierB]

Hola a todos.

Por alusiones... he tecleado un poco de código para que la hoja de estilos elegida, se guarde en una cookie y se pueda usar en las siguiente páginas y también cuando se cierre y se vuelva a abrir la página.

Me modificado un poco el código de Mikmoro, porque he puesto el atributo class en el body, en lugar de en un contenedor:

Código PHP:

  // He modificado un poco la función original de Mikmoro 
function cambio(clase){ 
  if(document.body.className != clase) document.body.className = clase; 
  crearCookie(clase); 
} 
 
/* crear cookie */ 
function crearCookie(hoja) { 
  document.cookie = hoja + ';path=/'; 
} 
 
/* leer cookie */ 
function leerCookie() { 
  mihoja = document.cookie; 
  if (mihoja == '') 
    mihoja = 'hoja1' 
  cambio(mihoja); 
}  
   

Puede verse en funcionamiento aquí

Saludos,

P.D. Espero que el moderador de Css, no se enfade mucho por haber puesto código JavaScript.

[Mikmoro]

¡¡¡Perfecto!!!

Es que cuando uno sabe, sabe, y lo demás son tonterías. Y cuando uno además de saber tiene esta dedicación y este espíritu, pues mejor que mejor.

Gracias, JavierB. Yo no tenía pensado usarlo, pero quizá haya gente a la que le venga muy bien.

Y lo de javascript venía a cuento, creo yo. No creo que estorbe aquí

Mikel.

[kahlito]

Muy bueno JavierB

[DragonX]

Mikmoro sos grande de verdad!!!!!

JavB Excelente!!!

[Subotai]

Muy pero que muy buenasss
He estado ocupadísimo estas semanas y olvidé pasar por aki...
Estoy viendo el código nuevo, promete y mucho ^^
Ahora mismo intento adaptarlo a mi página y os comento

Me funciona a la perfección con más de dos hojas de estilo es genial.

GRACIASSSS a los dos sois unos CRAKCS!!!

PD:Sé que no es mucho pero en mis archivos fuentes he incluido el siguiente comentario:

/*
* Agradecer la dedicación y el altruismo de Mykmoro y JavierB por compartir con forosdelweb su tiempo y sus amplios conocimientos.
* El código que facilita la elección de hojas de estilo es fruto de sus esfuerzos y su generosidad.
*
* GRACIAS CHICOS!
*
*/

[daPhyre]

¡Suena genial! Pero el link está roto. ¿Dónde puedo ver este código ahora?

[Mikmoro]

¡Maldito seas! Me vas a obligar a actualizar todos mis links, ¿no? (debería haberlo hecho ya).

Había dos posibilidades:
- una con javascript:

http://www.araudi.net/cambio_estilo.html

al que luego JavierB aporto código con una cookie para que el cambio de hoja fuera persistente en la navegación por otras páginas, y lo explicó aquí:
http://www.telefonica.net/web2/blas-...o/prueba1.html

- y otra con simple css:

http://www.araudi.net/simulacion.html

El de javascript es más real, porque hace que el cambio sea persistente, pero claro, menos accesible. Sobre esto se discutió amargamente en su día.

Mikel.

[daPhyre]

Jejeje... Lo siento. Pero de paso ya sirve para futuros visitantes del foro.

Ya he revisado ambos, comprendiendo los puntos que dices de ambos. Ya estaba yo buscando algo similar, pues estoy haciendo una página que deseaba habilitara esta opción de cambiar entre dos hojas de estilo. Me daré tiempo para analizarlas a fondo después.

Muchas gracias de neuvo! Perdón por hacerte trabajar de más, pero te estoy muy agradecido! =P

[Daniel Ulczyk]

Gracias Mikmoro por poner los ejemplos nuevamente disponibles.

[Mikmoro]

De nada.

daPhyre: lee el hilo completo, que hay alguna explicación que te ayudará a comprender cómo está concebido.

Mikel.

[elquique]

jaja lo hicieron laburar :P jaja

[Kikyo94]

Hola como están todos jeje, muy buena la información pero quisiera preguntarles si se podría hacer un código javascript que permita cambiar la hoja de estilo según la resolución de pantalla del usuario. Por ejemplo que el código detecte la resolución del usuario y mande el mismo documento index.html pero con una hoja de estilos distinta, optimizada para el tipo de resolución del usuario. Quiero evitar hacer una versión para las resoluciones altas. Muchas gracias!!!

[charlyalegret]

screen.width-> ancho en pixels de pantalla.
screen.height-> alto en pixels

script, por ejemplo:

<script language="JavaScript">
if (screen.width<1024)
document.write ("<link etc etc con el estilo que quieres>")
else if (screen.width>1024)
document.write ("<link etc etc con el estilo que quieres>")
etc etc
</script>

[Kikyo94]

Gracias me ha servido de mucho!!!