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
  • …
 
​
<html>
<head>
<title>Header</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
   <div class="navbar navbar-default" role="navigation">
  <div class="container-fluid">    
   <div class="row">
    <div class="rightBox pull-left" href="#">      
      <div class="navbar-collapse collapse">        
                <ul class="navbar-nav navbar-left">
                  <li class="dropdown">
                      <li class="divider-vertical"></li>
                          <li style="margin-top: 3px;">
                               <i class="fa fa-2x fa-border fa-user"></i>
                          </li>
                          <li>
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                  <label class="navbar-text" style="margin-top: 5px;margin-left:0;">
                                      <strong><h4>
                                      <span class="user-name hidden-md hidden-sm hidden-xs">Karl Cadigan</span>
                                      <b class="glyphicon glyphicon-chevron-down"></b>
                                      </h4></strong>
                                  </label>
                              </a>
                      <ul class="dropdown-menu">
                          <li>
                              <div class="navbar-login">
                                  <div class="row">
                                      <div class="col-lg-4">
                                          <p class="text-center">
                                              <span class="fa fa-2x fa-border fa-user icon-size"></span>
                                          </p>
                                      </div>
                                      <div class="col-lg-8">
                                          <p class="text-left"><strong>Karl Cadigan</strong></p>
                                          <p class="text-left small">karlcadigan@invicara.com</p>
                                          <p class="text-left hidden-lg hidden-md hidden-xs"><strong>ACME - Newyork</strong></p>
                                          <p class="text-left">
                                              <a href="#" class="btn btn-primary btn-block btn-sm">edit profile</a>
                                          </p>
                                          <p class="text-left">
                                              <a href="#" class="btn btn-primary btn-block btn-sm">edit Account</a>
                                          </p>
                                      </div>
                                  </div>
                              </div>
                          </li>
                          <li class="divider"></li>
                          <li>
                              <div class="navbar-login navbar-login-session">
                                  <div class="row">
                                      <div class="col-lg-12">
                                          <p>
                                              <a href="#" class="btn btn-danger btn-block">Signout</a>
                                          </p>
                                      </div>
                                  </div>
                              </div>
                          </li>
                      </ul>
                  </li>
              </ul>
              </div>
    </div>
   
  </div>
</div>
</div>    
</body>
</html>
 
/* CSS used here will be applied after bootstrap.css */
.rightBox{ height: 60px; width:260px; border:1px dashed red; }
​
​
.fa-user {
    position: relative;
    background: #666666;
}
​
.fa-user:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent #89cd17 transparent transparent;
}
​
.navbar-login {
    width: 260px;
    padding: 10px;
    padding-bottom: 0px;
}
​
.navbar-login-session {
    padding: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
}
​
.icon-size {
    font-size: 50px;
}
​
.navbar-collapse{
  padding: 0;
}
.navbar-left{
  margin: 0;
  padding: 0;
}
 
$(document).ready(function(){
  var cntrboxWidth = $('#centerBox').width()-460;
  $('#navLogin + .dropdown-menu').width(cntrboxWidth);
  var extraWidth = $('#navLogin').outerWidth();
  $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth);
  $(window).resize(function(){
    cntrboxWidth = $('#centerBox').width()-460;
    $('#navLogin + .dropdown-menu').width(cntrboxWidth);
    extraWidth = $('#navLogin').outerWidth();
    $('#navLogin + .dropdown-menu').css('left',-(cntrboxWidth)+extraWidth); 
  });
  var storage = $('<span />').css('margin-left' , '54px').attr({'class':'progress-title' }).html('Storage');
​
  $("#progress-div").before(storage);
  var usageStorage = $('<span />').attr({'class':'progress-title-after' }).html('25% Usage');
  $("#progress-div").before(usageStorage);
  $("#progress-div :last-child").css('margin-right', 'auto');
  
  var testProgressUpdate = function(per)
  {
      var totalBars = $(".progress-bar").length;
      var barsToModify = totalBars * (per / 100);
      barsToModify = Math.round(barsToModify);
      $(".progress-bar").removeClass().addClass("progress-bar").addClass("progress-bar-fail");
      $(".progress-bar").each(function(i)
      {
         if (i >= barsToModify) return false;
          $(this).removeClass("progress-bar-fail").addClass("progress-bar-success");
      });
  }
  testProgressUpdate(50);
  
  var volume = $('<span />').attr({'class':'progress-title' }).html('Volume Analysis');
  $("#progress-div2").before(volume);
  
  var usageVolume = $('<span />').attr({'class':'progress-title-after' }).html('70% Usage');
  $("#progress-div2").before(usageVolume);
  
  $(".bar").css('width','70%');
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers