Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Building a fancy jQuery header feature

AshleyAshley

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>

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 16
  • Arthur
    Posted on

    Arthur Arthur

    Reply Author

    This script does not work anymore in IE9. I had to u update a couple dozen sites with new script. I willl never use his worthless scripts again.


  • Simon
    Posted on

    Simon Simon

    Reply Author

    Cool…unfortunately the animate function doesn’t work too well in Safari and Chrome. Works well in Firefox though. It’s like Safari and Chrome can’t handle when you move over several divs shortly after each other. If you do whole thing will contract and expand after a short while, causing jittering all over the place.

    Is there a fix for this for Safari and Chrome?


  • Simon Andersen
    Posted on

    Simon Andersen Simon Andersen

    Reply Author

    Great header, but it really doesn’t work well in Safari and Chrome. The right end of the feature shakes and jumps around like crazy. Works well in FF though, but that’s not really enough. Too bad…it’s a great idea.


  • Chris
    Posted on

    Chris Chris

    Reply Author

    GPH figured it out. Thanks.


  • Nikky
    Posted on

    Nikky Nikky

    Reply Author

    In IE the first image disappears.
    Any solutions?


  • GPH
    Posted on

    GPH GPH

    Reply Author

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


  • Mohammed
    Posted on

    Mohammed Mohammed

    Reply Author

    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


  • Dennis Marton
    Posted on

    Dennis Marton Dennis Marton

    Reply Author

    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?


  • Tyler Jensen
    Posted on

    Tyler Jensen Tyler Jensen

    Reply Author

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

    TJ


  • developar
    Posted on

    developar developar

    Reply Author

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


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

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


  • developar
    Posted on

    developar developar

    Reply Author

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