• RSS
  • Delicious
  • Digg
  • Facebook
  • Twitter
  • Linkedin
  • Increase Website And Blog Traffic:latest article for Increasing Blog and website Traffic free gide.....
  • Create and Upload Site Map to Google:Google is fist largest Search Engine by upploading SITE MAP Google Easily Search Links from Ur site in Searching.......
  • Fix WEB SITE Errors:Google and other search engines always take those site in there fist page in searching which ha too less web Errors...
  • Top 20 Search Engine:Submit Ur site to top 20 Search Engines to Increasing Ur Site Traffic and making money top search engines like as Google, Yahoo, Ask, AOl, MSN...
  • Top Social Sites:Top 100 Social sites which real help U make a Affliate Marketer and in Pormoting ur Producdts...

New Posts

Turn off the lights with jQuery

Posted by Mohsin On 10/27/2013 02:39:00 AM No comments

For those who enjoy watching videos on the internet, this is a very useful script made with jQuery by Janko.

So what this script does? It will "turn off the lights" so that everything you have on the page will be fading to dark, less the video, so there will not be other elements that will distract us while watching a video and we will feel like watching a movie in a cinema.

You can see an example here by clicking on the link that says "Turn off the lights".

How to Add the Turn off the Lights Feature to Blogger/Blogspot


To put this effect of "lights" on the blog, just follow the steps below:

Step 1. Go to Template > Edit HTML

Step 2. Click anywhere on the code area and search for the following tag by pressing the CTRL + F keys:
</head>
Step 3. After you found it, paste the below script just above it:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#darkness").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#darkness").toggle();
if ($("#darkness").is(":hidden"))
$(this).html("Turn off the lights").removeClass("turnedOff");
else
$(this).html("Turn on the lights").addClass("turnedOff");
});
});
//]]>
</script>
Note: if you already have one version of jquery added in the template, then remove the line in red.

Step 4. Now search for the ]]></b:skin> tag (click on the left arrow if needed (you may need and after the code has been expanded, search it again by using the CTRL + F keys)

Step 5. Just above it, add the following CSS styles:
/* Turn off the lights
----------------------------------------------- */
#lightsVideo {
position:relative;
z-index:102;
}
#switch {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(http://3.bp.blogspot.com/-Vs5EJnjVScM/Um0Sq84fJtI/AAAAAAAAEeQ/PEu-OStZciA/s1600/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(http://3.bp.blogspot.com/-vKGxmBhYshA/Um0Sqwy_hNI/AAAAAAAAEeU/F0WKs6_WARM/s1600/lights-off.png);
}
#darkness {
background:#000;
opacity:0.8;
filter:alpha(opacity=80);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
Click on the arrow to expand the styles
Step 6. Search the </body> tag and add this html code just above it:
<div id='darkness'/>
Step 7. Click the Save Template button to save the changes.

Now, wherever you put your video, either a post or a HTML/Javascript gadget, use this code:
<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Turn off the lights</a></div>
<div id="lightsVideo">
...Here goes the code of the video...
</div>
</center>
Add the code of your video to where is indicated and that's it. Now you can enjoy your videos with the lights off!
Remember that this trick uses jQuery, so if you use Scriptaculous or Mootools you should apply a patch, and if you use another version of jQuery, you must use only one.

0 comments:

Post a Comment

All types of Comments are welcome