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
  • GPH

    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).

  • http://www.humoody.net Mohammed

    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

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

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

  • http://www.photomarton.com/ Dennis Marton

    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?

  • Pingback: uberVU - social comments

  • Tyler Jensen

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

    TJ

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

  • http://www.developar.com developar

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

    • http://www.papermashup.com Ashley

      @Developar that’s really odd I can’t replicate it…. I’ll look into it. Thanks for the heads up! :)

  • http://www.developar.com developar

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