Slide box

by kompiajaib

HTML

<div class="large-div"></div>
<div class="slidebox">
  <div class="header-slidebox">Recommended For You</div>
<ul id='random-posts'>
<script type="text/javascript">
var rdp_numposts=1;
var rdp_snippet_length=100;
var rdp_info='no';
var rdp_comment='Comment';
var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"http://www.kompiajaib.com/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type="text/javascript">
    function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var...

CSS

.large-div{
    width:300px;
    height:10000px;
}


.slidebox {
    position:fixed;
    bottom:100px;
    right:-300px;
    width:290px;
    height:150px;
    font-size:30px;
    color:white;
    background:#333;
    transition:all .4s ease-in-out;
    padding-right:10px;
    border-radius:3px 0 0 3px;
}
.header-slidebox{
    position:absolute;
    top:0;
    left:0;
    text-align:left;
    font-family:Arial;
    font-size:18px;
    font-weight:400; 
    background:#505050;
    border-bottom:1px solid #282828;
    padding:0 10px;
    height:30px;
    width:100%;
    line-height:30px;
    border-radius:3px 0 0;
}
.closeslidebox{
    color:#333;
    position:absolute;
    top:0px;
    right:0px;
    font-family:Arial;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    background:#ddd;
    text-align:center;
    width:30px;
    height:30px;
    line-height:30px;
    border-bottom:1px solid #282828;
    transition:all .3s ease-in-out;
}
.closeslidebox:hover{
    background:#cacaca;
}
#random-posts img{
    float:left;
    margin:0 10px 10px 0;
    background:#FFF;
    width:130px;
    height:100px;
    padding:0;
    transition:all .3s ease-in-out;
    border-radius:3px;
}
#random-posts img:hover{
    opacity:.7;
}
ul#random-posts{
    list-style:none;
    margin-top:40px;
    margin-left:-30px;
    font-family:Arial;
    font-size:16px;
    line-height:1.2em;
}
ul#random-posts li a{
    color:#eee;
    text-decoration:none;
}
.readmorerandom a{
    position:absolute;
    bottom:0;
    right:0;
    font-family:Arial;
    font-size:14px;
    font-weight:400;
    background:#505050;
    text-align:center;
    display:block;
    padding:2px 8px;
    transition:all .3s ease-in-out;
    color:#eee!important;
    border-radius:3px 0 0
}
.readmorerandom:hover a{
    color:#333!important;
    background:#cacaca;
}

JavaScript

$(window).scroll(function(){
    if ($(this).scrollTop() > 400) {
       $('.slidebox').stop().animate({ right: '0px' });
    }
});
$(function() {  
    $('.closeslidebox').click(function () { 
    $('.slidebox').css({right:'-300px'}); 
    $('.slidebox').fadeOut(); 
});
     });