From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
The other day we were wondering how we could show our visitors more of our works. It’s normal that in a blog older posts get forgotten and even if something might still be very interesting and relevant, it get’s lost under the pile of new stuff. So we decided to create something like a little widget that can be used to show related posts in any page. The main idea is to show a fixed list at the right side of the screen with some thumbnails sticking out. When the user hovers over the items, they slide out, revealing the title and two links, one for the related article itself and one for the demo. Additionally, we will have a shuffle button under the list. When pressed, the list gets randomly refreshed with related posts.
Before we use this, we of course, want to share it with you 🙂
So, let’s get started!
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
The HTML structure is going to be a list with some nested elements inside: the main div with the thumbnail, the span for the title and the span with the two links:
<div id="rp_list" class="rp_list"> <ul> <li> <div> <img src="images/1.jpg" alt=""/> <span class="rp_title">Post Title</span> <span class="rp_links"> <a target="_blank" href="#">Article</a> <a target="_blank" href="#">Demo</a> </span> </div> </li> ... </ul> <span id="rp_shuffle" class="rp_shuffle"></span> </div>
All related posts are going to be listed in our structure. In the JavaScript we will define that we only show 5 posts at a time. Of course, you need to replace the # with your links.
The shuffle span will be positioned after the list.
Let’s take a look at the style.
The CSS
We will start by the general style attributes:
.rp_list { font-family:Verdana, Helvetica, sans-serif; position:fixed; right:-220px; top:40px; margin:0; padding:0; }
As you can see, the list will have a fixed position, always staying in the same place when the user scrolls the page. We are going to set the right to a negative value, hiding the whole list.
Next, let’s define the shuffle span style:
span.rp_shuffle{ background:#222 url(../images/shuffle.png) no-repeat 10px 50%; width:28px; height:14px; display:block; margin:10px 0px 0px 20px; cursor:pointer; padding:4px; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; }
The list is going to have the following style:
.rp_list ul{ margin:0; padding:0; list-style:none; }
The list items will not be shown initially:
.rp_list ul li{ width: 240px; margin-bottom:5px; display:none; }
Our main elements will have the following style:
.rp_list ul li div{ display: block; line-height:15px; width: 240px; height: 80px; background:#333; border:1px solid #000; -moz-border-radius:5px 0px 0px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-left-radius: 5px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; }
The thumbnail will be of the size 70×70 pixel and we will add a box shadow to it:
.rp_list ul li div img{ width:70px; border:none; float:left; margin:4px 10px 0px 4px; border:1px solid #111; -moz-box-shadow:1px 1px 3px #000; -webkit-box-shadow:1px 1px 3px #000; box-shadow:1px 1px 3px #000; }
The title span is going to have a inset shadow:
span.rp_title{ font-size:11px; color:#ddd; height:46px; margin:4px 0px 0px 20px; display:block; text-shadow:1px 1px 1px #000; padding-top:3px; background:#222; -moz-box-shadow:0px 0px 5px #000 inset; -webkit-box-shadow:0px 0px 5px #000 inset; box-shadow:0px 0px 5px #000 inset; }
The span for the links and the buttons will have the following style:
span.rp_links{ width:195px; height:8px; padding-top:2px; display:block; margin-left:42px; } span.rp_links a{ background: #222 url(../images/bgbutton.png) repeat-x; padding: 2px 18px; font-size:10px; color: #fff; text-decoration: none; line-height: 1; -moz-box-shadow: 0 1px 3px #000; -webkit-box-shadow: 0 1px 3px #000; box-shadow:0 1px 3px #000; text-shadow: 0 -1px 1px #222; cursor: pointer; outline:none; } span.rp_links a:hover{ background-color:#000; color:#fff; }
And that’s all the style. Let’s add some magic!
The JavaScript
The main idea is to first show 5 items with their whole width and to quickly slide them in until one can only see the thumbnail. That should happen when we load the page. It is a neat effect to show the user that there is something going on and that he can interact with this element.
When we hover over an item, we will make it slide out until its full width, revealing the title and the links.
The shuffle function will make 5 posts appear randomly. As you noticed, we added all our related posts to the HTML structure and from those items, we will randomly choose 5. This method does not guarantee us that the next set of items shown are not repeated, but it’s a simple solution.
We will add the following jQuery function:
$(function() { /** * the list of posts */ var $list = $('#rp_list ul'); /** * number of related posts */ var elems_cnt = $list.children().length; /** * show the first set of posts. * 200 is the initial left margin for the list elements */ load(200); function load(initial){ $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px'); var loaded = 0; //show 5 random posts from all the ones in the list. //Make sure not to repeat while(loaded < 5){ var r = Math.floor(Math.random()*elems_cnt); var $elem = $list.find('li:nth-child('+ (r+1) +')'); if($elem.is(':visible')) continue; else $elem.show(); ++loaded; } //animate them var d = 200; $list.find('li:visible div').each(function(){ $(this).stop().animate({ 'marginLeft':'-50px' },d += 100); }); } /** * hovering over the list elements makes them slide out */ $list.find('li:visible').live('mouseenter',function () { $(this).find('div').stop().animate({ 'marginLeft':'-220px' },200); }).live('mouseleave',function () { $(this).find('div').stop().animate({ 'marginLeft':'-50px' },200); }); /** * when clicking the shuffle button, * show 5 random posts */ $('#rp_shuffle').unbind('click') .bind('click',shuffle) .stop() .animate({'margin-left':'-18px'},700); function shuffle(){ $list.find('li:visible div').stop().animate({ 'marginLeft':'60px' },200,function(){ load(-60); }); } });
And that’s all!
We hope you enjoyed this tutorial and found it useful!
Mary lou !!!!
You kill me !!
Great great great !!!
\m/ MaryLou
It just keeps on getting better.
gracias por la información XD
Another great tutorial from Codrops – Thank you for this – just had to retweet it 🙂
Wonderful!
Awesome stuff. I have to check if I can implement it into WordPress.
Muy bueno. Como siempre.
Seguir asÃ. 🙂
Keep going, nice tut 😉
Awesome i never seen before.. this kind of jquery effects… i like very much.
thanks
fresh inovation…gaya¿?
great great¡!
Great tutorial Mary
Thank you:)
The only thing I would change is the span in the title to a h1 or something like that for better seo as well. Nice work!
Great tutorial
wow, it’s look awesome, maybe I will ebbed it into my next project 🙂
Nice tutorial, thanks for the share 🙂
Hi, ther’are problems with IE7? Is there a fix in program? Thanks
Hi, can I have help?
Thx
http://www.handbagsonsales.com
Chanel Handbags
Gucci Handbags Gucci 2010 New Handbag
Hermes Handbags
Balenciaga Handbags
Bottega Veneta Handbags
Chloe Handbags
Coach Handbags
Dior Handbags
Fendi Handbags
Dolce & Gabbana Handbags
Hermes Handbags
Versace Handbags
Prada Handbags
tremendous work bro…
erm, i wanna implement this to my wordpress.org…..but i dont know where to copy those codes especially the javascript…please help…
Thankx in advance…
opsss…sorry i called bro….taught it was a guyz…sorry…im new here…hehe=p
fantastic and the tutorial spot on , i have implemented this on blog and its just stunning.
@ANURADHA It looks really great on your blog! We are glad that you like it 🙂 Cheers, ML
Awesome tutorial!! Why don’t you make it a wordpress plugin?
i want to implement tis in my wordpress.org but i dont know how…
Any guide pls???
i want to implement this in my wordpress website too
Any help pls???
Thank You Mary , if any one interested how to add this great widget to your blogger/blog i have summarised a small tut how i did it , hope it helps
Thank you, that’s really nice! Cheers, ML
hey, very nice work!
I would like to change the side of the list , make it appear on the left and slide to the right … how to change it ?
thank you 😀
Mary Lou..
All of your JQuery makes me want to marry you for real :p
this is what i need, i’ll try it 1st,then i’ll ask if there’s any problem or modifications that i need
Hatur nuhun (thank you very much)
Script has problem when loaded element number is dynamic. For example when you have 3 related posts script hangs and stops working. How to fix? Thanx
Easy to solve, simply change the condition:
while(loaded < 5){
to this another
while(loaded loaded){
We use this to solve retrieving data from SQL, only fix limit to see.
Just chage this:
if($elem.is(‘:visible’))
continue;
else
$elem.show();
for this :
if(!$elem.is(‘:visible’))
$elem.show();
🙂
Hi, I’ve implemented this to work with my wordpress site, the idea is to use it to feature specific posts i.e. upcoming events.
Two questions..
1.Can i change the shuffle to just show the next list of items?
2. Can i place a button at the top to hide all, I have a flash application on some pages and the navigation is unclickable.
I’d like to implement this on the left side of a webpage. Is this possible?
This is what we really want, thanks for posting, related post are must to decrease bounce rate.
Simply Awesome….
Working like a charm…
Thanks for share…
Hey, I was hoping I could get my hands on the instructions t load this to a blogger site, any help?
Great Thanks ! Good Tuts… 🙂
nice tut, is there any way to have it not fixed? I tried position absolute and related and it breaks the design, how can we make it not to be fixed while scrolling?
Alright, Mary thanks for this nice widget, I updated it(it took me all day) to work with ajax, anyone wanna see it in action, go to :
http://www.wallpapersmania.com/125_nature_wallpapers.html
and see on the right 🙂
p.s. I managed to position it, you have to put it inside a div with position relative.
$(‘#rp_shuffle’).unbind(‘click’)
.bind(‘click’,shuffle)
.stop()
.animate({‘margin-left’:’-18px’},700);
can someone explaing what the last part does? which is:
.animate({‘margin-left’:’-18px’},700)
if we remove it – nothing changes.
This only seems to work in Internet Explorer. I’ve tested with Firefox, Chrome and Safari and only the first flyout works… nothing below that.
Any ideas?
derrick, it works everywhere except Internet Explorer 7 and lower.
how to add this feauture in WordPress?
Great please,
great tutorial buddy
Great