Foros Programación Cliente

Cargar hojas de estilos aleatoriamente

8 8 Respuestas Miércoles 8 de abril, 2009
Creo que el título es bastante descriptivo. Pongamos que tenemos algo parecido a ésto:

misitio/css/estilo1.css
misitio/css/estilo2.css
misitio/css/estilo3.css

La idea sería que, mediante un script (php, js, etc), cada vez que un usuario entre a la página se cargue de manera aleatoria uno de los 3 estilos.

Otro tema sería cómo hacer que dicho estilo se mantuviese durante cada sesión, es decir, que aunque el usuario navegue dentro de la página, el estilo generado en un principio se mantenga, aunque este sería un problema secundario, me interesa sobre todo la primera cuestión.

Espero haberme explicado con claridad. Gracias a todos por vuestro tiempo y un saludo.
Diego Jiménez
Registrado desde 07/10/08
Número de posts: 12
  • Avatar de plastikaweb plastikaweb Registrado desde 23/10/08 / Número de posts: 22
    Con PHP lo consigues facilmente:

    Inicias sesiòn en cada página del sitio i creas un número aleatorio guardandolo como variable de sesión:

    <?php
    session_start();

    if (!isset($_SESSION['num'])){
    $numero = rand(1,3);
    $_SESSION['num'] = $numero;
    }
    ?>


    Luego en el link hacia el fichero CSS le das el valor a la propiedad href como sigue:

    href="misitio/css/estilo<?=$_SESSION['num'];?>.css"
    Carlos Matheu Armengol - plastikaweb
    desarrollo web - AS3, Flash, CSS, XHTML, PHP, Joomla!, Wordpress, Facebook apps
    info@plastikaweb.com
    www.plastikaweb.com
    www.facebook.com/plastikaweb
    Publicado hace 3 años
  • Avatar de diegojimenez diegojimenez Registrado desde 07/10/08 / Número de posts: 12
    Gracias Carlos! La verdad es que es un método genial.

    Otro método que he encontrado para hacerlo es mediante js, y funciona bastante bien. El problema es que no valida:

    <script type="text/javascript">
    function chooseStyle() {
    var css = new Array('estilo1','estilo3','estilo3','estilo4');
    var i = Math.floor(Math.random()*css.length);
    var style = "css/"+css[i]+".css";

    return style;
    }

    ¿Sabrías decirme cómo hacer algo parecido pero sin recordar la sesión con tu método (PHP)? Es decir, cada vez que el usuario entra en la web, carga un estilo de manera aleatoria, sin más. No hace falta que guarde la sesión, de hecho he ahí lo divertido (que cada vez la página sea diferente).

    ¡Gracias por la ayuda y un saludo!
    Diego Jiménez
    Publicado hace 3 años
  • Avatar de JML JML Registrado desde 27/01/08 / Número de posts: 53
    <?php
    $numero = rand(1,3);
    }
    ?>

    y luego para enlazar la hoja de estilos:

    <link type="text/css" href="css/estilo<?php echo $numero; ?>.css" media="all" rel="stylesheet" />
    Publicado hace 3 años
  • Avatar de diegojimenez diegojimenez Registrado desde 07/10/08 / Número de posts: 12
    Sin saber de PHP, creo que hay un error en la sintaxis del primer código.
    Diego Jiménez
    Publicado hace 3 años
  • Avatar de diegojimenez diegojimenez Registrado desde 07/10/08 / Número de posts: 12
    Efectivamente, no funciona "Parse error: syntax error, unexpected" en la línea de $numero = rand(1,3);
    Diego Jiménez
    Publicado hace 3 años
  • Avatar de plastikaweb plastikaweb Registrado desde 23/10/08 / Número de posts: 22
    Si, seria como dice JML, sólo que había una llave de cierre de función perdida,

    <?php
    $numero = rand(1,3);
    ?>

    Pero así al navegar por diferentes páginas del sitio el estilo ira cambiando en la misma sesión del navegador, si es lo que quieres, es así de simple!

    saludos
    Carlos Matheu Armengol - plastikaweb
    desarrollo web - AS3, Flash, CSS, XHTML, PHP, Joomla!, Wordpress, Facebook apps
    info@plastikaweb.com
    www.plastikaweb.com
    www.facebook.com/plastikaweb
    Publicado hace 3 años
  • Avatar de diegojimenez diegojimenez Registrado desde 07/10/08 / Número de posts: 12
    Fenomenal, funciona perfectamente! ¡Gracias a los dos por la ayuda!! :D
    Diego Jiménez
    Publicado hace 3 años
  • Avatar de JML JML Registrado desde 27/01/08 / Número de posts: 53
    Yo lo único que he hecho ha sido "copy&paste" del código de plastikaweb...
    Publicado hace 3 años