Use your left/right keys to browse tutorials
Building a fancy jQuery header feature

Building a fancy jQuery header feature

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on April 5, 2010

I’ve recently been working on a project where a client came to me with an idea to create a feature on their homepage which shows three sections of dynamic content, this lead me to think about writing a tutorial on how to create a jQuery feature such as this. I remember a few years back seeing a similar technique on a website but back then I had no idea how to create such a thing. You can check out the demo here.the photo’s used in the demo are via flickr and are credited to Floridapfe an amazing photographer from South Korea.

The JavaScript

This might not be the best way to structure the JavaScript and I’m sure you hard core coders will pick up on this however one of the purposes of this tutorial is to show newcomers to jQuery exactly how flexible and easy it is to create something that on the outside looks quick complex. The code used in this tutorial is relatively simple to understand.

we start with out document ready function, you should be familiar with this by now. If you’re not you can read about it here. We now have an event handler, in our case its a ‘hover’ event meaning that when our cursor hovers over the div ‘.holder’ it will execute the function. When our mouse exits the div ‘.holder’ it will run the handler out function, which in our case will revert the div back to how it was originally.

You can see that we’re using ‘(this)’ to reference our element. this is used to specify the element that the mouse is hovered over at that moment as we’re specifying the class holder, if we didn’t use ‘(this)’ regardless of which element we hovered over all of them would animate, so ‘(this)’ specifys that specific element to animate.

Lets look at what happens when we hover over one of the divs ‘.holder’.

  1. For the element our mouse is over we remove the class ‘notactive’
  2. We then animate the width of the divs with a class of ‘notactive’ this is to compensate for the expanding width of the selected element as you’ll see in the next step
  3. Now we increase the width of the current ‘.holder’ div to 380px
  4. Next we slide the image up to make way for the text.
  5. We then change the background color of the span header to black to highlight it.
  6. And finally over 300 milliseconds fade in the ‘.text’ div.

Because the animations aren’t chained they happen all at the same time.

When you’re mouse leaves the div the function below it is run to revert the contents back to it’s original position.

<br><br>$(document).ready(function(){<br><br>	 $('.holder').hover(<br>		function () {<br>		$(this).removeClass('.notactive');<br>		$('.notactive').stop().animate({'width':'290px'},400);<br>                $(this).stop().animate({'width':'380px'},400);<br>        $(this).find('img').stop().animate({'top':'-165px'},400);<br>		$(this).find('span').css({'background-color':'#000'});<br>		$(this).find('.text').fadeIn(300);<br>      },<br>	    function () {<br>		  	$('.notactive').stop().animate({'width':'320px'},400);<br>		  	$(this).addClass('.notactive');<br>			$(this).find('.text').hide();<br>       	                $(this).find('img').stop().animate({'top':'0px'},500);<br>		        $(this).stop().animate({'width':'320px'},400);<br>			$(this).find('span').css({'background-color':'#333', 'color':'#dedede'}); <br><br>      });<br><br>});<br><br>

The HTML

<br>&lt;div class="main"&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2784/4237135170_61a9938781.jpg" height=""/&gt; &lt;span&gt;Image One&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2599/4166210326_06d91ce72a.jpg"/&gt; &lt;span&gt;Image Two&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="holder notactive"&gt; &lt;img class="image" src="http://farm3.static.flickr.com/2443/4060303038_a630262185.jpg"/&gt; &lt;span&gt;Image Three&lt;/span&gt;<br>    &lt;div class="text"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,&lt;/div&gt;<br>  &lt;/div&gt;<br>  &lt;div class="clear"&gt;&lt;/div&gt;<br>&lt;/div&gt;<br>

The CSS

<br><br>.holder {<br>	overflow:hidden;<br>	width:320px;<br>	height:333px;<br>	float:left;<br>	position:relative;<br>	background-color:#000;<br>	margin-right:1px;<br>}<br>.holder .image {<br>	position:absolute;<br>	left:-100px;<br>}<br>.holder span {<br>	background-color:#333;<br>	font-size:27px;<br>	font-family:Arial, Helvetica, sans-serif;<br>	color:#dedede;<br>	font-weight:700;<br>	padding:4px;<br>	position:absolute;<br>	top:120px;<br>	left:4px;<br>}<br>.holder .text {<br>	padding:20px;<br>	display:none;<br>	font-family:Arial, Helvetica, sans-serif;<br>	line-height:26px;<br>	position:absolute;<br>	top:180px;<br>	font-size:16px;<br>	color:#fff;<br>	width:340px;<br>}<br>.clear {<br>	clear:both;<br>}<br>.main {<br>	width:1000px;<br>	height:333px;<br>	margin:0 auto;<br>	overflow:hidden;<br>}<br>



More tutorials from Papermashup
Comments
16 discussions around Building a fancy jQuery header feature
Newer Comments
  1. GPH says:

    Very cool, thanks!

    Regarding the IE bug (first image), you can fix it by removing ” height=”" ” in html code (just after the first image path).

  2. Mohammed says:

    Hello!
    Cool effect! Really like it!
    I noticed that the HTML source is not well formatted, as the signs are replaced with html codes. I would appreciate if you could fix this.
    Thanks in advance

  3. Pingback: Really Useful Tutorials You Should Have Read in April 2010 | MyInfoNetHome.Info

  4. Pingback: Useful Tutorials You Should Read in April 2010 « Design Define's Blog

  5. Very cool, thanks a lot. Works fine with Safari.

    But it seems that it doesn’t work properly with the IE. Tried it with IE 6-8 and the first image is always missing =( any solutions?

  6. Pingback: uberVU - social comments

  7. Tyler Jensen says:

    Very cool. I have not seen anything like this. Very cool.

    TJ

  8. Pingback: Tweets that mention Building a fancy jQuery header feature | Papermashup.com -- Topsy.com

  9. developar says:

    It is working fine in major browsers, but when I tried it in IE8 under “compatibility view” for some reason the first image disappeared !

  10. developar says:

    Amazing, I might build the index page of my next personal portfolio starting from this, Thanks!

Newer Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.