Foros del web, para los que viven de bits

Mikmoro · 21-feb-2007, 02:22

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.menoslobos.com/mikel/foro...io_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 · 21-feb-2007, 04:58

Buenisimo! Gracias amigo Mikel!

kahlito · 21-feb-2007, 06:33

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 · 21-feb-2007, 07:34

Cita:

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 · 21-feb-2007, 08:25

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

kahlito · 22-feb-2007, 15:19

Cita:

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 · 22-feb-2007, 15:48

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

kahlito · 23-feb-2007, 14:51

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

elquique · 23-feb-2007, 20:48

mitos ... solo mitos aun no extendidos :)

JavierB · 24-feb-2007, 02:23

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 · 24-feb-2007, 05:25

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 · 24-feb-2007, 09:54

Gracias por la aclaración.

Saludos,

Subotai · 19-mar-2007, 04:02

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 · 19-mar-2007, 04:44

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 · 19-mar-2007, 11:30

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 · 19-mar-2007, 12:48

¡¡¡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 · 20-mar-2007, 06:12

Muy bueno JavierB

DragonX · 20-mar-2007, 06:48

Mikmoro sos grande de verdad!!!!!

JavB

Excelente!!!

Subotai · 29-mar-2007, 03:06

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

daPhyre · 04-abr-2008, 09:29

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

Mikmoro · 04-abr-2008, 12:06

¡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 · 04-abr-2008, 12:23

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

21-feb-2007, 02:22	#1 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	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.menoslobos.com/mikel/foro...io_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.

21-feb-2007, 04:58	#2 (permalink)
mbavio Fecha de Ingreso: agosto-2005 Mensajes: 289	Re: Truco de cambio de hoja de estilo Buenisimo! Gracias amigo Mikel!

21-feb-2007, 06:33	#3 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	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. __________________ Portafolio Diseño Web Freelance

21-feb-2007, 07:34	#4 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	Re: Truco de cambio de hoja de estilo Cita: 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. Última edición por Mikmoro; 04-abr-2008 a las 11:51.

21-feb-2007, 08:25	#5 (permalink)
jtoribioa Fecha de Ingreso: febrero-2007 Ubicación: En lima Mensajes: 68	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

22-feb-2007, 15:19	#6 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Re: Truco de cambio de hoja de estilo Cita: 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 __________________ Portafolio Diseño Web Freelance

22-feb-2007, 15:48	#7 (permalink)
elquique Fecha de Ingreso: marzo-2004 Ubicación: Florida, Uruguay Mensajes: 1.768	Re: Truco de cambio de hoja de estilo Buen truco Mikmoro, igualmente jeje la mayoria tiene activo javascript, conciente o inconcientemente. __________________ Jorge Oyhenard Blog \| Tutoriales Photoshop

23-feb-2007, 14:51	#8 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	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 __________________ Portafolio Diseño Web Freelance

23-feb-2007, 20:48	#9 (permalink)
elquique Fecha de Ingreso: marzo-2004 Ubicación: Florida, Uruguay Mensajes: 1.768	Re: Truco de cambio de hoja de estilo mitos ... solo mitos aun no extendidos :) __________________ Jorge Oyhenard Blog \| Tutoriales Photoshop

24-feb-2007, 02:23	#10 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.550	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, __________________ Lee las Políticas de los foros y escribe correctamente.

24-feb-2007, 05:25	#11 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	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.

24-feb-2007, 09:54	#12 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.550	Re: Truco de cambio de hoja de estilo Gracias por la aclaración. Saludos, __________________ Lee las Políticas de los foros y escribe correctamente.

19-mar-2007, 04:02	#13 (permalink)
Subotai Fecha de Ingreso: mayo-2003 Ubicación: Irúnforge Mensajes: 187	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 ^^

19-mar-2007, 04:44	#14 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	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.

19-mar-2007, 11:30	#15 (permalink)
JavierB Moderata Fecha de Ingreso: noviembre-2002 Ubicación: Madrid Mensajes: 19.550	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 != 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. __________________ Lee las Políticas de los foros* y escribe correctamente.

19-mar-2007, 12:48	#16 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	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.

20-mar-2007, 06:12	#17 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Re: Truco de cambio de hoja de estilo Muy bueno JavierB __________________ Portafolio Diseño Web Freelance

20-mar-2007, 06:48	#18 (permalink)
DragonX Fecha de Ingreso: noviembre-2002 Ubicación: Funkyland Mensajes: 6.918	Re: Truco de cambio de hoja de estilo Mikmoro sos grande de verdad!!!!! JavB Excelente!!! __________________ Diseño web y maquetación ya no tengo más blog...pero tengo muestrario

29-mar-2007, 03:06	#19 (permalink)
Subotai Fecha de Ingreso: mayo-2003 Ubicación: Irúnforge Mensajes: 187	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-mar-2007 a las 03:40.*

04-abr-2008, 09:29	#20 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Re: Truco de cambio de hoja de estilo ¡Suena genial! Pero el link está roto. ¿Dónde puedo ver este código ahora?

04-abr-2008, 12:06	#21 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.362	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-abr-2008 a las 16:11.

04-abr-2008, 12:23	#22 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	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