マウスクリックで全画面に広がる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>
……と、書けば大丈夫です。
これで、このサイトにも全画面コンテンツが載せられるようになりました。
すなわち、ワークフローやらツリー型のシナリオプロットやらを乗せることが出来るのです!
撰ばれてあることの恍惚と不安と二つわれにあり!
(また言ってる)