End of content sliding box for recommended articles with jQuery and CSS

You must have seen a sliding box with recommended or related articles that fly out when you reach at the end of the post in a blog with WordPress. There are many plugins like nrelate flyout or SimpleReach Slide available for WordPress which can easily do this task for you. The main reason behind this slide out box is to provide extra information or link to the visitor. For many websites, it improves the visitor engagement, increases page-views and reduces the bounce percentage. The fly out card appears only when you reach towards the bottom of the page and slides in when you scroll up. This naturally attracts the visitor and is not obtrusive.

What if you are not using WordPress and want this feature in your simple html website? In this tutorial, I will explain about creating a similar sliding popup box with CSS & jQuery. Here, we will be using the awesome jQuery Waypoints library.

Before we begin, I am sure you want to have a look what we are going to create.

Flyout card on scrolling at content end Demo

I have kept the demo page simple for ease of understanding. As you approach the bottom of the page, a flyout card appears with additional information and link. Scroll up again and it will slide back. If you wish you can directly download the source files from the demo page (Go to file – save  as – webpage complete). Though implementing this functionality on your website is super easy with jQuery Waypoints and I strongly recommend you go through the step by step tutorial below.

HTML Markup

Let’s start with the HTML markup first. The <body> of the HTML has two major divisions.

<body>
<div id="contents">
-----
</div>
<div class='hiding' id='article-finished'>
------
</div>
</body>

The division with “contents” id is meant for keeping the normal contents of the web page. The division with “article-finished” id is for the flyout card. Here, we will keep the contents which we want to show in this card like additional information, related posts or ads.

sliding-popup

As I mentioned in the beginning, we will be using jQuery and jQuery Waypoints to create this functionality. So, let’s include these two libraries in the <head> section of our html document.

<script src="jquery.min.js"></script>
<script src="waypoints.js"></script>

Instead of keeping the jQuery.min JavaScript file on your server, you can link directly to googleapis library. Linking to Google library ensure that you get the latest version of the file and at the same time the download will be faster. For doing this, you can use the following script.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

The last thing we want to do is to make the sliding in and out functional. We will include the following jQuery code in the <head> section.

    <script type="text/javascript">
        $(document).ready(function () {
            $('#contents').waypoint(function (direction) {
                $('#article-finished').toggleClass('hiding', direction === "up");
            }, {
                offset: function () {
                    return $.waypoints('viewportHeight') - $(this).height() + 200;
                }
            });
        });
    </script>

If you have used jQuery earlier, you know that we start with $(document).ready function to make sure the document is loaded fully before the JavaScript function takes over. Inside this function, we are attaching the waypoint function with “content” id (that is main contents of the page). We are targeting the “article-finished” id here (the flyout card) and toggling it with “hiding” class. In the next section, we are defining at what height (offset with viewport height) the flyout card should slide out. If you want this card to appear early, increase the value which is currently set at 200px.

Coming to CSS, we have the following codes relevant to the slide out box function.

#article-finished
{
padding: 10px;
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
font-size: 13px;
position: fixed;
bottom: 0px;
right: 0px;
width: 400px;
-webkit-transition: right 1s ease-in-out;
-moz-transition: right 1s ease-in-out;
-o-transition: right 1s ease-in-out;
-ms-transition: right 1s ease-in-out;
transition: right 1s ease-in-out;
}

#article-finished.hiding
{
right: -450px;
}

Here, we are defining the style of the flyout card. We are defining the position as fixed with zero bottom and zero right properties. This is to keep the card just at the bottom right corner of the viewport. Important here is the CSS3 transition property where we are defining a transition delay of 1 second to make smooth entry and exit.

In the hiding class which will toggle with the scrolling up and down, we are just setting the ‘right’ property to -450px. This slides in the flyout card to the right.

That’s all my friends! Isn’t it simple and straightforward? I am sure you can easily include this functionality in your website now. So why not give it a try to show ad, relevant and related links or showing social sharing buttons? And if you wish, you can provide the dynamic contents here by appending the “article-finished” division with body in jQuery like this.

$('body').append($("<div class='popup hiding' id='article-finished'>your dynamic content here.</div>"));

You can simply put this code inside the $(document).ready function.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>