Wednesday, May 27, 2009

How to : Use jQuery to "turn off the lights" while watching videos

Some videos on YouTube have a cool feature called "Turn the lights down". Basically, when you turn lights down, the entire page darkens and let you watch video as if you are in the cinema. This tutorial will show you how to implement this simple effect.

The problem

Our example is simple - it consists of header, the video, "turn off the lights" link and sidebar with some information about the video.

At the code below you can se the "command" div that contains lightSwitcher link, "movie" div that contains the video and "description" div that acts as a sidebar:


<div id="container">

<div id="header">

<h1>Janko At Warp Speed</h1>

<h2>Turn off the lights - demo</h2>


<div id="command">

<a class="lightSwitcher" href="#">Turn off the lights</a>

</div>

</div>


<div id="movie">

<object width="560" height="340">

<param name="movie" value="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999" />


<param name="allowFullScreen" value="true" />

<param name="allowscriptaccess" value="always" />


<embed src="http://www.youtube.com/v/Mlahvvymkxc&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999"

type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340">


</embed>

</object>

</div>

<div id="description">

<p>Some description ges here</p>


</div>

</div>


CSS for this is simple:


body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; }

#container { width:960px; margin:0px auto; text-align:left; overflow:hidden;}

#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}


#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}

.lightSwitcher {background-image:url(light_bulb_off.png); background-repeat:no-repeat; background-position:left;

padding: 0 0 0 20px; outline:none; text-decoration:none;}

.lightSwitcher:hover {text-decoration:underline;}


Let there be... dark



When link "Turn off the lights" is clicked, we need to darken the entire page. All except the movie. This can be achieved using a div that has to have the exact dimensions as the current document and semi-transparent black background. This div needs to be positioned absolutely inside its relatively positioned container (and that is BODY) and to stretch from the upper-left to the bottom-right corner.

Let's add a div to the end of our markup:


Let's add a div to the end of our markup:



<div id="shadow"></div>


Now let's style it:



#shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}



Important thing here is z-index. In order to make it cover the entire page, it has to have the largest z-index. Embedded element will be seen, anyway. It's easy to position a div to the top-left corner and set the width to 100%. But what about the height? If we set the height of our shadow div to be 100% it will cover the entire page only if contains larger than a window, or - if we have scrollbars. Otherwise, it will cover just the content.



Let's involve jQuery



$(document).ready(function(){

    $("#shadow").css("height", $(document).height()).hide();


});


Aaaaand.... Action!



This code set the height of shadow div to the same value as document height and hides it. Of course, we want this div visible, only when we click on "lightSwitcher". Now we need to ad a click handler for lightSwitcher:



$(".lightSwitcher").click(function(){

    $("#shadow").toggle();


});


If you try to run this now you will see that it works. LightSwitcher will toggle shadow div visibility and that will simulate turning lights on and off. The only problem is that the link itself will be "in the dark", and you won'ta be ble to click on it again, once you turn the lights off.



The solution is simple; LightSwitcher has to have z-index higher than shadow div. In order to do that, we have to position the link absolutely inside the relatively positioned container and set z-index to 101:



#command { position:relative; height:25px; display:block;}

.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);

                      background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;


                      outline:none; text-decoration:none;}


Now it will work. If you look at the demo you will notice that while you toggle the lights, link text and icon changes. In order to do that we have to extend our CSS and jQuery a little bit. When you turn off the lights, light bulb icon and text changes, and link color turn to yellow. We need to define a CSS class that will style the link and add some jQuery to change text and toggle this CSS class.



.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}


We'll extend the click handler a little bit to get this result:



$(".lightSwitcher").click(function(){


    $("#shadow").toggle();

        if ($("#shadow").is(":hidden"))

            $(this).html("Turn off the lights").removeClass("turnedOff");


        else

            $(this).html("Turn on the lights").addClass("turnedOff");

});


Now we have fully functional light switcher functionality. In the end, the complete code will look like this:


CSS




body {font-family:Arial, Sans-Serif; font-size:13px; text-align:center; margin:0px; position:relative;}

#container { width:960px; margin:0px auto; text-align:left; overflow:hidden; position:relative;}

#movie {border:solid 1px #dcdcdc; float:left; width:560px; text-align:left; margin-right:20px;}

#description { float:left; width:320px;border:solid 1px #dcdcdc; padding: 10px 20px;}

#command { position:relative; height:25px; display:block; margin: 25px 0 0 0;}

.lightSwitcher {position:absolute; z-index:101; background-image:url(light_bulb_off.png);

                      background-repeat:no-repeat; background-position:left; padding: 0 0 0 20px;


                      outline:none; text-decoration:none;}

.lightSwitcher:hover {text-decoration:underline;}

#shadow {background-image:url(shade1x1.png); position:absolute; left:0; top:0; width:100%; z-index:100;}

.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}


jQuery



$(document).ready(function(){

    $("#shadow").css("height", $(document).height()).hide();


    $(".lightSwitcher").click(function(){

        $("#shadow").toggle();

        if ($("#shadow").is(":hidden"))


            $(this).html("Turn off the lights").removeClass("turnedOff");

        else

            $(this).html("Turn on the lights").addClass("turnedOff");


    });

});


Tutorial by Janko

Related Posts by Categories



3 comments:

Zeeshan Amjad said...

How to ??? we all must have the answer of this in our life to be at safe end...


Walk in Clinic
Diet Menu.

Twitter Buzz said...

Auto Tweet Generator Software!

Autopilot Twitter Marketing Just Through One Software!

Tweeting When You're Away From Your Computer Has Never Been Easier!

"Discover How This Twitter Schedule Tweets For You On Autopilot Mode"

Sit Back And Relax And Give Your Twitter Followers Valuable Content
While You're Away.... That'll Turn Them Into Raving Fans..

-> Manage your Twitter postings and schedule multiple posts in just seconds easily!

-> Set the time, edit and import messages in just a few clicks of a button!

-> Think about the time saved on making changes without having to log into Twitter!

-> Twitter marketing made easy because you can track your tweets through one software!

-> Gain rapid exposure through Twitter without having to physically be involved in tweeting all day!

-> It automatically submits your messages to Twitter while you focus on more pressing matters!

If You Can Click, Copy, and Paste, You Can Use "TwitterBuzz Auto Tweet Generator!

So go ahead! and Click Here to Download Your Software immediately...





Auto Tweeter Bot

Tweet Automator

Automated Twitter Tool

An Automated Tweeting Solution

Automatic Tweet

Richard o.O said...

What did you mean when you said "lets add a div to the ned of our markup."

Is the shadow div supposed to be around everything, from head to foot?

 

Copyright 2008 All Rights Reserved Revolution Two Lifestyle theme by Brian Gardner Convert by Bloganol dot com Edit by Arieyblog

top