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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div id="stage">
  <h1>Hello, World!</h1>
</div>
</body>
</html>
 
var arroba = {}
arroba.debounce = function(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
arroba.setStage = function( elementOrSelector ){
  var _ww, _hh, _ch, _msc, $stage;
  
  $stage = $( elementOrSelector );
  _ww = $(window).width();
  _hh = $(window).height();
  _ch = $stage.outerHeight();
  
  _msc = Math.min(_ww / $stage.width(), _hh /$stage.height());
  
  if(_ch - $stage.height() <= 1){
    if(_ch * _msc > _hh){
      $stage.css({
        "transform" : "scale(" + _msc + ")",
        "transform-origin" : "0 0",
        "left" : ((_ww - $stage.width() * _msc) * 0.5) + "px",
        "top" : 0
      });
      $stage.parent().css({
        "overflow-y" : "visible"
      });
    }else{
      $stage.css({
        "transform" : "scale(" + _msc + ")",
        "transform-origin" : "0 0",
        "left" : ((_ww - $stage.width() * _msc) * 0.5) + "px",
        "top" : ((_hh - _ch * _msc) * 0.5) + "px"
      });
      $stage.parent().css({
        "overflow-y" : "hidden"
      });
    }
  }else{
    $stage.css({
      "transform" : "scale(" + _msc + ")",
      "transform-origin" : "0 0",
      "left" : ((_ww - $stage.width() * _msc) * 0.5) + "px",
      "top" : ((_hh - $stage.height() * _msc) * 0.5) + "px"
    }); 
    $stage.parent().css({
      "overflow-y" : "auto"
    }); 
  }  
}
var autoResize = arroba.debounce(function(){ arroba.setStage("#stage"); console.log("debounce")},250);
$(window).bind("resize", autoResize);
arroba.setStage("#stage");
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers