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>
<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  #tabs 
  {
    width: 400px;
    margin-left: 6em;
  }
  
  #sidebar
  {
    position: fixed;
    top: 1em;
    left: 0;
    width: 5em;
    border: 2px solid gray;
    padding: 0.5em;
  }
  
  #sidebar .extradiv
  {
    color: blue;
  }
  
  #tabHeight
  {
    overflow: hidden;
    color: red;
    text-overflow: ellipsis;
   }
</style>
</head>
<body>
  
 <div id="tabs">
      <ul>
          <li><a href="#tabs-1">tab 1</a></li>
          <li><a href="#tabs-2">tab 2</a></li>
          <li><a href="#tabs-3">tab 3</a></li>
          <li><a href="#tabs-4">tab 4</a></li>
      </ul>
      
      <div id="tabs-1">
          "short" content
      </div>
      
      <div id="tabs-2">
          <p>Morbi  tincidunt,  dui sit amet facilisis feugiat, odio metus gravida ante, ut  pharetra  massa metus id nunc. Duis scelerisque molestie turpis. Sed  fringilla,  massa eget luctus malesuada, metus eros molestie lectus, ut  tempus eros  massa ut dolor. Aenean aliquet fringilla sem. Suspendisse  sed ligula  in ligula suscipit aliquam. Praesent in eros vestibulum mi  adipiscing  adipiscing. Morbi facilisis. Curabitur ornare consequat nunc.  Aenean  vel metus. Ut posuere viverra nulla. Aliquam erat  volutpat.  Pellentesque convallis. Maecenas feugiat, tellus pellentesque  pretium  posuere, felis lorem euismod felis, eu ornare leo nisi vel  felis. Mauris  consectetur tortor et purus.</p>
      </div>
      <div id="tabs-3">
          <p>Mauris  eleifend  est et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate,  pede vel vehicula accumsan, mi neque rutrum erat, eu congue  orci lorem  eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad litora  torquent per conubia nostra, per inceptos himenaeos. Fusce  sodales.  Quisque eu urna vel enim commodo pellentesque. Praesent eu  risus  hendrerit ligula tempus pretium. Curabitur lorem enim, pretium  nec,  feugiat nec, luctus a, lacus.</p>
          <p>Duis  cursus.  Maecenas ligula eros, blandit nec, pharetra at, semper at,  magna.  Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae  neque.  Praesent blandit adipiscing velit. Suspendisse potenti. Donec  mattis,  pede vel pharetra blandit, magna ligula faucibus eros, id  euismod lacus  dolor eget odio. Nam scelerisque. Donec non libero sed  nulla mattis  commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor,  tempor ac,  tempor vitae, pede. Aenean vehicula velit eu tellus interdum  rutrum.  Maecenas commodo. Pellentesque nec elit. Fusce in lacus.  Vivamus a  libero vitae lectus hendrerit hendrerit.</p>
      </div>
      
       <div id="tabs-4">
           <p>Proin  elit  arcu,  rutrum commodo, vehicula tempus, commodo a, risus.  Curabitur  nec  arcu. Donec sollicitudin mi sit amet mauris. Nam  elementum  quam  ullamcorper ante. Etiam aliquet massa et lorem. Mauris  dapibus  lacus  auctor risus. Aenean tempor ullamcorper leo. Vivamus sed  magna  quis  ligula eleifend adipiscing. Duis orci. Aliquam sodales  tortor  vitae  ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et  mauris  vel pede  varius sollicitudin. Sed ut dolor nec orci tincidunt  interdum.  Phasellus  ipsum. Nunc tristique tempus lectus.</p>
         <p>Mauris  eleifend  est  et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate,  pede  vel vehicula accumsan, mi neque rutrum erat, eu congue  orci  lorem  eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad  litora  torquent per conubia nostra, per inceptos himenaeos.  Fusce  sodales.  Quisque eu urna vel enim commodo pellentesque. Praesent  eu  risus  hendrerit ligula tempus pretium. Curabitur lorem enim,  pretium  nec,  feugiat nec, luctus a, lacus.</p>
          <p>Duis  cursus.  Maecenas  ligula eros, blandit nec, pharetra at, semper at,  magna.  Nullam ac  lacus. Nulla facilisi. Praesent viverra justo vitae  neque.  Praesent  blandit adipiscing velit. Suspendisse potenti. Donec  mattis,  pede vel  pharetra blandit, magna ligula faucibus eros, id  euismod lacus  dolor  eget odio. Nam scelerisque. Donec non libero sed  nulla mattis  commodo.  Ut sagittis. Donec nisi lectus, feugiat porttitor,  tempor ac,  tempor  vitae, pede. Aenean vehicula velit eu tellus interdum  rutrum.  Maecenas  commodo. Pellentesque nec elit. Fusce in lacus.  Vivamus a  libero  vitae lectus hendrerit hendrerit.</p>
         <p>Mauris  eleifend  est  et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate,  pede  vel vehicula accumsan, mi neque rutrum erat, eu congue  orci  lorem  eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad  litora  torquent per conubia nostra, per inceptos himenaeos.  Fusce  sodales.  Quisque eu urna vel enim commodo pellentesque. Praesent  eu  risus  hendrerit ligula tempus pretium. Curabitur lorem enim,  pretium  nec,  feugiat nec, luctus a, lacus.</p>
          <p>Duis  cursus.  Maecenas  ligula eros, blandit nec, pharetra at, semper at,  magna.  Nullam ac  lacus. Nulla facilisi. Praesent viverra justo vitae  neque.  Praesent  blandit adipiscing velit. Suspendisse potenti. Donec  mattis,  pede vel  pharetra blandit, magna ligula faucibus eros, id  euismod lacus  dolor  eget odio. Nam scelerisque. Donec non libero sed  nulla mattis  commodo.  Ut sagittis. Donec nisi lectus, feugiat porttitor,  tempor ac,  tempor  vitae, pede. Aenean vehicula velit eu tellus interdum  rutrum.  Maecenas  commodo. Pellentesque nec elit. Fusce in lacus.  Vivamus a  libero  vitae lectus hendrerit hendrerit.</p>
         <p>Mauris  eleifend  est  et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate,  pede  vel vehicula accumsan, mi neque rutrum erat, eu congue  orci  lorem  eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad  litora  torquent per conubia nostra, per inceptos himenaeos.  Fusce  sodales.  Quisque eu urna vel enim commodo pellentesque. Praesent  eu  risus  hendrerit ligula tempus pretium. Curabitur lorem enim,  pretium  nec,  feugiat nec, luctus a, lacus.</p>
          <p>Duis  cursus.  Maecenas  ligula eros, blandit nec, pharetra at, semper at,  magna.  Nullam ac  lacus. Nulla facilisi. Praesent viverra justo vitae  neque.  Praesent  blandit adipiscing velit. Suspendisse potenti. Donec  mattis,  pede vel  pharetra blandit, magna ligula faucibus eros, id  euismod lacus  dolor  eget odio. Nam scelerisque. Donec non libero sed  nulla mattis  commodo.  Ut sagittis. Donec nisi lectus, feugiat porttitor,  tempor ac,  tempor  vitae, pede. Aenean vehicula velit eu tellus interdum  rutrum.  Maecenas  commodo. Pellentesque nec elit. Fusce in lacus.  Vivamus a  libero  vitae lectus hendrerit hendrerit.</p>
         <p>Mauris  eleifend  est  et turpis. Duis id erat. Suspendisse potenti. Aliquam  vulputate,  pede  vel vehicula accumsan, mi neque rutrum erat, eu congue  orci  lorem  eget lorem. Vestibulum non ante. Class aptent taciti sociosqu  ad  litora  torquent per conubia nostra, per inceptos himenaeos.  Fusce  sodales.  Quisque eu urna vel enim commodo pellentesque. Praesent  eu  risus  hendrerit ligula tempus pretium. Curabitur lorem enim,  pretium  nec,  feugiat nec, luctus a, lacus.</p>
          <p>Duis  cursus.  Maecenas  ligula eros, blandit nec, pharetra at, semper at,  magna.  Nullam ac  lacus. Nulla facilisi. Praesent viverra justo vitae  neque.  Praesent  blandit adipiscing velit. Suspendisse potenti. Donec  mattis,  pede vel  pharetra blandit, magna ligula faucibus eros, id  euismod lacus  dolor  eget odio. Nam scelerisque. Donec non libero sed  nulla mattis  commodo.  Ut sagittis. Donec nisi lectus, feugiat porttitor,  tempor ac,  tempor  vitae, pede. Aenean vehicula velit eu tellus interdum  rutrum.  Maecenas  commodo. Pellentesque nec elit. Fusce in lacus.  Vivamus a  libero  vitae lectus hendrerit hendrerit.</p>
       </div>
      
  </div>
  
  
<div id="sidebar">
 this is #sidebar...
  <div class="extradiv">This is "#sidebar .extradiv"... The tab content height is <div id="tabHeight"></div> pixels.</div>
​
</div>
</body>
</html>
 
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers