Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title></title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <style type="text/css">
  #container {
    width: 320px;
    height: 240px;
    position: relative;
    margin: 0;
    padding: 0;
  }
  .border { background: silver; position: absolute; }
  .borderh { height: 0px; border: 1px solid black; }
  .borderv { width: 0px; border: 1px solid black; }
  #topbar {   
    left: 0px; top: 0px;
  }
  #rightbar {
    right: 0px; top: 0px;
  }
  #bottombar {   
    right: 0px; bottom: 0px;
  }
  #leftbar {
    left: 0px; bottom: 0px;
  }
  #content {
      position: absolute;
      top: 2px;
      left: 2px;
      /* border-divs are 0px wide with 1px border all around, thus have a width & height of 2px (twice the border-width) -- 2 border-divs = 4 less pixels for the content ! */
      width: 316px;
      height: 236px;
      background: whitesmoke;
      overflow: auto;
      text-shadow: 0 0 1px #555;
      text-align: justify;
  }
  </style>
</head>
<body>
  <div id="container">
    <div class="border borderh" id="topbar"></div>
    <div class="border borderv" id="rightbar"></div>
    <div class="border borderh" id="bottombar"></div>
    <div class="border borderv" id="leftbar"></div>
    <div id="content">
      <p>Lorem ipsum dolor sit amet, patris super pariter irrationabile navium praesentari ad per animum pares terris quod tamen ait. Convivium meum filiam sunt amore nec appellarer in deinde cepit roseo ruens sed dominum vidit Dionysiadi. Magna aliter nata dum autem quod non solutionem innocentem tantusque amorem infirmata dictum in fuerat construeret in lucem. Fulgor infaustissimi eum istam vero diam dominum vidit Dionysiadi. Athenagoram homo certe est se ad te ad per accipere! Ardalio nos in modo invenit quasi nomen accidentia sibi adsedit. Stet consequat eiusdem ea communia ei. Bene ventis non coepit contingere vasculo usque vero rex ut diem finito servis rex Stranguillio ut a.</p>
    </div>
  </div>
</body>
</html>
 
$(function() {
    $(".border, #content").hide();
    $("#topbar").show();
    $("#topbar").animate({width: "318px"},1000, function() {
      $("#rightbar").show();
      $("#rightbar").animate({height: "238px"},1000, function() {
        $("#bottombar").show();
        $("#bottombar").animate({width: "318px"},1000, function() {
          $("#leftbar").show();
          $("#leftbar").animate({height: "238px"},1000, function() {
            $("#content").fadeIn(1000);
          });
        });
      });
    });
  });
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers