JavaScript
Article

jSlide Related Pages – A jQuery Plugin

By Sam Deering

jslide-related-posts
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

Usage

Or you can specify options:

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
(function($){

//Attach this new method to jQuery
$.fn.extend({

//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});
animatesliderdiv.addClass(‘fixie’);

} 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;

$(window).scroll(function(){

//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)) {

showjsrp_related();

}

}else {

//reaching top of page trigger
if ($(window).scrollTop() < (webpage_height-trigger_height)) { hidejsrp_related(); } } } }); function ishorizonalscrollpresent() { if (document.documentElement.scrollWidth === document.documentElement.clientWidth) { //There is no hoz scrollbar return false; } else { return false; } } function showjsrp_related() { is_animating = true; animatesliderdiv.show(); //show the window // if hoz scroll is not present, hide x scroll if (ishorizonalscrollpresent() == false) { $('body').addClass('hidexscroll'); } animatesliderdiv.animate({ right: '+='+jslide_width, opacity: 1 }, o.speed, function() { // Animation complete. is_animating = false; is_visible = true; }); } function hidejsrp_related() { $('body').addClass('hidexscroll'); // hide x scroll is_animating = true; animatesliderdiv.animate({ right: '-='+jslide_width, opacity: 0 }, o.speed, function() { // Animation complete. animatesliderdiv.hide(); is_animating = false; is_visible = false; }); } $("#jsrp_related-close").click(function(){ hidejsrp_related(); }); }); } }); })(jQuery); [/js]

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*/
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	border-top-left-radius:10px;
}
#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!).

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.