Building a fancy jQuery header feature

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>

This entry was posted in CSS, Design, Downloads, Javascript, Learn, Tutorials, jQuery and tagged CSS, Design, Downloads, Javascript, jQuery, Tutorials. Bookmark the permalink.