Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 <div class="row">
            
             <div class="col-md-3 well">
        
                <ul class="nav nav-pills nav-stacked example" id="myTab" style="height: 200px; overflow: auto">
                    <li id="cZero" class="active">
                        <a href="#tab_publish" data-toggle="pill">Publish</a>
                    </li>
                    <li id="cOne" >
                        <a href="#tab_draft" data-toggle="pill">Drafts</a>
                    </li>
                </ul>
            </div>
             <div class="col-md-9">
                <div class="tab-content">
                   <div class="tab-pane bonecard-listPublish active" id="tab_publish">
                       
                    </div>    
                  
                   
                    
                   
                </div>
            </div>
        </div>  
</body>
</html>
 
div.bonecardSmall {
            background-color: white;
            margin: 10px;
            width: 340px;
            height: 210px;
            border: 2px solid black;
            border-left: 2px solid black;
            padding: 10px;
            -webkit-border-radius: 20px;
            -webkit-border-top-right-radius: 50px;
            -webkit-border-bottom-right-radius: 50px;
            -moz-border-radius: 20px;
            -moz-border-radius-topright: 50px;
            -moz-border-radius-bottomright: 50px;
            -webkit-box-sizing: content-box;
            border-radius: 20px;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            position: relative;
            float: left;
            -webkit-transition: color 0.5s ease;
         }
​
         div.bonecardSmall:after, div.bonecardSmall:before {
            background-color: white;
            position: absolute;
            display: block;
            content:"";
            border: 2px solid black;
            border-right: 2px solid white;
            width: 6px;
            left: -10px;
         }
​
         div.bonecardSmall:before {
             top: 60px;
             height: 60px;
         }
​
         div.bonecardSmall:after {
             top: 180px;
             height: 30px;
         }
​
         div.bonecardSmall img {
             max-width: 45%;
             -webkit-border-radius: 5px;
             -moz-border-radius: 5px;
             border-radius: 5px;
             margin-left: 50px;
             border:2px solid black
         }
         
         div.bonecardSmallP {
            background-color: white;
            margin: 10px;
            width: 340px;
            height: 210px;
            border: 2px solid black;
            border-left: 2px solid black;
            padding: 10px;
            -webkit-border-radius: 20px;
            -webkit-border-top-right-radius: 50px;
            -webkit-border-bottom-right-radius: 50px;
            -moz-border-radius: 20px;
            -moz-border-radius-topright: 50px;
            -moz-border-radius-bottomright: 50px;
            -webkit-box-sizing: content-box;
            border-radius: 20px;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            position: relative;
            float: left;
            -webkit-transition: color 0.5s ease;
         }
​
         div.bonecardSmallP:after, div.bonecardSmallP:before {
            background-color: white;
            position: absolute;
            display: block;
            content:"";
            border: 2px solid black;
            border-right: 2px solid white;
            width: 6px;
            left: -10px;
         }
​
         div.bonecardSmallP:before {
             top: 60px;
             height: 60px;
         }
​
         div.bonecardSmallP:after {
             top: 180px;
             height: 30px;
         }
​
         div.bonecardSmallP img {
             max-width: 45%;
             -webkit-border-radius: 5px;
             -moz-border-radius: 5px;
             border-radius: 5px;
             margin-left: 50px;
             border:2px solid black
         }
 
$(document).ready(init);
​
function init() {
  $(".bonecard-listPublish").each(function(index) {
            var dpublish = document.getElementById("tab_publish");
            var publishcontent,publishpaging;
            var counter = 0, counterName=0;
            var arrayNames=[];
            for(var i=0; i<12; i++) {
               
                    if(counter == 0){
                        publishpaging=document.createElement("div");
                        var name="df"+counterName;
                        publishpaging.id=name;
                        counterName=counterName+1;
                        arrayNames.push(name);
                        counter++;
                        publishcontent=document.createElement("div");//"<div class='bonecardSmall'></div>";
                        publishcontent.className = "bonecardSmallP";
                        publishcontent.id=i;
                        if(arrayNames.length > 0){
                            //publishcontent.style.display="";
                            publishcontent.setAttribute("style", "display: none;");
                            //$(publishcontent).css('display','none');
                        }
                        publishpaging.appendChild(publishcontent);
                    }
                    else if(counter == 3){
                        counter = 0;
                        publishcontent=document.createElement("div");//"<div class='bonecardSmall'></div>";
                        publishcontent.className = "bonecardSmallP";
                        publishcontent.id=index.id;
                        publishpaging.appendChild(publishcontent);
                        dpublish.appendChild(publishpaging);
                    }
                    else{
                        counter++;
                        publishcontent=document.createElement("div");//"<div class='bonecardSmall'></div>";
                        publishcontent.className = "bonecardSmallP";
                        publishcontent.id=index.id;
                        publishpaging.appendChild(publishcontent);
                    }   
                
            }
            if(counter !== 0){
                dpublish.appendChild(publishpaging);
            }
            
            var ulpagination=createPagination(arrayNames);
            dpublish.appendChild(ulpagination);
  });
  
  function createPagination(names){
        var uiPaging=document.createElement("ul");
        uiPaging.className="pagination";
        
        var liPaging=document.createElement("li");
        var aPaging=document.createElement("a");
        aPaging.innerHTML="&laquo;";
        aPaging.href="#"+names[0];
        liPaging.appendChild(aPaging);
        uiPaging.appendChild(liPaging);
        
        for(i=0;i<names.length;i++){
            var liPaging =document.createElement("li");
            var aPaging =document.createElement("a");
            aPaging.innerHTML=i+1;
            aPaging.href="#"+names[i];
            liPaging.appendChild(aPaging);
            uiPaging.appendChild(liPaging);
        }
        aPaging.innerHTML="&raquo;";
        aPaging.href="#"+names[names.length-1];
        liPaging.appendChild(aPaging);
        uiPaging.appendChild(liPaging);
        
        var centerdiv=document.createElement("div");
        centerdiv.className="text-center";
        centerdiv.appendChild(uiPaging);
        return centerdiv;
        
    };
  
};
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
DiegoTcpro
0viewers