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="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
</head>
<body>
​
<div id="leftPane">
    <div id="4000" class="tile bg-color-3">
        <h2>Muhammad's…<span>BD-04000</span></h2>
        <h3>Logged<span>OK</span></h3>
        <input id="a" type="hidden" value="">
        <input id="b" type="hidden" value="">
        <input id="c" type="hidden" value="">
    </div>
</div>
  
</body>
</html>
​
 
html, body, h1, h2, h3
{
    margin: 0;
    font-family: 'Segoe UI Light' , 'Open Sans' , Verdana, Arial, Helvetica, sans-serif;
    text-align: left;
  
}
​
body{
  width:600px;
}
​
h1
{
    font-weight: 200;
    font-size: 37pt;
    letter-spacing: 0.00em;
    line-height: 44pt;
}
​
h2
{
    font-weight: 200;
    font-size: 18pt;
    letter-spacing: 0.01em;
    line-height: 24pt;
}
​
h3
{
    font-weight: 200;
    font-size: 12pt;
    letter-spacing: 0.01em;
    line-height: 24pt;
}
​
#leftPane
{
    width: 316px;
    height: 535px;
    float: left;
    background-color: white;
    border-right: 2px solid #ccc;
    overflow-y: scroll;
    text-align: center;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
​
.tile
{
    height: 70px;
    padding: 5px 10px 5px 10px;
    margin: 8px auto 0px auto;
    width: 280px;
    background-color: #99b433 !important;
    cursor: pointer;
}
​
.tile.selected
{
    width: 270px;
}
​
.tile:hover
{
    border: 2px solid #2d89ef;
}
​
​
.tile > h2
{
    color: White;
    border-bottom: 1px dotted #eaeaea;
}
​
.tile > h2 > span
{
    font-weight: 200;
    font-size: 14pt;
    letter-spacing: 0.01em;
    float: right;
}
​
.tile > h3 > span
{
    font-weight: 200;
    font-size: 12pt;
    letter-spacing: 0.01em;
    float: right;
}
​
.tile > h3
{
    margin-top: 5px;
    color: White;
}
 
$(function () {
  $('#4000').click(function(){
    $('#4000').addClass('selected');
  });
  
  setInterval(function () {$('#4000').addClass('selected');}, 5000);
});
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers