End of Page Slide Out Box with jQuery

The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the last part of the article. It shows another article from the same category and I thought that it might be something interesting for any blog or website.

The idea is to have an element in the page (here it is in the last paragraph) that triggers the box to appear. You could, for example, use this to show a related article or to explain a certain term you are using in your post.

Ok, let’s start!

The Markup

First, we need a paragraph somewhere in the page with the id “last”:

<p id="last">
    Some paragraph text
</p>

Then, we need the following html for the box:

<div id="slidebox">
	<a class="close"></a>
	<p>More in Technology & Science (4 of 23 articles)</p>
	<h2>The Social Impact of Scientific Research and new Technologies</h2>
	<a class="more">Read More »</a>
</div>

The link element with the class “close” will give the user the option to close the box and it will not appear again.

The CSS

Ok, let’s give some style to the box in a NYTimes manner:

#slidebox{
    width:400px;
    height:100px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
}

We give the box a fixed position, so that it follows the user while he is scrolling. The initial right value will make the box be hidden; we will make it slide out with some jQuery.

The box will have a nice CSS3 box shadow, and no, that will not work in IE browsers (except IE9, probably).
Check out this entry on CSS3.info if you want to see how to create a shadow: Box-shadow, one of CSS3’s best new features

The text elements and the more link will have the following style:

#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}

You might want to adapt the style of these elements to fit with you website. The style of the little closing cross looks as follows:

a.close{
    background:transparent url(../images/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
a.close:hover{
    background-position:0px -13px;
}

Now, let’s add some JavaScript for the effect.

The JavaScript

First, we include the jQuery library before the body end tag:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Then we will add two functions. One is to determine if we reached the trigger element while scrolling and to make the box slide out if so. The other function makes the box disappear when clicking on the little closing cross. Add this after the inclusion of the jQuery library and before the body end tag:

<script type="text/javascript">
$(function() {
	$(window).scroll(function(){
		var distanceTop = $('#last').offset().top - $(window).height();

		if  ($(window).scrollTop() > distanceTop)
			$('#slidebox').animate({'right':'0px'},300);
		else
			$('#slidebox').stop(true).animate({'right':'-430px'},100);
	});

	$('#slidebox .close').bind('click',function(){
		$(this).parent().remove();
	});
});
</script>

And that’s it! I hope you liked the tutorial and can make some use of it!

Enjoy!