jump to navigation

Slide Out Box @ End of Page With jQuery December 28, 2011

Posted by Tournas Dimitrios in JQuery.

I really like the box that slides out from the right when scrolling to the last part of an article  . It can  show the summary of another article from the same category or it might be something interesting for any blog or website . It could even  display dynamically generated content , for example , your latest tweets .The idea is to have an element in the page ( here it is in the last paragraph) that triggers the box to appear.

css" type="text/css" media="screen"/>
<script type="text/javascript">// <![CDATA[
// ]]></script>
<script type="text/javascript">
$(function() {
when reaching the element with id "last" we want to show the slidebox.
Let's get the distance from the top to the element
var distanceTop = $('#last').offset().top - $(window).height();
if  ($(window).scrollTop() > distanceTop){
}else {

 remove the slidebox when clicking the cross
$('#slidebox .close').bind('click',function(){

The concept is simple :

  • First , we include the jQuery library .
  • We assign to the last paragraph of our article an id=”last” name  (the name is randomly chosen)  . 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 .
  • Assign to the slide-out-box content an id=”slidebox” name (the name is randomly chosen)
  • Don’t forget to “move” the box out of the visual area of the website , apply a CSS rule like :
    #slidebox{width:400px ; height:100px ;right:-530px ; padding:10px ; background-color:#fff }
  • See a live demo of this article .




No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s