jump to navigation

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

Posted by Tournas Dimitrios in JQuery.
trackback

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[
src</span>="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
// ]]></script>
<script type="text/javascript">
$(function() {
$(window).scroll(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){
	$('#slidebox').animate({'right':'0px'},300);
}else {
	$('#slidebox').stop(true).animate({'right':'-430px'},100);
	}
});

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

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 .

 

Advertisements

Comments»

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s