In: Projects, jQuery

Yaypaul.com title slider – explained

I received a request asking me if I’d mind sharing the piece of code I use to slide entry titles up and down on Yaypaul.com. I’m always happy to share: I’ve striped the effect code, added some extra comments and hopefully with this explanation you’ll be able to decipher it. This particular effect has already been noted on a number of sites, so this feels like a natural extension.

I’ll cover everything pertinent but, HTML, CSS and some jQuery experience is assumed. Where possible I’ll link to further information. If you find yourself having any major trouble please drop me a comment below.

Download a copy of the Sample Code to work on as we go, it has everything you need to run the effect.

Libraries

I’ll be using a few code libraries to produce the sliding effect. Each is lightweight, the JavaScript library is required, but the CSS files are optional as their elements can be applied in other ways. However, for the purpose of this tutorial we’ll be using them.

I like to use Reset CSS by Eric Meyer because it sets up all your elements with neutral values, this way you know what to expect when you start building your pages.

The second Core CSS file is of my own creation and is covered in a number of places. For the purpose of this tutorial I’ve included only called elements.

jQuery is my JavaScript library of choice, not your only option though. I also chose to include a cached version of the library from Google Code.

HTML

The most important elements in this HTML block are the IDs. Both yourid1 and yourid1-title are used by the JavaScript component to control the actual scroll effect.
It’s also important to note the Absolute positioning and zero top margin of the Title item. Together these attributes ensure your title animates from the edge of it’s parent and over the top of it’s siblings. Relative positioning will also perform the effect, but you’ll notice the animation pushes down it’s siblings content, rather than slide over it.

<div class="box block float relative" id="yourid<em></em>1">
	<h1 class="float absolute hidden" id="yourid1-title"><a href="" class="block">Box title here</a></h1>
	<p class="entry closed">Box content here</p>
</div>

CSS

With the CSS on Yaypaul.com I chose to style the a tag inside of the title element. You could also style the h1, div, p or span you’ve chosen to use for your actual title item.

As this CSS code only deals with formatting the HTML display and not with the effect I’ll leave comments to the code below – the JavaScript will still fire with no CSS at all.

/* Define item box */
.box{width:300px; height:300px; overflow:hidden;}

/* Set title (H1) level & position */
.box h1{margin:0; z-index:3;}

/* Define link tag */
.box h1 a{width:180px; margin-left:10px; padding:20px; font-size:24px; line-height:30px; background:#f1f1f1; color:#000;}

/* Define intro text/img and level */
.box .entry{width:220px; height:220px; margin-top:0; padding:10px; color:#fff; background-color:#000; z-index:1;}

JavaScript

Now on to the engine that drives the sliding effect. In the speed test preview below you’ll notice each item box has it’s own JavaScript block, this is not efficient. That’s why our sliding code moves each item at the same speed, this allows us to look for any instance of the item that’s triggered.

1. First we register a mouseenter on any .box element.
2. Then we perform a Slide Down action on the instance of .box with the corresponding ID.
3. The code then watches for a mouseleave action on the same instance of .box to perform the Slide Up action.

Inclusion of the :hidden and :visible attributes ensures that the animations only fire on mouseenter if the title is Hidden and on mouseleave if the title is Visible.
The jQuery function .stop() is called to ensure any animation already running is completed before another can be fired, queuing of animations avoided.

Speed values can be changed to any number you prefer to use, lower numbers are faster. Please refer to the Speed test preview below for some options and configurations for slider speed.

$(document).ready(function(){

 //Title Slide Effect
 $(".box").bind("mouseenter", function() {
  $("#"+this.id+"-title:hidden").stop(true, true).slideDown(200);
 }).bind("mouseleave", function(){
  $("#"+this.id+"-title:visible").stop(true, true).slideUp(400);
 });

});

Previews

I’ve included a number of links to different previews of the code below;
Single box – Standard preview
Multiple box – List implementation
Speed preview – Multiple examples of different slide speeds

Example code

Below you’ll find the whole code example, complete with comments.
This same code can be downloaded in a file if you prefer.

<html>
<head>

<title>Yaypaul Title Slide</title>
<style>
<!--http://meyerweb.com/eric/tools/css/reset/-->
	<!--v1.0 | 20080212-->
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}

<!--Core CSS Part http://designergamergeek.com/core-css/-->
	div{overflow:hidden;}
	p.closed{margin:0; font-size:18px;}
	.float{float:left !important;}
	.relative{position:relative !important;}
	.absolute{position:absolute !important;}
	.hidden{display:none}
	.block{display:block}
<!--Content-->
	<!--Define item box-->
	<!--Set title (H1) level-->
	<!--Define link tag-->
	<!--Define intro text/img and level-->
	.box{width:300px; height:300px; overflow:hidden;}
	.box h1{margin:0; z-index:3;}
	.box h1 a{width:180px; margin-left:10px; padding:20px; font-size:24px; line-height:30px; background:#f1f1f1; color:#000;}
	.box .entry{width:220px; height:220px; margin-top:0; padding:10px; color:#fff; background-color:#000; z-index:1;}
</style>

</head>
<body>

<div class="box block float relative" id="yourid1"> <!--Item box-->
	<h1 class="float absolute hidden" id="yourid1-title"><a href="" class="block">Box title here</a></h1> <!--Title[hidden]-->
	<p class="entry closed">Box content here</p> <!--Intro text/img-->
</div>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script type="text/javascript">
$(document).ready(function(){

	//Title Slide Effect
	$(".box").bind("mouseenter", function() { //Register mouseenter on any .box element
		$("#"+this.id+"-title:hidden").stop(true, true).slideDown(200); //Stop any current action on this box then Slide Down by N speed
	}).bind("mouseleave", function(){ //Register mouseleave on this .box element
		$("#"+this.id+"-title:visible").stop(true, true).slideUp(400); //Stop any current action on this box then Slide Up by N speed
	});
	// The :hidden and :visible attributes ensure that the animations only fire on mouseenter if the title is Hidden and on mouseleave if the title is Visible

});
</script>

</body>
</html>

Syntax Highlighter – by Alex Gorbatchev

Posted: Wednesday, July 7th, 2010
Tags: , , , , , ,

No Responses

Leave a comment