Blog / Environment

Lights Off in Your Homepage: Join Our Virtual Earth Hour(0)

Andris Sprūds | Friday, March 27, 2009

Join our Virtual Earth Hour by switching off the lights in your blog or home page. We have created a tiny Javascript script which will switch off the lights of your site during Earth Hour (March 28, 8:30-9:30PM).

For those lucky few who are wondering what Earth Hour is - it is an annual organized event organized by World Wildlife Fund (WWF). People all over the world will switch their lights off in the evening of 28th March to as a sign of their awareness of the climate change. Last year Earth Hour had millions of participants, and we hope that this year we can increase this number even more. It is also a big event here in Sweden. The lights in His Majesty The King's palace will go out during the Earth Hour.

How does it work? The script needs to be placed at the end of your HTML page, just before the last BODY tag. You also need to prepare a background image which will be displayed for the 'lights out' version of your home page. That's it. So, in less than 5 minutes you can take part in our Virtual Earth Hour.

After the long introduction, here is the code which will enable you to switch off the lights. You might want to change the location of the background image. Test your page by setting your PC's clock to 28. march, 8.31PM. You can, for example, visit vizzualformas.com to see it in action!

<script type="text/javascript">
// <![CDATA[
    var bgImage = '/resources/img/all/bg/stars.jpg';
    var infoDivId = 'earthDayInfo';
   
    function isEarthHour() {
        var currentDate = new Date();
        var startDate = Date.parse('03/28/2009 8:30:00 PM');
        var endDate = Date.parse('03/28/2009 9:30:00 PM');
       
        if(currentDate > startDate && currentDate < endDate) {
            return true;
        }
        return false;
    }
   
    function switchOffTheLights() {
        var bodyElements = document.getElementsByTagName('body');
        if(bodyElements.length > 0) {
            var body = bodyElements[0];
            body.style.backgroundImage = "url('" + bgImage +" ')";
        }
       
        var infoDiv = document.getElementById(infoDivId);
        if(infoDiv) {
            infoDiv.className = "";
        }
    }
   
    if(isEarthHour()) {
        switchOffTheLights();
    }
    // ]]>
</script>
 

vizzualforms.com: Survey and HTML Form Builder. Create Online Questionnaires for FREE!

feedback