Foros del Web » Creando para Internet » CSS »

Truco de cambio de hoja de estilo

Estas en el tema de Truco de cambio de hoja de estilo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/02/2007, 03:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Truco de cambio de hoja de estilo

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.

Última edición por Mikmoro; 02/12/2008 a las 19:51 Razón: Arreglar enlace
  #2 (permalink)  
Antiguo 21/02/2007, 05:58
Avatar de mbavio  
Fecha de Ingreso: agosto-2005
Mensajes: 288
Antigüedad: 12 años, 3 meses
Puntos: 4
Re: Truco de cambio de hoja de estilo

Buenisimo! Gracias amigo Mikel!
  #3 (permalink)  
Antiguo 21/02/2007, 07:33
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Truco de cambio de hoja de estilo

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.

  #4 (permalink)  
Antiguo 21/02/2007, 08:34
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

Cita:
Iniciado por kahlito Ver Mensaje
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.

Última edición por Mikmoro; 04/04/2008 a las 12:51
  #5 (permalink)  
Antiguo 21/02/2007, 09:25
 
Fecha de Ingreso: febrero-2007
Ubicación: En lima
Mensajes: 76
Antigüedad: 10 años, 10 meses
Puntos: 2
Re: Truco de cambio de hoja de estilo

Gracias por el tip Mikel aunque ya te agredeci en el otro foro, porsiaca no lo leas
  #6 (permalink)  
Antiguo 22/02/2007, 16:19
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Truco de cambio de hoja de estilo

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #7 (permalink)  
Antiguo 22/02/2007, 16:48
Avatar de elquique  
Fecha de Ingreso: marzo-2004
Ubicación: Florida, Uruguay
Mensajes: 2.495
Antigüedad: 13 años, 8 meses
Puntos: 78
Re: Truco de cambio de hoja de estilo

Buen truco Mikmoro, igualmente jeje la mayoria tiene activo javascript, conciente o inconcientemente.
__________________
Blog Jorge Oyhenard | Tutoriales Photoshop
  #8 (permalink)  
Antiguo 23/02/2007, 15:51
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Truco de cambio de hoja de estilo

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

Cita:
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
  #9 (permalink)  
Antiguo 23/02/2007, 21:48
Avatar de elquique  
Fecha de Ingreso: marzo-2004
Ubicación: Florida, Uruguay
Mensajes: 2.495
Antigüedad: 13 años, 8 meses
Puntos: 78
Re: Truco de cambio de hoja de estilo

mitos ... solo mitos aun no extendidos :)
__________________
Blog Jorge Oyhenard | Tutoriales Photoshop
  #10 (permalink)  
Antiguo 24/02/2007, 03:23
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Truco de cambio de hoja de estilo

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,
  #11 (permalink)  
Antiguo 24/02/2007, 06:25
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

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.
  #12 (permalink)  
Antiguo 24/02/2007, 10:54
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Truco de cambio de hoja de estilo

Gracias por la aclaración.

Saludos,
  #13 (permalink)  
Antiguo 19/03/2007, 05:02
Avatar de Subotai  
Fecha de Ingreso: mayo-2003
Ubicación: Irúnforge
Mensajes: 198
Antigüedad: 14 años, 7 meses
Puntos: 1
Re: Truco de cambio de hoja de estilo

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 ^^
  #14 (permalink)  
Antiguo 19/03/2007, 05:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

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.
  #15 (permalink)  
Antiguo 19/03/2007, 12:30
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: Truco de cambio de hoja de estilo

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 != clasedocument.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.
  #16 (permalink)  
Antiguo 19/03/2007, 13:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

¡¡¡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.
  #17 (permalink)  
Antiguo 20/03/2007, 07:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: Truco de cambio de hoja de estilo

Muy bueno JavierB
  #18 (permalink)  
Antiguo 20/03/2007, 07:48
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Truco de cambio de hoja de estilo

Mikmoro sos grande de verdad!!!!!

JavB Excelente!!!


  #19 (permalink)  
Antiguo 29/03/2007, 04:06
Avatar de Subotai  
Fecha de Ingreso: mayo-2003
Ubicación: Irúnforge
Mensajes: 198
Antigüedad: 14 años, 7 meses
Puntos: 1
Re: Truco de cambio de hoja de estilo

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:

Cita:
/*
* 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!
*
*/

Última edición por Subotai; 29/03/2007 a las 04:40
  #20 (permalink)  
Antiguo 04/04/2008, 10:29
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Truco de cambio de hoja de estilo

¡Suena genial! Pero el link está roto. ¿Dónde puedo ver este código ahora?
  #21 (permalink)  
Antiguo 04/04/2008, 13:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

¡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.

Última edición por Mikmoro; 06/04/2008 a las 17:11
  #22 (permalink)  
Antiguo 04/04/2008, 13:23
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Re: Truco de cambio de hoja de estilo

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
  #23 (permalink)  
Antiguo 04/04/2008, 13:28
Avatar de Daniel Ulczyk
Moderador
 
Fecha de Ingreso: febrero-2005
Ubicación: Buenos Aires
Mensajes: 9.175
Antigüedad: 12 años, 9 meses
Puntos: 2072
Re: Truco de cambio de hoja de estilo

Gracias Mikmoro por poner los ejemplos nuevamente disponibles.
__________________
—Somos lo que hacemos repetidamente. La excelencia, entonces, no es un acto sino un hábito. (Aristóteles dixit)
  #24 (permalink)  
Antiguo 04/04/2008, 13:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Truco de cambio de hoja de estilo

De nada.

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

Mikel.
  #25 (permalink)  
Antiguo 04/04/2008, 13:43
Avatar de elquique  
Fecha de Ingreso: marzo-2004
Ubicación: Florida, Uruguay
Mensajes: 2.495
Antigüedad: 13 años, 8 meses
Puntos: 78
Re: Truco de cambio de hoja de estilo

jaja lo hicieron laburar :P jaja
__________________
Blog Jorge Oyhenard | Tutoriales Photoshop
  #26 (permalink)  
Antiguo 27/10/2011, 20:53
Avatar de Kikyo94  
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Truco de cambio de hoja de estilo

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!!!
  #27 (permalink)  
Antiguo 28/10/2011, 06:47
Avatar de charlyalegret  
Fecha de Ingreso: septiembre-2011
Ubicación: Barcelona
Mensajes: 705
Antigüedad: 6 años, 2 meses
Puntos: 140
Respuesta: Truco de cambio de hoja de estilo

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>
  #28 (permalink)  
Antiguo 28/10/2011, 19:30
Avatar de Kikyo94  
Fecha de Ingreso: octubre-2011
Mensajes: 4
Antigüedad: 6 años, 1 mes
Puntos: 0
Respuesta: Truco de cambio de hoja de estilo

Gracias me ha servido de mucho!!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 20:40.