Como crear un interruptor al estilo youtube’s hora del planeta

marzo 26, 2011

Hola del Planeta en Youtube

La hora del planeta se vive, y variados sitios han realizado campañas, videos, spots publicitarios, etc. haciendo referencia a la hora de la Tierra, así mismo he visto que los de  youtube no quisieron quedarse fuera y pusieron una ampolleta e interruptor junto a su logo, ¿cuál es la idea? “apagar” youtube, volverlo negro y acabar con todos esos pixeles blancos que electricidad consumen.

La idea es que en este post logremos realizar un efecto similar con nuestros propios sitios webs, de manera que para los próximos años/días de la hora de la tierra estemos preparados y podamos apagar nuestra web y aportar con un voltio de descanso al mundo.

[demotones][demo]http://demos.cerocreativo.cl/switchhoradelatierra/[/demo] [down]http://demos.cerocreativo.cl/switchhoradelatierra/[/down][/demotones]

El código es bastante simple y está hecho en base a jquery y css puro.

Para empezar voy a definir el objetivo que queremos alcanzar, y luego todo lo que es el código css y jquery.

Objetivos

  • Cambiar las reglas css para seleccionar un estilo “nocturno”, o en su defecto cambiar la hoja de estilos completa.
  • Hacer que responda éste cambio se produzca al cliquear un boton con forma de interruptor.
  • Hacer que al volver a cliquear en el interruptor el estilo vuelva a cambiar.

El HTML

<html>
<head>
<title>Interruptor | Demos en CeroCreativo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ccswitch.js"></script>
<style type="text/css">
* {margin:0;padding:0;}
#logo, #switch {background: url(logo-diadelatierra.png) no-repeat;}
#logo {
border: 1px solid red;
width: 399px;
height:165px;
}
#switch {
background-position: 0 -330px;
border:1px solid red;
width:84px;
height:37px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="logo"></div>
<div id="switch"></div>
</body>
</html>

Éste código es en el que vamos a trabajar.En las líneas 5 y 6 se hacen las llamadas a jquery y al código js que vamos a utilizar para hacer funcionar el interruptor. Luego vienen las definiciones del css, en donde definimos el contenedor para el logo <div id=”logo”> y el contenedor para el interruptor <div id=”switch”>, además seteamos el background para ambos como “logo-diadelatierra.png”, que es una imagen como esta:

Aquí vemos las 4 imágenes (en una) que vamos a necesitar; las 2 primeras corresponden al logo encendido y apagado, y las 2 últimas al interruptor encendido y apagado. Luego vamos a setear las propiedades del css para mostrar una porción determinada de ésta imagen dependiendo lo que sea necesario.

jquery-ccswitch.js

$(document).ready(function(){
   $("#switch").click(function() { // Capturamos el clic en el elemento con id #switch, el que deberia estar en modo "on"
     if ($(this).hasClass("on")) { // Si el elemento tiene la clase de nombre "on", procedemos...
       $(this).css("background-position","0 -367px"); // cambiamos el fondo del elemento actual (el interruptor), y lo desplazamos 367 pixeles hacia arriba para mostrar la cuarta imagen de nuestro background.
       $("#logo").css("background-position","0 -165px"); // cambiamos el fondo de nuestro logo por la segunda imagen, desplazando el fondo 165 px hacia arriba para mostrar el logo "apagado"
       $(this).removeClass("on").addClass("off"); // cambiamos la clase del interruptor que indica si fue encendido o apagado...
     }
     else if ($(this).hasClass("off")) { // si la clasee del interruptor es "off", procedemos...
       $(this).css("background-position","0 -330px"); // volvemos el fondo del interruptor a su posición normal "prendido"
       $("#logo").css("background-position","0 0"); // volvemos el fondo del logo a su posicion normal "prendido"...
       $(this).removeClass("off").addClass("on"); // cambiamos la clase off por on...
     }
   });
});

Con el código anterior ya estamos listos para hacer funcionar el sistema, porque vamos a tener funcionando el interruptor y con ello podemos setear cualquier opción dependiendo del estado del mismo, si encendido o apagado.

 

Hay una alternativa al código anterior, en la cual se puede cambiar una hoja de estilos por otra al-vuelo, on-the-fly, on-the-run, sin recargar la página… y se hace reemplazando el atributo “href” del tag <link /> de la siguiente manera.

Agregamos al html, dentro de <head> lo siguiente:

<link href="http://www.mipagina.com/css/estilos1.css" rel="stylesheet" type="text/css" />

Luego al archivo jquery-ccswitch.js le agregamos las líneas comentadas con “AQUí” , de manera que quede de la siguiente forma:

$(document).ready(function(){
   $("#switch").click(function() {
     if ($(this).hasClass("on")) {
       $(this).css("background-position","0 -367px");
       $("#logo").css("background-position","0 -165px");
       $("link[rel=stylesheet]").attr({href : "http://www.mipagina.com/css/estilos2.css"}); // AQUí
       $(this).removeClass("on").addClass("off");
     }
     else if ($(this).hasClass("off")) {
       $(this).css("background-position","0 -330px");
       $("#logo").css("background-position","0 0");
       $("link[rel=stylesheet]").attr({href : "http://www.mipagina.com/css/estilos1.css"}); // y AQUí
       $(this).removeClass("off").addClass("on");
     }
   });
});

Y con esta modificación ya podremos cambiar entre las hojas de estilos al hacer clic en el interruptor.

Resumen

Pudimos cumplir con los 3 objetivos trazados al principio de una manera simple y efectiva. Si bien existen otras formas, como utilizar propiedades de jquery como toggle, u otros, de esta manera pudimos hacerlo, y lo hicimos bien.

 

Cualquier duda que se presente con respecto a este código, sientanse libres de comentar y preguntar por esto y por cualquier otra cosa.

Saludos.

Tags: