By Sam Deering

jSlide Related Pages – A jQuery Plugin

By Sam Deering
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

Hi guys, I have written a jQuery Plugin to show related web pages. When the website user scrolls down the page the related webpages slide out from the bottom right of the screen. When they scroll back up the page it dissapears! ;) Awesome.

Official jQuery Plugin Page

Plugin Name: jsliderelatedpages
Author: jQuery4u
Contributors: Sam Deering
Version: 1.0
Release Date: 10/03/2011
Tags:jSlide related, related pages, similar pages, related plugin
Description: Shows related web pages in a slick slider animation.

Download Package
Live Demo


Or you can specify options:


  • Speed – [1-5] – Choose Animation Speed (default: 1 second) 5 seconds is pretty slow slide!
  • Scroll Trigger – [55-100%] – Choose % of page scrolled before it appears (default: 75%) 1.0 (makes it stick to bottom until close button is clicked).
  • Width – [true/false] – Use Smart Width or Full Width (fits to screen width)

The jQuery Code

//Anonymous function to wrap around your function to avoid conflict

//Attach this new method to jQuery

//The function – pass the options variable to the function
jsliderelatedposts: function(options) {

//Set the default values, use comma to separate the settings
var defaults = {
speed: 1000,
scrolltrigger: 0.75,
smartwidth: true

var options = $.extend(defaults, options);

return this.each(function() {

var o = options;
var animatesliderdiv = $(this);
var jslide_width = animatesliderdiv.width();

//IE fixes (div width issues)
if ( $.browser.msie ) {

if (o.smartwidth) {
//smart width
jslide_width = jslide_width * 0.58; //0.53 //0.422
else {
//full width
jslide_width = $(window).width();

animatesliderdiv.css({position: “absolute”, width: jslide_width, right: “-“+jslide_width});

} else {

if (!o.smartwidth) {

//full width for browsers other than IE
jslide_width = $(window).width();


animatesliderdiv.css({position: “fixed”, width: jslide_width, right: “-“+jslide_width});


var webpage = $(“body”);
var webpage_height = webpage.height();
//show the window after % of the web page is scrolled.
var trigger_height = webpage_height * o.scrolltrigger;

//function to catch the user scroll
var is_animating = false;
var is_visible = false;


//dont stop the animation in action
if (!is_animating) {

if (!is_visible) {

//reaching the bottom of page trigger
if ($(window).scrollTop() > (webpage_height-trigger_height)) {



}else {

//reaching top of page trigger
if ($(window).scrollTop() The HTML Code

The CSS Code

#jsrp_related {
	display:none; /*position:fixed;*/
	background-color:#A7BFF2; border:2px solid #779CED;
	bottom:0; right:0; /* left:0; */
	z-index: 10000;
	/*width:auto; set width of bar to width of entire window*/
#jsrp_related h3 { margin:0; padding:5px 5px 5px 10px; font-size:20px; font-weight:bold;
		color:#F5F4F0; text-shadow: #6374AB 2px 2px 2px;
#jsrp_related ul { margin:0; padding:0; }
#jsrp_related ul li { float:left; padding:10px; background-color:white; list-style:none; vertical-align:middle; min-height:50px; border:thin solid #E6E6E6; }
#jsrp_related ul li:hover { background-color:#E6E6E6; }
#jsrp_related ul li a img { vertical-align:middle; }
#jsrp_related-close { float:right; }
#close_btn { border:0; text-decoration:none; }
.hidexscroll { overflow-x:hidden; }
.showxscroll { overflow-y:auto; }

/*IE FIX*/
.fixie {
  left: expression( ( - jsrp_related.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
  top: expression( ( - jsrp_related.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

Technical Stuff

IE7 or less doesn’t like the CSS property – position:fixed so i’ve coded it to use the position:absolute instead.
This means some older versions of IE won’t show the slick animation (it still works as normal and shows the posts though!).

Login or Create Account to Comment
Login Create Account
Get the most important and interesting stories in tech. Straight to your inbox, daily.Is it good?