jSlide Related Pages – A jQuery Plugin

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

<script type="text/javascript">
  $().ready(function() {
       $('#jsrp_related').jsliderelatedposts();
</script>

Or you can specify options:

<script type="text/javascript">
  $().ready(function() {
	 $('#jsrp_related').jsliderelatedposts({
		 speed: 1000,
		 scrolltrigger: 0.75,
		 smartwidth: true
	 });
   });
</script>

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

<div id="jsrp_related">
		<!-- use custom close button if you wish -->
		<a id="jsrp_related-close" href="#"><img id="close_btn" src="close_button.gif" alt="Close" /></a>
<h3>Related Posts:</h3>
<ul>
	<li><a rel="bookmark" href="urltowebpage"><img class="jsrp_thumb" title="imagetitle" src="urltowebpageimage" border="0" alt="imagealt" width="50" height="50" /></a> <a class="jsrp_title" rel="bookmark" href="webpageurl">Web Page Title</a></li>
		<!-- page link 2 -->
		<!-- page link 3 etc -->
		<!-- add more pages in list format -->
</ul>
</div>

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

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.