javascriptでdivを全画面に広げる！

マウスクリックで全画面に広がるdivを作りました。
備忘録も兼ねてコードを晒しておきます。

クリックして拡大表示/縮小表示します

コードはこちら。

<script type="text/javascript">
  jQuery(function(){
    // ボードの拡大
    jQuery('.openBar').click(function(){
      var target = jQuery('#bboard');
      if(jQuery('#bboard').css('position') == "absolute"){
        jQuery('#bboard').css({'top': jQuery('#aboard').offset().top - jQuery(window).scrollTop() });
        jQuery('#bboard').css({'left': jQuery('#aboard').offset().left - jQuery(window).scrollLeft() });
        jQuery('#bboard').css({'width': jQuery('#aboard').css('width') });
        jQuery('#bboard').css({'height': jQuery('#aboard').css('height') });
        jQuery('#bboard').css({'position': 'fixed'});
        jQuery('#treeView').css({'margin-top': '110px'});
        reSizeMe(target , jQuery(window).width(), jQuery(window).height(), 0, 0, 300);
      }else{
        jQuery('#bboard').css({'top': jQuery(window).scrollTop() - jQuery('#aboard').offset().top });
        jQuery('#bboard').css({'left': jQuery(window).scrollLeft() - jQuery('#aboard').offset().left });
        jQuery('#bboard').css({'position': 'absolute'});
        jQuery('#treeView').css({'margin-top': '0px'});
        reSizeMe(target , jQuery('#aboard').css('width'), jQuery('#aboard').css('height'), jQuery('#aboard').css('left'), jQuery('#aboard').css('top'), 300);
      }
      setTimeout(function(){
        jQuery(target).css('overflow','scroll');
      },500,target);
    });
    jQuery(window).resize(function() {
    //リサイズされたときの処理
    var target = jQuery('#bboard');
      if(panesize == "big"){
        jQuery(target).css({width: jQuery(window).width()});
        jQuery(target).css({height: jQuery(window).height()});
        jQuery(target).css({left: 0});
        jQuery(target).css({top: 0});
      }
    });
  });
  // ボードの拡大用関数
  function reSizeMe(target,w,h,l,t){
    jQuery(target).animate({width: w},{queue: false}, 300);
    jQuery(target).animate({height: h},{queue: false}, 300);
    jQuery(target).animate({left: l},{queue: false}, 300);
    jQuery(target).animate({top: t},{queue: false}, 300);
  }
</script>

リサイズしたときにスクロールバーが消えてしまうので、setTimeout()で無理やり出してます。
もっと頭の良い方法があったら教えて下さい。
スタイルシートはこちらです。

<style>
#aboard{
  position:relative;
  background-color: #ccccdd;
  border: solid 2px #ccccee; 
  width: 100%;
  height: 500px;
}
#bboard{
  position:absolute;
  background-color: #ffffff;
  width: 100%;
  height: 500px;
  overflow: scroll;
  z-index: 2000;
}
.openBar{
  background-color: #aaaaee; 
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  height: 42px;
  justify-content: center;
  align-items: center;
}
</style>

background-colorやborderは何でも構いません。
重要なのはpositionだけです。
widthは100%が推奨で、heightは#aboardと#bboardと同じ値が入っているのが望ましいです。
z-indexは不要なら省けます。ページの他の要素が上にかぶる場合、もっと大きくしてください。
HTMLはこんな感じで……

<div id="aboard">
    <div id="bboard">
        <div class="openBar">クリックして拡大表示/縮小表示します</div>
        お父さんのバカァーっ！！
    </div>
</div>

……と、書けば大丈夫です。

これで、このサイトにも全画面コンテンツが載せられるようになりました。
すなわち、ワークフローやらツリー型のシナリオプロットやらを乗せることが出来るのです！
撰ばれてあることの恍惚と不安と二つわれにあり！
（また言ってる）

Follow me!

関連