The Code Dreamer : Nitin Hayaran » Javascript

How to Properly Hide and Show Elements Using Javascript

nitin — Sun, 15 May 2011 14:50:09 +0000

What is the first solution comes to your mind, when someone asks you

How can I dynamically hide any element using Javascript ?

The obvious solutions to this is to set "display" style to "none". Something like this:

document.getElementById('element').style.display = 'none';

This will surely work, but is it the correct way to do so? May be not, as you would face problems in showing that element again. The problem in showing that element is that you don't know the original display property of that element. Whether it was a "Block" level element or an "inline" element. So, basically you'll have to do something like this, depending upon type of element:

document.getElementById('element').style.display = 'block';
document.getElementById('element').style.display = 'inline';

Can we do it in some better way?

Now do it proper way

An improved way to achieve similar thing is to create a css class like this:

.hide{display:none !important;}

And now just add or remove this class to hide and show elements.

document.getElementById('element').className = 'hide';

or write $("element").addClass('hide'); if you are using mootools.

Energy Saving Javascript

nitin — Sun, 27 Jun 2010 18:30:38 +0000

Title of this post may seem strange to you but this is true, You can actually save some energy by using this Javascript on your website. Let me tell you how.

This javascript turns the webpage black if there is no user activity on the page for some time. As the page predominantly turn black the script in-effect saves energy.

Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen.

Roberson et al, 2002.

Just have a look at the Demo to see how it looks:

Energy Saving Javascript Demo

How to Use

Using this script is damn simple just place following script tag anywhere in the page. It would be good if you place this script just before

<script src="http://apps.nitinh.com/energy.js?time=100&credit=0" type="text/javascript"></script>

Configuration

There are two configurable parameters:

time : This is the amount of idle time before which the screen turn black. The time is in number of seconds and its value should be greater than 10.
credit : This is boolean field to show / hide credits in Black Screen. Values could be 1 or 0

Hope this script saves some of the valuable world energy.

Beautiful Nag Screen using JQuery & CSS3

nitin — Tue, 16 Mar 2010 16:51:18 +0000

Yesterday I wrote about a beautiful implementation for nag screen using mootools and CSS3. Thanks for all of my visitor for showing interest in it.

Considering requests from some of the users, I have also worked on its jQuery version. In jQuery version I have also tried to remove the bugs pointed out by one of the user.

The new jQuery version also have following improvements:

Close button can be used to close nag screen
Now the whole text doesn’t jumps when nag screen sticks to top

thanks “Seeker” for pointing out these bugs.

Head over to Demo and download the source for this page.

Demo of Nag Screen

Download Nag Screen Code

Be sure to check out the MooTools version.

Beautiful Nag Screen using Mootools & CSS3

nitin — Mon, 15 Mar 2010 12:30:04 +0000

Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we'll be creating beautiful and dynamic Nag Screen using Mootools.

The application of nag screen is widespread, it widely used by various websites to show important messages on the webpage. Some examples of such screens are :

Update notices in wordpress
Import address book message, which facebook shows
Registration messages shown on various websites

So, considering such a wide use of nag screens I’ve tried to make them a little beautiful and flashy.

Just have a look at the demo to see the effect :

Nag Screen Demo

For capturing the scroll events I have used “ScrollSpy” developed by “David Walsh”. Thanks David for make such useful and easy to use plugin.

You can always access source of the webpage for its better understanding. To grab the source please download it here:

Download Source

For further clarification and suggestions please drop comments.

Be sure to check out the jQuery version.

How to Create a Simple Slideshow using Mootools / JQuery

nitin — Sat, 13 Mar 2010 17:13:47 +0000

When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.

Demo using Mootools

Demo using JQuery

So, Interested ??? Lets head over to its implementation.

Action Plan

Step 1 : HTML Code Markup
Step 2 : Setup CSS for the Slideshow
Step 3 : Javascript for getting desired effect

Step 1 : HTML code

In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.

<div id="bigPic">
    <img alt="" src="imgs/1.jpg" />
    <img alt="" src="imgs/2.jpg" />
    <img alt="" src="imgs/3.jpg" />
    <img alt="" src="imgs/4.jpg" />
    <img alt="" src="imgs/5.jpg" />
    <img alt="" src="imgs/6.jpg" />
    <img alt="" src="imgs/7.jpg" />
    <img alt="" src="imgs/8.jpg" />
    <img alt="" src="imgs/9.jpg" />
    <img alt="" src="imgs/10.jpg" />
</div>
 
<ul id="thumbs">
    <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li>
    <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li>
    <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li>
    <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li>
    <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li>
    <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li>
    <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li>
    <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li>
    <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li>
    <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li>
</ul>

Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.

Step 2 : Necessary CSS Code

This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.

#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
 
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

Step 3 : Javascript Magic

The basic idea to get the effect is in following steps:

Increase the z-index of current shown image
Show next image to be shown just below current image.
Now using fade out current image. This way next image will become visible.

Equivalent JS code used is as follows.

Using Mootools

If you use JQuery directly head on to next section with JQuery code.

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index<$('bigPic').getElements('img').length){
        var indexImage = $$('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).setStyle('z-index',2);
                $clear(myTimer);
                var myFx = new Fx.Tween(currentImage, {
                    duration: 250,
                    onComplete:function(){
                        $(this).setStyles({'display':'none','z-index':1});
                        myTimer = showNext.delay(3000);
                    }.bind(currentImage)
                }).start('opacity',0);
            }
        }
        indexImage.setStyles({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $$('#thumbs li').removeClass('active');
        $$('#thumbs li')[index].addClass('active');
    }
}
 
function showNext(){
    var len = $('bigPic').getElements('img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
window.addEvent('domready',function(){
    myTimer = showNext.delay(3000);
    showNext(); //loads first image
    $('thumbs').getElements('li').addEvent('click',function(e){
        var count = this.get('rel');
        showImage(parseInt(count)-1);
    });
});

JQuery Implementation

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.

Download Code

JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip

Vertical-Align : Middle Using Javascript : JQuery & Mootools

nitin — Sat, 02 Jan 2010 06:58:33 +0000

How do I vertically center my stuff inside this area ?

If you are looking for an answer for the above question then possibly you've landed on the correct page. The very first solution for this is to have vertical-align:middle in your css. But unfortunately this CSS property only works on table-cell and img.
Gavin Kistner have written a great article about this : How (Not) To Vertically Center Content.

Personally I feel it very cumbersome to style items as a table/table cell to get it aligned. I prefer using Javascript for positioning the block in middle. There may be situations where you would not like to use javascript then CSS is always there for you.

The basic idea in this approach is to wrap all child elements in a div and position this div in middle using Javascript.

Jquery Implementation

This is a jQuery plugin that will allow you to use the function in the jQuery chain. Something like :

$('#container').vAlign();

View Demo

Plugin Code

The Plugin code is as follows:

(function ($) {
$.fn.vAlign = function() {
	return this.each(function(i){
        $(this).children().wrapAll('
');
        var div = $(this).children('div.nitinh-vAlign');
        var ph = $(this).innerHeight();
        var dh = div.height();
        var mh = (ph - dh) / 2;
        div.css('top', mh);
	});
};
})(jQuery);

Mootools Plugin

This is a Mootools plugin that will allow you to use is on any Element to get its child elements align in middle. The code is something like this:

var v = new vAlign($('container'));

View Demo

Plugin Code

vAlign = new Class({
 
	initialize: function(element){
        this.element = $(element);
 
        var div = new Element('div', {
                    'class': 'nitinh-vAlign',
                    'styles': {
                        'position': 'relative'
                    }
                });
 
        div.set({ 'html': this.element.get('html') })
        this.element.set({'html':''})
        div.inject(this.element);
 
        var ph = this.element.getSize().y;
        var dh = div.getSize().y;
        var mh = (ph - dh) / 2;
        div.set('styles',{
            'top':mh
        });
    }
})

It's not working for you

If this plugin is not working for you then may be there is some margin and padding applied in the code. Try changing it.

Another Beautiful Thumbnail Hover Effect : Using Mootools

nitin — Sat, 21 Nov 2009 09:11:02 +0000

Some days back I wrote a post regarding "Beautiful Thumbnail Hover Effect". On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.

This implementation is little different. To know more about this effect lets see the demo first.

View Demo

If you have seen the demo then you might be wondering how this image is splitting in middle. Actually to get this effect I have used two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.

Now lets move on to its implementation.

The HTML

Here i am given html code to showing one thumbnail:

<div class='thumb'>
	<div class='someContent'>
		<div class='content'>Some Random Text Over Here.  </div>
		<div class='more'><a href="#">More »</a></div>
	</div>
	<div class='divLeft' style='left:0px'>
		<div class='divLeftImage' style='background:url(7.jpg);'></div>
		<div class='divLeftShadow'></div>
	</div>
	<div class='divRight' style='left:0px;background-image:url(7.jpg);'></div>
	<img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/>
</div>

This code looks to me as self explanatory.

The CSS

div.thumb{
    position:relative;
	width:160px;
	height:160px;
	margin:30px 40px;
	overflow:hidden;
	border:5px solid #313131;
	float:left;
}
div.divLeft, div.divRight{
	width:90px;
	height:160px;
	overflow:hidden;
	position:relative;
    top:-160px;
	overflow:hidden;
	float:left;
}
div.divLeft{
	margin-right:-10px;
}
div.divLeftImage{
	width:80px;
	height:100%;
	float:left;
}
div.divLeftShadow{
	width:10px;
	height:100%;
	float:left;
	background:transparent url('shadow.png') repeat-y 0 0;
}
div.divRight{
	width:80px;
	background-position:-80px 0;
}
.thumbnail-shadow {
	float:left;
	height:33px;
	position:relative;
	top: -320px;
	width:100%;
}
 
div.someContent{
	position:relative;
    width:160px;
	height:150px;
	padding:10px 0px 0px;
	font-size:12px;
	font-family:Arial;
	text-align:justify;
	background:transparent url(thumbnail-overlay.png) no-repeat scroll 0px -167px;
 
}
div.someContent div.content{
	color:#CCC;
	height:126px;
	font-size:11px;
	padding:0 10px 0 20px;
}
div.someContent div.more{
	background-image:url(readmore-bg.png);
	bottom:0;
	float:right;
	height:16px;
	padding:5px 5px 3px 20px;
	position:relative;
	right:0;
	width:45px;
}

Javascript : Mootools

And Finally the magic of Mootools to get the desired effect. To get the desired effect I am moving div.divLeft 70px toward left, and moving div.divRight 80px toward right. At the same time the background image for the background text is coming down.

$$('div.thumb').each(function(div){
 
	div.getElement('div.someContent').set('tween', {duration:'700'});
	div.getElement('div.divLeft').set('tween', {duration: '450'});
	div.getElement('div.divRight').set('tween', {duration: '450'});
 
	div.addEvent('mouseenter',function(e){
		this.getElement('div.divLeft').tween('left','-70px')
		this.getElement('div.divRight').tween('left','80px')
		this.getElement('div.someContent').tween("background-position", "-20px 0px");
	})
	div.addEvent('mouseleave',function(e){
		this.getElement('div.divLeft').tween('left','0px')
		this.getElement('div.divRight').tween('left','0px')
		this.getElement('div.someContent').tween("background-position", "0px -167px");
 
	})
})

The whole code is available for download :

Download Another_Thumbnail.zip

Hope you guys will like it. Let me hear your feedbacks through comments.

Make Your Links (Hyperlinks) Even More Sexier

nitin — Thu, 29 Oct 2009 14:17:47 +0000

You would have often seen various attempts to make hyperlink more beautiful. One of my personal favorite is to have little icons beside links to let you know where they link to.
Different icons for external links, pdfs, images, etc. etc. You can find the tutorial for such link over here.

In this post i'll tell you a technique using which you can make your links even more sexier.

Check out the demo first : View Demo

The Implementation of this effect is given in the following sections.

The HTML

<a class="link" href="#">Put Anything Here</a>

All you need is to add classname "link" to your hyperlinks.

The CSS

The only important class is to have the final class "a.link".

a:link,a:hover,a:active,a:visited{
	color:#59BAEF;
	text-decoration:none;
	white-space:nowrap;
}
a{
	outline:none;
}
a.link{
	background:transparent url(a-bg.png) no-repeat -81px bottom;
}

The Javascript : Mootools

window.addEvent('domready',function(){
	$$('a.link').each(function(a){
		a.setStyle('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
		a.set('tween',{duration:600});
		a.addEvents({
			'mouseenter' : function(){
				a.tween('backgroundPosition', a.getSize().x + "px "+ (a.getSize().y-2) +"px");
			},
			'mouseleave' : function(){
				a.tween('backgroundPosition', "-81px "+ (a.getSize().y-2) +"px");
			}
		})
	})
})

The Javascript : jQuery

$(document).ready(function(){
    $('a.link').css('backgroundPosition', "-81px "+ ($(this).outerHeight()-2) +"px");
    $('a.link').bind('mouseenter',function(e){
        var a = $(this);
        a.animate({'backgroundPosition': a.outerWidth() + "px "+ (a.outerHeight()-2) +"px"},600);
    });
    $('a.link').bind('mouseleave',function(e){
        var a = $(this)
        a.animate({'backgroundPosition': "-81px "+ (a.outerHeight()-2) +"px"},600);
    });
})

Image Used

This effect is just a demo of the possibilities. I would love to here your own implementations.

Show IMDB Ratings on Torrentz.com using GreaseMonkey Script

nitin — Sun, 11 Oct 2009 18:04:16 +0000

Torrentz.com is a great site. It is a basically a one stop destination for any torrent search. I personally find it very useful as it automatically syndicate all the torrents from various sites like piratebay, mininova, demonoid etc.

Before downloading any movie from torrent I usually check its rating, synopsis & star cast on IMDB. I find this process very cumbersome and boring to search each movie on IMDB. To ease out this process I searched for a GM Script(GreaseMonkey Script). I found one, but it wasn't perfect so I have modified it. You can find its updated version at IMDB Rating in Torrentz

How to install this

Install greasemonkey extension for firefox if you have not already done so.
Go to http://userscripts.org/scripts/show/59570 and click on the “Install this Script” link on the right side

More Information

Don't know what GreaseMonkey is : Read Here

Don't Know how to install GreaseMonkey Addon : Read Here

Don't Know How to install Script in Greasemonkey

Beautiful Thumbnail Hover Effect : Using Mootools

nitin — Thu, 01 Oct 2009 07:37:56 +0000

Thumbnails of photos is very common part of any website. We have seen a lot of innovation and beautiful representation of thumbnails. Recently I came across a beautiful hover effect on thumbnails. Without saying much first see what is this effect.

View Demo

The Implementation of this effect is given in the following sections.

The HTML

<div class="thumbnail-wrap">
<div class="thumbnail-div">
<div style="background-image: url(5_thumb.jpg);">
   <img class="thumbnail-shadow" src="thumbnail-shadow.png" alt="bottom" />
<div class="sections-overlay">
    <a rel="imagezoom" href="5.jpg">
     <img class="zoom" src="zoom.png" alt="Some Title of the Image 5" />
    </a>
    <a class="readmore" href="#">read more >></a></div>
</div>
</div>
</div>

I think the code here is self explanatory.

The CSS

The CSS for the effect is a bit lengthy, as lots of hidden elements are involved.

.thumbnail-wrap {
	float:left;
	height:151px;
	margin:30px;
	width:151px;
}
.thumbnail-div {
	background-color:#313131;
	float:left;
	height:146px;
	padding:5px 0 0 5px;
	width:146px;
}
.thumbnail-shadow {
	float:left;
	height:33px;
	width:100%;
}
.thumbnail-div .sections-overlay {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	background:transparent url(thumbnail-overlay.png) no-repeat scroll -40px -300px;
	float:left;
	margin-top:-33px;
}
.thumbnail-div div{
	height:141px;
	width:141px;
}
.sections-overlay {
	background-image:url(readmore-bg.png);
	opacity: 0;
	visibility:hidden;
	background-position: 0px -167px;
}
.thumbnail-div .sections-overlay .zoom {
	margin:60px 0 0 61px;
}
.sections-overlay .zoom {
	border:medium none;
	margin:165px 0 0 312px;
}
.readmore {
	background-image:url(readmore-bg.png);
	color:#FFFFFF;
	display:block;
	float:right;
	font-size:10px;
	margin:17px 0 0 40px;
	padding:5px 10px;
}

The Javascript : Mootools

And Finally the magic of Mootools to get the desired effect. All this effect is doing to decrease the margin-top of "thumbnail-div" by 10px and showing "sections-overlay" div using opacity:1.

$$('div.thumbnail-div').each(function(div){
  div.addEvents({
    'mouseover': function(){
      $(this).tween('marginTop', '-10px');
      $(this).getElements('div.sections-overlay').each(function(d){
        d.morph({opacity: 1, backgroundPosition: "-40px 0px"});
      });
    },
    'mouseout': function(){
      $(this).tween('marginTop', '0px');
      $(this).getElements('div.sections-overlay').each(function(d){
        d.morph({opacity: 0, backgroundPosition: "0px -167px"});
      });
    }
  });
});

Doing just this we'll get such an amazing effect on Thumbnails. This effect is just a demo of the possibilities. One can use the same technique to show the Title of the Image or RunTime and Title of Video Thumbnail.

The whole code is available for download :

Download Thumbnail.zip

Hope you guys will like it. Let me hear new implementation through comments.