From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
The other day I was reading an article in the NYTimes and I really liked the box that slides out from the right when you are reading the last part of the article. It shows another article from the same category and I thought that it might be something interesting for any blog or website.
The idea is to have an element in the page (here it is in the last paragraph) that triggers the box to appear. You could, for example, use this to show a related article or to explain a certain term you are using in your post.
Ok, let’s start!
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
The Markup
First, we need a paragraph somewhere in the page with the id “last”:
<p id="last"> Some paragraph text </p>
Then, we need the following html for the box:
<div id="slidebox"> <a class="close"></a> <p>More in Technology & Science (4 of 23 articles)</p> <h2>The Social Impact of Scientific Research and new Technologies</h2> <a class="more">Read More ยป</a> </div>
The link element with the class “close” will give the user the option to close the box and it will not appear again.
The CSS
Ok, let’s give some style to the box in a NYTimes manner:
#slidebox{ width:400px; height:100px; padding:10px; background-color:#fff; border-top:3px solid #E28409; position:fixed; bottom:0px; right:-430px; -moz-box-shadow:-2px 0px 5px #aaa; -webkit-box-shadow:-2px 0px 5px #aaa; box-shadow:-2px 0px 5px #aaa; }
We give the box a fixed position, so that it follows the user while he is scrolling. The initial right value will make the box be hidden; we will make it slide out with some jQuery.
The box will have a nice CSS3 box shadow, and no, that will not work in IE browsers (except IE9, probably).
Check out this entry on CSS3.info if you want to see how to create a shadow: Box-shadow, one of CSS3โs best new features
The text elements and the more link will have the following style:
#slidebox p, a.more{ font-size:11px; text-transform:uppercase; font-family: Arial,Helvetica,sans-serif; letter-spacing:1px; color:#555; } a.more{ cursor:pointer; color:#E28409; } a.more:hover{ text-decoration:underline; } #slidebox h2{ color:#E28409; font-size:18px; margin:10px 20px 10px 0px; }
You might want to adapt the style of these elements to fit with you website. The style of the little closing cross looks as follows:
a.close{ background:transparent url(../images/close.gif) no-repeat top left; width:13px; height:13px; position:absolute; cursor:pointer; top:10px; right:10px; } a.close:hover{ background-position:0px -13px; }
Now, let’s add some JavaScript for the effect.
The JavaScript
First, we include the jQuery library before the body end tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Then we will add two functions. One is to determine if we reached the trigger element while scrolling and to make the box slide out if so. The other function makes the box disappear when clicking on the little closing cross. Add this after the inclusion of the jQuery library and before the body end tag:
<script type="text/javascript"> $(function() { $(window).scroll(function(){ var distanceTop = $('#last').offset().top - $(window).height(); if ($(window).scrollTop() > distanceTop) $('#slidebox').animate({'right':'0px'},300); else $('#slidebox').stop(true).animate({'right':'-430px'},100); }); $('#slidebox .close').bind('click',function(){ $(this).parent().remove(); }); }); </script>
And that’s it! I hope you liked the tutorial and can make some use of it!
Enjoy!
nice feature. can use that box for a lot of purposes.
This is really useful – could be used for advertising too. Thanks for this tutorial.
Keep up the good quality posts; this is a fresh and unique idea, much like the other things you’ve been posting recently using jQuery. Not only are they helpful, but also inspiring. ๐
@simonjs Thanks a lot, we are glad that you find our posts inspiring! We are planning to post more ideas like these! Cheers, ML
Cool idea, thanks for sharing.
One key component missing from your example is that the NYT script adds a bottom padding to the body, which is then removed when the slide-out is manually closed.This allows the bottom of the page to be viewed in its entirety. In your demo on a screen width of 1024px there is text at the bottom of the page that can’t be read without manually closing the slide out.
The one flaw I noticed with the demo is if I closed the slide out box, I can’t get it back and lose access to the related content.
At first glance, it could have been an ad, so it would be nice if there was a way to bring it back if I closed it.
@Josh Thanks a lot for that important observation. I updated the padding of the body, so that the box does not hide the content when the screen is too narrow. When the padding would obstruct the design of the page too much, then a dynamical padding addition in the script would be useful. Thanks again and cheers! ML
@David
We were actually wondering about that point and decided to really remove the box when the user choses to close it, just like it is done in the NYT script. But you can change that by replacing the line
$(this).parent().remove();
with
$(this).parent().stop(true).animate({'right':'-430px'},100);
That will simply slide it back to the right, but it will come back whenever you pass by the triggering element again. Hope it helps, ML
Nice idea and effect. This script is very useful for displaying related articles. I like the idea because it make website “wider” by displaying related posts when needed.
its a cool…
thanks for this trick ^_^
i have add my blog…hihihi ;)) ๐
Such a cool plugin. Thanks for sharing.
really cool, now- how do you block the moronic piece of crap? respectfully a concerned citizen.
I noticed that feature on a NYT article I was reading a few minutes ago, and immediately saw the possibilities for this. So I did a search to see if there was any info on it, and here it all was – nicely laid out. Woot! I’m going to try this for various calls to action – reminding people to subscribe to RSS feed, asking for bookmarks or social sharing, etc. Thanks.
Nice script,but it kind of destroys the lightbox feature as you can see on my web site. The link in the slide out box leads you to the ‘archive’ which still works fine as it doesn’t have include the scripts needed for the slide out box.
Any suggestions? TIA, Andrew
@Andrew There is an error in the script, probably caused by some incompatibility between jQuery and Prototype. You should give this script a try, maybe it solves the problem:
http://api.jquery.com/jQuery.noConflict/
I took this and ran with it, adding CSS animation support and google analytics tracking: http://rhnh.net/2010/07/02/ultimate-nytimes-jquery-slidebox
@Xavier Superb!
Thanks alot, Mary! (Gosh, I should have used Google before asking so silly questions .,.)
Anyhow, I switched to the jquery lightbox version, that means no more conflicts with this slide out box of yours.
Thanks for all your awesome examples. They rock!
I love you Mary Lous <3 lol … I can use this thing for a lot of stuffs. Is there a donate button?
Great, i added to my personal list in
http://www.ajaxshake.com
thanks mary lou
Very handy effect! I do notice its a little buggy in Opera though (testing version 10.62 on windows). Not sure if this is a bug in Opera itself…
Thank you very much for this simple but awesome stuff! i’ll use Slideout box in my next wp theme.
Thanks for the great tutorial. I am trying to implement this on one of my sites, but am having a problem with some image icons on the page appearing ‘through’ the box.
Here’s the example page:
http://www.femaleforum.com/s/article/your_home_maintenance_seasonal_checklists/
As you can see, the footer appears through the box, as does the discussion bar and share icons.
Any idea on how this can be fixed?
Thanks in advance for any help you may be able to offer.
Hello Martin, you can give a very high z-index to the #slidebox in the the CSS. simply add this property “z-index: 999;” to the #slidebox and it should always be on top of the other elements (unless there might be some other elements with a higher z-index). If you notice that there are still elements on top of the box, simply increase the z-index. Hope it helps, cheers, ML
That got it! Thank you so much for your help and prompt response.
Excellent. I went right from the Times to Google to here. Talk about making life easy.
This is a very nice script. Unobtrusive and could be used for a number of things. As soon as I saw on the Times page, I had to have it. ๐
This is a great tool and very well written up. Thanks!
I am working on adding this to my site. What other trigger events could you add other than scrolling to the end of the page. Could you put it on a time delay?
Jeff Hamons
Synergistic Acres – Kansas City Natural Farm
Hey – love this and it works great. I’m working on trying to customize it a good amount.
I wanna make the transition vertical, from the top, to kind of drop down on the scroll as a menu. I’ve already had some progress, but am trying to figure out the transition. Would this be hard, any suggestions?
Cheers & thanks!
Rad! Nevermind – I figured out how to get the basic functionality of what I was trying to do; I just went into the inline JavaScript Snippet and and swapped out ‘right’ for ‘top’. Cool, I’m hoping I just have to dig deeper into the CSS to get my positioning accurate.
Great resource!
Ahh – I came across a Q. –
I’m using the feature twice, one at the top of the page, and one at the bottom.
Some times the features go behind the content, any suggestions on keeping the feature completely on top?
Thank you very much! I have been looking for this kind of tutorial for ages and now only you one helped me! :))))) You are great! ๐
Hye there, nice tutorial Mary Lou! I’ve been looking for this trick and found your page here. Anyway, one question.
Instead of using id=”last” to call the slide to appear, is it possible to use the % of total page height?
What I mean here is after reader scroll after, let say 60% from the page height, the slide come out.
Practically, when the comments so many, the page height is long. So, by implementing %, I think it is more practical. Thanks. xD
Thanks for this easy to use tutorial! It will be a better idea if the box disappears if the user scrolls upwards. I am using a different plugin on my website amlabc.com, but testing your solution on test.amlabc.com and want to replicate the behaviour which is depicted in the other plugin. Thanks again!