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

---- Read More ----

How To : Boost Your Twitter Productivity

If you haven’t heard of Twitter by now, you must be living under a rock! It is everywhere, and everyone is using it. To say that the rise of Twitter has been explosive would be an understatement. As a result of this growth, the number of Twitter apps and tools available has become extensive. So, in this post we have filtered them down to a respectable 99.

Below, we present 99 Essential Twitter Tools and Applications, split into the following categories: Tools and Productivity Apps, Statistics and Analytics, Find New Twitter Friends Apps, Search Twitter Apps, Web-Based Mobile Apps, WordPress Twitter Plug-Ins, Adobe Air Twitter Apps and Firefox Twitter Extensions.

Twittercal
Twittercal is a service that connects your Twitter account to your Google Calendar and lets you add events easily, directly from your Twitter account.


Twitpay
TwitPay is a simple way to send payments via Twitter.


Twibs
Find, follow and interact with businesses, apps and services on Twitter.


Twittermail.com
Users can post to their Twitter account by sending a message to their own unique email address.

Twitzu
Promote your business, special offers, promotions and events with Twitzu.


Twuffer
Twuffer allows the Twitter user to compose a list of future tweets and schedule their release.

Tweet Later
This app allows you to post Tweets at a later time and date.


Group Tweet
Send private Twitter messages to specific groups of friends.

Tweetbeep
Keep track of conversations that mention you, your products, your company and anything else, via hourly email updates.


Twitpic
TwitPic lets you share photos on Twitter. You can post pictures to TwitPic from your phone, the TwitPic home page or your Twitter account.


Twitter Karma
Twitter needs a decent page for your followers, with the functionality to sort them by type. This Web app does that.


Mr. Tweet
A personal networking assistant for Twitter, helping you identify relevant followers, recommending you to other users and regularly computing your Twitter usage statistics.

Remember The Milk
Remember The Milk keeps track of your tasks. Simply add Remember The Milk as your friend, and you can add and interact with your tasks through direct messages and get reminders, too.

Straw Poll
StrawPoll is the coolest way to follow the opinions of people on Twitter. With this app, you can create your own poll.

Twiddict
If Twitter goes down and you start to feel withdrawal symptoms, use this service to continue using it. Twiddict makes sure all your tweets end up going to the proper place.


Twitter Friends Network Browser
Browse through your Twitter friends, your friends’ friends, your friends’ friends’ friends…

Twitterfeed
Post your RSS feed to Twitter automatically.


Twitturly
Twitturly is a service for tracking what URLs people are talking about, as they talk about them, on Twitter.


Twittonary
The Twitter Dictionary, aka Twittonary, provides explanations of various Twitter-related words.


TwtQpon
Enhance your social media marketing by offering discount coupons to the Twitter-sphere!


Twenglish
Twitter translator: Simply type in your tweet, and twenglish will twanslate your tweet for you.


Twtcard
Send a greeting card, a surprise message or an invitation on Twitter.


Tweet What You Spend
Cash-tracking made simple with Twitter.


Twittertise
Twittertise allows you to advertise on Twitter and track the success of your branded communications with customers.


Twitwall
With TwitWall, you can embed your favorite videos and widgets and upload your photos, MP3 music, podcasts, you name it.



By Paul Andrew, Speckyboy - Design Magazine

---- Read More ----

How To : Find WordPress Plug-Ins For Twitter

1. Twitter Updater
Are you using Twitter to notify readers about your new blog posts, or even old ones that you’ve updated? If so, then Twitter Updated is definitely something to consider. The plug-in automatically sends an update status request to Twitter when you create or modify a post. Text is customizable, and the plug-in provides many options.

2. Twit this
The Twit This plug-in makes it easy for readers to tweet about your blog posts by creating a “Share on Twitter” link on your blog. When someone clicks on it, your blog post’s URL is automatically sent to Twitter, and the visitor can enters a description before sending the tweet to his or her friends.


3. Twit it up
Twit it up is a simple AJAX-powered WordPress plug-in that basically does the same thing as Twit this: allows readers to tweet one of your posts directly from your blog by clicking a simple link.


4. Twitt Twoo
Twit-Twoo is a very useful for bloggers because it allows you to tweet friends directly from your WordPress dashboard. Particularly great if you spend a lot of time on your WordPress dashboard!


5. Twitter Tools
Twitter Tools, created by Alex King, is one of the most popular Twitter plug-ins for WordPress. It completely integrates Twitter in your WordPress blog, allowing you to archive your tweets, create a blog post from each of your tweets and post tweets from your admin dashboard or sidebar. It also allows you to create a daily digest of tweets; very nice if you tweet a lot!


6. Twittar
Twittar was released here on Smashing Magazine back in January. Remember it? This plug-in integrates Twitter avatars in the comment template of your WordPress blog. Definitely a plug-in to consider if you and your readership often use Twitter! And don’t worry if any of your readers don’t use Twitter (yet), Twittar automatically displays gravatars if no Twitter avatar is available.


7. Tweetbacks
Since its release only one month ago, the Tweetbacks plug-in has created a mini-revolution in the blogging world. While your WordPress blog can automatically notify you when bloggers discuss your posts on their own blogs, via Trackbacks, it can’t notify you when people discuss your posts on Twitter. That’s why Tweetbacks is so great: it automatically imports tweets about your posts and lets you display them either as comments or separately.


Others :
50 Twitter Tools and Tutorials For Designers and Developers

8 Useful Tips To Become Successful With Twitter

Taken from : A post written by Jean-Baptiste Jung, a 27-year-old blogger from Belgium who blogs about WordPress at WpRecipes

---- Read More ----

Missing Children's Day

In 1983, President Ronald Reagan proclaimed May 25th to be National Missing Children’s Day, and this day has been observed by every administration since. May 25th marks the anniversary of the disappearance of 6-year-old Etan Patz who went missing from a New York street corner on his way to school.

National Missing Children's Day is an annual reminder to the nation to make child safety a priority.

This entry are dedicated to childs that disappear from their family or guardian. Parents please protect your child from strangers and do keep in mind that children safety seriously important today.

---- Read More ----

I was pretty interested in the Twittar plug-in when it was first released and decided to look at the source to see how it works. Being a die-hard WordPress hack fanatic, I decided to create a hack using the Twittar code.

Follow these simple instructions to use Twitter avatars in your blog comments without a plug-in:

1. The first thing is to get the functions file here.

2. Once you have it, unzip the archive and open the twittar.php file. Select all of its contents and paste it in the functions.php file in your theme.

3. Now, open your comments.php file and find the comments loop. Then, just paste the following line where you’d like the Twitter avatars to be displayed:

Source: How to: Use Twitter avatars in comments

---- Read More ----

How To : Create a Twitter page on your WordPress blog

Jean-Baptiste Jun already showed you how to display your latest tweet on your blog, in your sidebar for example. Another good way to introduce readers to your Twitter updates is to create a dedicated page for displaying your tweets, using the powerful “Page template” WordPress option.

To perform this hack, you need to know how to create and use page templates. If you’re not familiar with this, this article will tell you all you need to know.

Here’s the code to create a Twitter page template. Paste it in a new file, name the file something like twitter-page.php, for example, and then add it to your blog.

/*
Template Name: Twitter page
*/

get_header();

include_once(ABSPATH.WPINC.'/rss.php');
wp_rss('http://twitter.com/statuses/user_timeline/15985955.rss', 20);

get_sidebar();
get_footer();
?>

This code uses the wp_rss() function from WordPress core, which is an RSS reader. In the first argument I pass my Twitter RSS feed, and in the second argument I determine the number of entries to display.

---- Read More ----