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

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!).

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.


Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.