I welcome you to another useful tutorial. This time it’s about how to create tabs with jquery. Just like any other tutorial this also comes from one of my project. I had a requirement to create tabbed content and this is what I came out with. It is on production and good to start using in your websites.

Please take a look at the demo below before we proceed on to how we can do it using this tutorial.

First we write the HTML code.

Take a look at the code below.

<div class="tabwrapper">
			<div class="tabs_links">
				<ul>
					<li><a href="#tab1">Events</a></li>
					<li><a  href="#tab2">News</a></li>
				</ul>
			</div>
			<div class="tab_content" id="tab1" style="display:none" >
				<ul>
					<li>
						<div class="thumb">
							<a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-25-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-25" title="untitled (1 of 1)-25" /></a>
						 </div>
						 <div class="descripton">
							<h6><a href="#">Pre-School Registration Info for 2012-13</a></h6>
							<em>(Posted on Tue, 03/01/2012)</em>
							Classes are assigned based on the child’s age on September »
						</div>
					</li>
					<li>
						<div class="thumb">
							<a href="#""><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/new-year-2012-53x53.gif" class="attachment-news-thumb wp-post-image" alt="new-year-2012" title="new-year-2012" /></a>
						 </div>
						 <div class="descripton">
							<h6><a href="#"">School Starts on the 5th of January</a></h6>
							<em>(Posted on Tue, 03/01/2012)</em>
							Happy New Year to you and like you we are »
						</div>
					</li>
					<li>
						<div class="thumb">
							<a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-36-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-36" title="untitled (1 of 1)-36" /></a>
						 </div>
						 <div class="descripton">
							<h6><a href="#">New Website for FCS</a></h6>
							<em>(Posted on Tue, 03/01/2012)</em>
							New Year brings lots of new things in life, and »
						</div>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
			<div class="tab_content" id="tab2" style="display:none" >
				<ul>
					<li>
						<div class="thumb">
							<a href="#"><img width="53" height="53" src="http://69.175.109.74/~fcsga/wp-content/uploads/2012/01/untitled-1-of-1-25-53x53.jpg" class="attachment-news-thumb wp-post-image" alt="untitled (1 of 1)-25" title="untitled (1 of 1)-25" /></a>
						 </div>
						 <div class="descripton">
							<h6><a href="#">Pre-School Registration Info for 2012-13</a></h6>
							<em>(Posted on Tue, 03/01/2012)</em>
							Classes are assigned based on the child’s age on September »
						</div>
					</li>
				</ul>
				<div class="clear"></div>
			</div>
		</div> 

We first create a div with class tabs_links. This has two anchor elements which on clicking will link us to #tabs. We have mentioned this in the href attribute. The first tab is given an ID as tab1 and the second as tab2. You can keep going on in this manner to how many ever tabs you want. We be using the tab IDs in jquery later.

Next we will create two divs with class tab_content and give them their IDs. You put one div after the other and close them. Now remember the anchor tags which had their hyperlink href value as #tab IDs . So here you gotta give the divs tab_content with their specific IDs. This is how we will link the anchor tags with their respective tab_content divs. What you put inside the tab_content div is upto you. For this example I have created a list item according to my requirement. Also if you have noticed I have put an inline styling and changed the display to none. I know that this is not the best method. I’ll be hiding them using jquery also. But this inline styling is just a fallback incase the jquery doesn’t work because of some reason. We don’t wanna see a broken page do we?

Next comes the styling.

Just to make things prettier I have used the following CSS. This tutorial is focused on how to create the tabs and not styling them. So I’ll be explaining the jquery part in detail which is coming next.

.tabwrapper {
    float: left;
    width: 350px;
	margin: 20px 0 0 0;
}
.tabs_links {
    height: 34px;
    padding-bottom: 2px;
    width: 350px;
}
.tabs_links ul {
    float: left;
    margin-left: 1px;
}
.tabs_links ul li {
    float: left;
    margin-top: 2px;
}
.tabs_links ul li a, .tabs_links_two ul li a {
    background-image: url("images/tabsep.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    color: #222427;
    display: inline-block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 33px;
    margin-top: 2px;
    padding: 0 22px;
}
.tabs_links ul li a:hover, .tabs_links ul li.active a {
    background: rgba(247,247,247,0.5);
    border-left: 1px solid #D5D5D5;
    border-right: 1px solid #D5D5D5;
    border-top: 1px solid #D5D5D5;
    color: #FFFFFF;
    left: -1px;
    line-height: 32px;
    padding: 0 20px 0 22px;
    position: relative;
}
.tab_content {
    background: rgba(247,247,247,0.5);
    border: 1px solid #D5D5D5;
    padding-bottom: 16px;
    width: 348px;
}
.tab_content ul {
    float: left;
    padding: 10px 0 0 15px;
}
.tab_content li {
    border-bottom: 1px solid #E1E1E1;
    float: left;
    padding: 12px 0 4px 1px;
    width: 322px;
}
.tab_content li .thumb img {
    border: 1px solid #D5D5D5;
}
.tab_content li .thumb {
    float: left;
    padding-top: 7px;
    width: 55px;
}
.tab_content li .descripton {
    float: right;
    width: 253px;
	font-size: 12px;
}
.tab_content li .descripton h6{
	margin: 0 0 5px 0;
}
.tab_content li .descripton a{
	font-size: 13px;
	color: #333333;
}
.tab_content li .descripton em{
	display: block;
	opacity:0.5;
	margin: 0 0 3px 0;
}

We do the Magic here!

Now to hide and display the tabs when the respective anchor tags are clicked we will be using Jquery. First take a look at the jquery code below, after which I’ll be explaining one line at a time in detail.

$(document).ready(function() {
	$(".tab_content").hide(); //Hide all content
	$(".tabs_links ul li:first").addClass("active").show(); //Activate first tab
	$(".tab_content:first").show(); //Show first tab content
	//On Click Event
	$(".tabs_links ul li").click(function() {
		$(".tabs_links ul li").removeClass("active"); //Remove any "active" class
		$(this).addClass("active"); //Add "active" class to selected tab
		$(".tab_content").hide(); //Hide all tab content
		var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
		$(activeTab).fadeIn(); //Fade in the active content
		return false;
	});
});

While writing the html code I told I’ll be hiding the divs with class tab_content using jquery though there is an inline styling. That’s what the first line is doing. We find all the divs with tab_content class and hide them.

$(".tab_content").hide(); //Hide all content

In the second line we are setting the first anchor tag to active. Because we have styled the li element in CSS I am finding the first li element which has the first anchor tag and add a class named active, so that it looks highlighted. Next we show it using the show jquery function just in case.

$(".tabs_links ul li:first").addClass("active").show(); //Activate first tab

In the third line we are selecting the first tab_content and showing it. We do it with the :first pseudo code. This will override the inline CSS we wrote earlier.

$(".tab_content:first").show(); //Show first tab content

Now for some action.
Now when any of the li element is clicked we need some function to be executed. And that is what we do here by creating a click function for the li elements under tabs_links div. Inside this function we can put all the codes we want to execute when the li element is clicked.

$(".tabs_links ul li").click(function() {
});

First we remove the active class from the li element.

$(".tabs_links ul li").removeClass("active"); //Remove any "active" class

Then to the li element that was clicked we add the active class. That is why we use this jquery selector to find the li element here. this selector refers to the element to which function is associated with.

$(this).addClass("active"); //Add "active" class to selected tab

Then we hide all the tab_content divs. So that in the next step we can find which li element was clicked and show the relative tab_content.

$(".tab_content").hide(); //Hide all tab content

Now we simply create a variable named activeTab. This will hold the href attribute value of the anchor element whose parent – li element was clicked. We again use this jquery selector to find the li element which was clicked. Then we find the anchor element inside it with the find jquery function. We further reach the href attribute by using the attr jquery function.

Now the variable activeTab holds href attribure value (which would be an ID).

var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content

Next step is to simply find the ID stored in activeTab variable and fade in using the fadeIn jquery function.

$(activeTab).fadeIn(); //Fade in the active content

All in all with just 14 lines of code we are able to create the most simple and elegant tabs using jquery. If you could further squeeze down the lines and give better results please let me know in the comments.

Hope this tutorial was useful as other. Do let me know that too. Thanks! See ya!

Related posts:

1. How to give animated default text for text fields using Jquery?
2. Create a simple image hover gallery using jquery
3. How to create Simple and sleek Jquery Carousel Gallery

Last month when I was working with my new venture www.pixomania.in I accidently found this animation when I was fiddling with CSS Transition. Yes by now you would have guessed that the magic here is the CSS Transition property. But there is also another ingredient which is CSS Sprites. And the way we mix these two is using the CSS Background property. Let’s have a look at the demo.

Did you see the magic in the demo? Make sure that you have hover on all the text links buttons to see how the magic works. Now lets see the HTML and CSS mark up.

HTML Markup

Just write a link the normal way you do. This technique can be used with buttons too but for this example ill show you with a link.

<a class="nextpostslink" href="http://pixomania.in/pixio-series-collections/" title="Pixio Photo Series" >Pixo Series</a>

CSS markup

Before you do this make sure you have the sprite image ready. Something like this as shown below.

Now the CSS markup.

a.nextpostslink {
    background: url("images/sprite_img.png") no-repeat scroll -271px -279px transparent;
    height: 40px;
    margin: 0 0 0 15px;
    text-indent: -9999px;
    width: 40px;
	-moz-transition: all 0.4s ease-in-out 0s;
	-webkit-transition: all 0.4s ease-in-out 0s;
	transition: all 0.4s ease-in-out 0s;
}
a.nextpostslink:hover {
    background: url("images/sprite_img.png") no-repeat scroll -243px -279px transparent;
}

Explanation:

First we write some rules using the background property to set the sprite image to the link. Then on hover we use the background position property or in this case the short code of background position inside background property to move the sprite image when the link is hovered on. I guess till thisyou would already be familiar with it.

To this now we add the magic line “Transition” property. Since not all browsers support this property unanimously we have to use their hacks to make it work. And hence we use

transition: all 0.4s ease-in-out 0s;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;

The ‘all’ value refers to all the property to which css3 transition can be applied to. In this case change only the background property on hover and hence only that will be animated. But if you like to change the color of the font or adjust padding and margin you could do so and see the effects that happen.

The ease in and ease out function help the animation happen smoothly. You can read more on this here.

Hope this was useful and you can use this in your production website. Kindly share in the comments your suggestions and the website in which you have used this technique.

No related posts.

Synopsis

Based on the debut novel by Hunter S. Thompson, “The Rum Diary” tells the increasingly unhinged story of itinerant journalist Paul Kemp (Johnny Depp). Tiring of the noise and madness of New York and the crushing conventions of late Eisenhower-era America, Kemp travels to the pristine island of Puerto Rico to write for a local newspaper, The San Juan Star, run by downtrodden editor Lotterman (Richard Jenkins). Adopting the rum-soaked life of the island, Paul soon becomes obsessed with Chenault (Amber Heard), the wildly attractive Connecticut-born fiancée of Sanderson (Aaron Eckhart). Sanderson, a businessman involved in shady property development deals, is one of a growing number of American entrepreneurs who are determined to convert Puerto Rico into a capitalist paradise in service of the wealthy. When Kemp is recruited by Sanderson to write favorably about his latest unsavory scheme, the journalist is presented with a choice: to use his words for the corrupt businessmen’s financial benefit, or use them to take the bastards down.

Related posts:

1. Diary of a Wimpy Kid: Rodrick Rules

Synopsis

A sexy summer weekend turns into a blood-soaked nightmare for a group of college students trapped on an island surrounded by voracious underwater predators in Shark Night 3D, a terrifying thrill ride from director David Ellis (The Final Destination, Snakes On a Plane), featuring a red-hot young cast including Sara Paxton (Superhero Movie, Last House on the Left), Dustin Milligan (“90210,” Slither), Chris Carmack (“The O.C.”), Joel David Moore (Avatar), Chris Zylka (The Amazing Spider Man) and Katharine McPhee (The House Bunny). Arriving by boat at her family’s Louisiana lake island cabin, Sara (Sara Paxton) and her friends quickly strip down to their swimsuits for a weekend of fun in the sun. But when star football player Malik (Sinqua Walls) stumbles from the salt-water lake with his arm torn off, the party mood quickly evaporates. Assuming the injury was caused by a freak wake-boarding accident, the group realizes they have to get Malik to a hospital on the other side of the lake, and fast. But as they set out in a tiny speedboat, the college friends discover the lake has been stocked with hundreds of massive, flesh-eating sharks! As they face one grisly death after another, Sara and the others struggle desperately to fend off the sharks, get help and stay alive long enough to reach the safety of dry land.

Related posts:

1. Tucker and Dale vs Evil
2. Fright Night
3. Dylan Dog: Dead of the Night

Synopsis

Hollywood 1927. George Valentin is a very successful silent movie star. The arrival of talking pictures will mark the end of his career. Peppy Miller, a young woman extra, becomes a major movie star.

The Artist is a 2011 French romance film directed by Michel Hazanavicius, starring Jean Dujardin and Bérénice Bejo. The story takes place in Hollywood between 1927 and 1931 and focuses on a declining male film star and a rising actress, as silent cinema grows out of fashion and is replaced by the talkies. The film is itself a silent film and in black-and-white. Dujardin won the Best Actor Award at the 2011 Cannes Film Festival, where the film premiered.

Director Michel Hazanavicius had been fantasizing about making a silent film for many years, both because many filmmakers he admires emerged in the silent era, and because of the image-driven nature of the format. According to Hazanavicius his wish to make a silent film was at first not taken seriously, but after the financial success of his spy-film pastiches OSS 117: Cairo, Nest of Spies and OSS 117: Lost in Rio, producers started to express interest. The forming of the film’s narrative started with Hazanavicius’ desire to work again with actors Jean Dujardin and Bérénice Bejo, Hazanivicius’s wife, who had starred in the OSS 117 films. Hazanavicius chose the form of the melodrama, much because he thought many of the films from the silent era which have aged best are melodramas. He did extensive research about 1920s Hollywood, and studied silent films to find the right techniques to make the story comprehensible without having to use too many intertitles. The screenplay took four months to write.

The film was produced by La Petite Reine and ARP Sélection for 13.47 million euro, including co-production support from Studio 37 and France 3 Cinéma, and pre-sales investment from Canal+ and CinéCinéma. Both the cast and crew were mixed French and American. Filming took place during seven weeks on location in Hollywood. Throughout the shoot Hazanavicius played music from classic Hollywood films while the actors performed.

Related posts:

1. Certified Copy

Synopsis

A comedy centered on the life of Kate Reddy, a finance executive who is the breadwinner for her husband and two kids.

Related posts:

1. The Sitter
2. The Odd Life Of Timothy Green
3. We Need To Talk About Kevin

Synopsis

A horror-thriller centered on a woman living with “face-blindness” after surviving a serial killer’s attack. As she lives with her condition, one in which facial features change each time she loses sight of them, the killer closes in.

Related posts:

1. The Adjustment Bureau
2. Dylan Dog: Dead of the Night

Synopsis

A boxing drama set in the near-future where 2,000-pound robots that look like humans do battle.

Related posts:

1. Battle: Los Angeles
2. Rise Of Planet Of the Apes
3. Ghost Rider: Spirit of Vengeance

Synopsis

Underwater Love (Japanese: Onna no kappa) is a Japanese-German co-production. Germany’s Rapid Eye Movies and Japan’s Kokuei Company have created a whimsical pink film musical about a woman and a sea creature. It was directed by pink-film veteran Shinji Imaoka (Lunch Box, Frog Song), shot by famed cinematographer Christopher Doyle (Hero and countless films by Wong Kar Wai) and offers music by Germany’s Stereo Total. Underwater Love was shot in 5 ½ days, one take only.

Plot
Asuka, a woman in her thirties, works in a lakeside fish factory. She’s about to be married to her boss, Taki. But one day, she encounters a kappa — a water sprite found in Japanese folklore — and learns that the creature is in fact the reborn form of Aoki, an old crush who’d drowned to death when they were 17.

Related posts:

1. Arthur

Synopsis

DEADHEADS is a “zombedy” that is sure to impress–pleasing both horror and action-adventure fans alike. Yup, you heard it first. Horror, meets comedy, meets action adventure!

DEADHEADS is a return to the great comedy/adventure films of the 80′s like “Back to the Future” and the “Goonies”. The story follows two zombie slackers, Mike and Brent, who find themselves surprisingly reborn from the dead amid a disastrous zombie outbreak. After discovering an engagement ring in his coat pocket, Mike enlists his new found zombie pal, Brent, to embark on a quest in search of his lost love.

What ensues is a hilarious cross country road trip as these two reformed flesh-eating pals hitchhike cross country as they are pursued by a team of zombie killin’ bounty hunters!

Related posts:

1. Rubber
2. The Adjustment Bureau