Bottom page jQuery slide box

11 Comments

Curious how to create such awesome slide box as on mashable.com?

In this tutorial I will explain to you how to create such awesome slide-box, to improve the page views on your website. The slide box will trigger people to read another article, recommended by you!

Read the article below to create the slide box by yourself. Or watch how it works, by pushing the demo button in the sidebar on the right side of this website. You can also download the source, by pushing the download button on the right side.

Update: Marcin Pietrzak from iworks.pl made a plugin which makes it a lot easier to add this box to your WordPress website. You can download it here. Except if you are more interested in giving the box your own style and customizing it yourself, read further

[tutbuttons]

So earlier this week I was searching for a solution to get such a lovely slide box as mashable.com shows on their website, on every article page. It slides in from the right when you read the last part of the article. You can see the slide box if you open an article page on mashable.com and scroll to the comment part of the page. Then the slide box will slide-in at the bottom right position of the page.

After a lot of searching and “googling” I came on this website, where Mary Lou shows how it’s possible to make such awesome slide box. So, thanks Mary Lou!

First we need to decide from which part of the page we want the slide box to slide-in. At the end of the article? At the end of the comment-list? If you want to show the box when the visitor is at the end of the article, you can give the last paragraph (<p>) an id like “last”. See the code below:

Page where you want to show the slidebox (I use single.php in WordPress)

<p id="last">
    Some paragraph text
</p>

But when you use WordPress it’s kind annoying to give every last paragraph an id. And you need the id, to tell jQuery after which paragraph the slide box has to show up. So what I did, was identifying the last paragraph by putting p:last-child in the jQuery code. And that works fine with the latest browsers, which is most important, don’t you think? If you don’t know what I mean, just read further. It will be obvious after I showed the jQuery code.

The next thing we have to do is creating the html code of the slide box. So how the slide box has to look like and which information it has to contain. See the code below for an example.

Page where you want to show the slidebox (I use single.php in WordPress)

<div id="slidebox">
    <span>Read next</span>
    <a href="#" class="close">close</a>
    <div class="clear"></div>
</div>

So, now we’ve created the html for the slide box and we “marked” a point from which height the slide box has to appear (from the p with id “last”). The next thing we have to do is announcing the JavaScript files. For the slide box we’re using jQuery of course, so we have to include the jQuery library. Also we include the effects.js, which we gonna create later. You can place the code below between the head tags in your index file. Or if you are using WordPress, you can place the code in the header.php file. If you are using WordPress, there’s a great chance you don’t have to include the jQuery library, because it’s already included. So first try without the library and if it doesn’t work, then you can include the jQuery library.

index.php (or header.php in WordPress)

<script type="text/javascript" src="/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="effects.js"></script>

The last thing you have to do, to get the slide box working, is creating the jQuery code.  As you can see in the code below, the code just checks or you already are at the paragraph with id “last”. If so, it slides in the slide box. You can copy and paste the code below in the effects.js file.

effects.js

$(document).ready(function () {
    $(function() {
        $(window).scroll(function(){
            var distanceTop = $('p#last').offset().top - $(window).height();
            var right = $('#slidebox').offset().left - $(window).width();

            if($(window).scrollTop() > distanceTop){
                if(right > 0)
                    $('#slidebox').stop(true).animate({'right':'0px'},300);
            }else{
                $('#slidebox').stop(true).animate({'right':'-430px'},100);
            }
        });
        $('#slidebox .close').bind('click',function(){
            $('#slidebox').stop(true).animate({'right':'-430px'},100, function(){
                $('#slidebox').remove();
            });
            return false;
        });
    });
});

And last but not least, you can add some styles to the slidebox. See the stylesheet below.

stylesheet (style.css in WordPress)

#slidebox{
    width:350px;
    height:125px;
    padding:10px;
    background-color:#ffffff;
    position:fixed;
    bottom:0px;
    right:-380px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow: 0 4px 10px #555555;
}
#slidebox span{
    font-size: 0.9em;
    padding-bottom: 5px;
    text-transform: uppercase;
}
#slidebox h2{
    font-size: 1.0em;
}
#slidebox .next-article{
    margin-top: 5px;
}
#slidebox .next-article a{
    display: inline-block;
}
#slidebox .close{
    background: url(close-card.png) no-repeat;
    display: block;
    height: 15px;
    margin: 3px;
    float: right;
    width: 16px;
    text-indent: -99999px;
}
#slidebox .close:hover{
    background:transparent url(close-card.png) -16px 0px no-repeat;
}
#slidebox strong{
    display: inline-block;
    color: #000000;
    font-family:"Verdana";
    font-size:1.2em;
    margin-left: 10px;
    vertical-align: top;
    max-width: 240px;
}

So, now everything should be working fine. I hope everything is clear now and it helps you to create a nice slide box. I’m sorry for my bad English but I try the best I can to share my jQuery experience with you all.

If you have any questions, just post a comment below and I’ll try to respond as soon as possible.

About only media