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-2.1.0.min.js"></script>
  <script src="https://raw.githubusercontent.com/rodneyrehm/viewport-units-buggyfill/master/viewport-units-buggyfill.js"></script>
<meta charset="utf-8">
<title>Demo by Roko C.B.</title>
</head>
<body>
 
  
<div id="view">
  <div id="appear">Content that appears</div>
  <div id="header">
    Header CLICK ME!
  </div>
​
  <div id="content">
    <h1>Content</h1>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus est non augue blandit tempor. Morbi libero mauris, pretium sed enim ac, interdum pulvinar orci. Nunc vitae lacinia nulla. Sed adipiscing malesuada mauris vitae tempor. Cras eget eros cursus, dignissim est vel, placerat sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas at purus faucibus, tincidunt ligula vel, interdum lectus. Nulla nibh orci, sagittis vitae sem nec, commodo mattis neque. In ornare, massa venenatis aliquet tempor, augue leo fermentum odio, et rhoncus eros metus eget diam. Sed ut porttitor libero.
    </p>
    <p>
Commodo mattis neque. In ornare, massa venenatis aliquet tempor, augue leo fermentum odio, et rhoncus eros metus eget diam. Sed ut porttitor libero, nec commodo turpis. Curabitur pretium, turpis quis ornare consequat, sem diam porttitor neque, interdum pharetra mauris ipsum quis nulla. Integer a turpis dictum, ullamcorper diam sit amet, vehicula massa. Phasellus sed lacinia felis, non gravida velit. Etiam hendrerit neque id velit placerat, vel viverra justo semper. In hac habitasse platea dictumst. Donec elit urna, sodales ac semper eget, vestibulum vitae tellus. 
    </p>
    
  </div>
​
  <div id="footer">
    Footer
  </div>
  
  
</div>
  
</body>
</html>
 
window.viewportUnitsBuggyfill.init(true);
var cssText = window.viewportUnitsBuggyfill.getCss();
​
console.log(cssText);
​
​
$("#view").on("click", "#header", function () {
  var $appear = $('#appear');
  var io = this.io ^= 1; // Toggler
  
  $appear.show();               // Temporarily show
  var animH = $appear.height(); // Get height and
  if(io) $appear.hide();        // fast hide.
  $appear.slideToggle();        // Now do it with animation
  
  $('#content').animate({       // Animate content height
      height: (io?"-=":"+=")+animH
    },{
      step: function() {
        $(this).css("overflow-y", "scroll");
      },
      complete : function(){
        var h = 88 + (io?animH:0); // header+footer = 88px
        $(this).css({height: "calc(100% - "+ h +"px)"});
      }
   });
 
});
Output

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

Dismiss x
public
Bin info
stevoPerisicpro
0viewers