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

View demoDownload source

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!

View demoDownload source

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.
Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 33

Comments are closed.
  1. 1

    Very handy effect! I do notice its a little buggy in Opera though (testing version 10.62 on windows). Not sure if this is a bug in Opera itself…

  2. 2

    Thank you very much for this simple but awesome stuff! i’ll use Slideout box in my next wp theme.

  3. 3

    Thanks for the great tutorial. I am trying to implement this on one of my sites, but am having a problem with some image icons on the page appearing ‘through’ the box.

    Here’s the example page:

    http://www.femaleforum.com/s/article/your_home_maintenance_seasonal_checklists/

    As you can see, the footer appears through the box, as does the discussion bar and share icons.

    Any idea on how this can be fixed?

    Thanks in advance for any help you may be able to offer.

    • 4

      Hello Martin, you can give a very high z-index to the #slidebox in the the CSS. simply add this property “z-index: 999;” to the #slidebox and it should always be on top of the other elements (unless there might be some other elements with a higher z-index). If you notice that there are still elements on top of the box, simply increase the z-index. Hope it helps, cheers, ML

  4. 6

    Excellent. I went right from the Times to Google to here. Talk about making life easy.

    This is a very nice script. Unobtrusive and could be used for a number of things. As soon as I saw on the Times page, I had to have it. ;)

  5. 8

    Hey – love this and it works great. I’m working on trying to customize it a good amount.

    I wanna make the transition vertical, from the top, to kind of drop down on the scroll as a menu. I’ve already had some progress, but am trying to figure out the transition. Would this be hard, any suggestions?

    Cheers & thanks!

  6. 9

    Rad! Nevermind – I figured out how to get the basic functionality of what I was trying to do; I just went into the inline JavaScript Snippet and and swapped out ‘right’ for ‘top’. Cool, I’m hoping I just have to dig deeper into the CSS to get my positioning accurate.

    Great resource!

  7. 10

    Ahh – I came across a Q. –

    I’m using the feature twice, one at the top of the page, and one at the bottom.

    Some times the features go behind the content, any suggestions on keeping the feature completely on top?

  8. 11

    Thank you very much! I have been looking for this kind of tutorial for ages and now only you one helped me! :))))) You are great! :)

  9. 12

    Hye there, nice tutorial Mary Lou! I’ve been looking for this trick and found your page here. Anyway, one question.

    Instead of using id=”last” to call the slide to appear, is it possible to use the % of total page height?

    What I mean here is after reader scroll after, let say 60% from the page height, the slide come out.

    Practically, when the comments so many, the page height is long. So, by implementing %, I think it is more practical. Thanks. xD

  10. 13

    Thanks for this easy to use tutorial! It will be a better idea if the box disappears if the user scrolls upwards. I am using a different plugin on my website amlabc.com, but testing your solution on test.amlabc.com and want to replicate the behaviour which is depicted in the other plugin. Thanks again!

Comments are closed.