Bottom page jQuery slide box

12 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 Erik

Erik is a graduate IT manager who spent years involved with the web programming both front-end and back-end, as a hobby. Since 2008 he knew he didn't want to start a job in the IT business, but more in the web business. So since the end of summer 2010 he studies digital communications at a university in Utrecht, which is called "Hogeschool Utrecht". Since the summer of 2011 he started his own company, where he works part-time after school. The company is called "Only Media" and is specialized in creating websites with Wordpress, front-end programming (also html5, css3 and jQuery) and back-end programming like PHP in combination with or without SQL. View all posts by Erik →

Subscribe to our mailing list

* indicates required

12 Responses to “Bottom page jQuery slide box”

    Lindsey says: September 4, 2013 at 5:04 pm

    Hello,

    I am interest in how a user can block these slide boxes from appearing. What can I do to keep these slide boxes from popping up when I don’t want them to pop up?

    Thanks.

    Reply
    Saikrishna says: March 1, 2013 at 6:36 am

    Hi Erik,
    sorry to say this..there is a problem with firefox 19.1 .It’s shivering there.

    Reply
    Ezchile says: March 21, 2013 at 3:56 pm

    Hi Erik, I too have this problem.
    It happens in Firefox 19 on a Windows7 machine, though it’s ok in Chrome25, IE9 and even iPhone and iPad.

    It’s a very strange thing. I’ve found something that another person suffering with it has posted, which shows the issue in a video here: http://d.pr/v/zhgz

    I cannot work out what the problem is, and the original tympanus post’s comments have been closed for a long time, so any help you could give would be very welcome indeed.

    Many thanks for any help you might be able to give.

    Reply
    frekklz says: November 14, 2011 at 6:18 am

    Hi Erik! Great post. Exactly what I was looking for!

    But…

    Not for wordpress but Business Catalyst instead. We want to add the slide in box on all products to “get a free quote”.

    I know Business Catalyst and jquery go hand in hand but wondering about the difference in code when it comes to adding it to product pages and site wide templates.

    thanks!

    Reply

Leave a Reply