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. […]
endofpage

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

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!

Message from TestkingGet professional 640-863 training to learn jQuery plugins and other web applications to create successful websites. We offer self paced ccie security tutorial and ccie lab to make your learning process easy for you.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 33

Comments are closed.
  1. This is really useful – could be used for advertising too. Thanks for this tutorial.

    Keep up the good quality posts; this is a fresh and unique idea, much like the other things you’ve been posting recently using jQuery. Not only are they helpful, but also inspiring. ๐Ÿ™‚

  2. @simonjs Thanks a lot, we are glad that you find our posts inspiring! We are planning to post more ideas like these! Cheers, ML

  3. Cool idea, thanks for sharing.

    One key component missing from your example is that the NYT script adds a bottom padding to the body, which is then removed when the slide-out is manually closed.This allows the bottom of the page to be viewed in its entirety. In your demo on a screen width of 1024px there is text at the bottom of the page that can’t be read without manually closing the slide out.

  4. The one flaw I noticed with the demo is if I closed the slide out box, I can’t get it back and lose access to the related content.

    At first glance, it could have been an ad, so it would be nice if there was a way to bring it back if I closed it.

  5. @Josh Thanks a lot for that important observation. I updated the padding of the body, so that the box does not hide the content when the screen is too narrow. When the padding would obstruct the design of the page too much, then a dynamical padding addition in the script would be useful. Thanks again and cheers! ML

  6. @David
    We were actually wondering about that point and decided to really remove the box when the user choses to close it, just like it is done in the NYT script. But you can change that by replacing the line
    $(this).parent().remove();
    with

    $(this).parent().stop(true).animate({'right':'-430px'},100);

    That will simply slide it back to the right, but it will come back whenever you pass by the triggering element again. Hope it helps, ML

  7. Nice idea and effect. This script is very useful for displaying related articles. I like the idea because it make website “wider” by displaying related posts when needed.

  8. really cool, now- how do you block the moronic piece of crap? respectfully a concerned citizen.

  9. I noticed that feature on a NYT article I was reading a few minutes ago, and immediately saw the possibilities for this. So I did a search to see if there was any info on it, and here it all was – nicely laid out. Woot! I’m going to try this for various calls to action – reminding people to subscribe to RSS feed, asking for bookmarks or social sharing, etc. Thanks.

  10. Nice script,but it kind of destroys the lightbox feature as you can see on my web site. The link in the slide out box leads you to the ‘archive’ which still works fine as it doesn’t have include the scripts needed for the slide out box.

    Any suggestions? TIA, Andrew

  11. Thanks alot, Mary! (Gosh, I should have used Google before asking so silly questions .,.)

    Anyhow, I switched to the jquery lightbox version, that means no more conflicts with this slide out box of yours.

    Thanks for all your awesome examples. They rock!

  12. I love you Mary Lous <3 lol … I can use this thing for a lot of stuffs. Is there a donate button?