jSlide Related Pages – A jQuery Plugin

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