画面にフローティング表示をするシステムが増えてきたので、よく使うスニペットを載せておきます。
フローティング表示するケースは、以下のような事があります。
- JSプログラムで構築したダイアログ表示
- 任意の座標に表示したい広告バナー
- 目立つお知らせ表示
- リアルタイムチャットなどの機能をWEBページ上に表示
他にも、エレメントをドラッグさせる場合などにも、フローティング機能を使うと思います。
初心者用、フローティングエレメントの仕組み
オブジェクトをフローティングさせるには、CSSで"position:absolute;"でセットされた"display:block;"または、"display:inline-block;"要素のエレメントは、座標とサイズを個別に表示できます。
簡単なサンプルか以下の通りです。
<div id="dialog">hoge</div>
<style>
#dialog{
display:block;
position:absolute;
top:100px;
left:100px;
width:100px;
height:100px;
background-color:red;
}
</style>
上記の記述をするだけで、フローティング構築は簡単にできます。
あとは、マウスやキーボード操作や、何かしらのイベントにより、top , leftの座標をコントロールする事で、動かせるエレメントを構築できます。
画面中央に表示するソース
上記のようにすでに表示されているエレメントは画面中央に配置する（座標を取得する）スニペットです。
function getCenterPosisition(elm){
var eW = elm.offsetWidth,
eH = elm.offsetHeight,
sX = window.pageXOffset,
sY = window.pageYOffset,
wW = window.innerWidth,
wH = window.innerHeight;
return {
x:(wW - eW)/2 + sX,
y:(wH - eH)/2 + sY
};
};
対象のエレメントを指定してあげると、topとleftの座標を返してくれます。
使い方サンプル
var pos = getCenterPosisition(document.getElementById("dialog"));
# 座標確認用
console.log(pos.x +"/"+ pos.y);
# 座標セット
document.getElementById("dialog").style.setProperty("top", pos.y+"px","");
document.getElementById("dialog").style.setProperty("left", pos.x+"px","");
document.getElementById("dialog")の箇所は、任意のエレメントに差し替えると、画面中央に表示されます。
使い方の応用
画面中央表示は、スクロールするとずれてくるので、"position:fixed;"とするか、"window.onScroll"イベントで、都度座標修正をして、画面中央に常に表示する事ができます。
または、alertダイアログなどの場合は、画面のスクロールをSTOPさせてしまう事で不要なイベント処理を書かなくてもよくなるので、この辺はUX次第で仕様は変わるでしょう。
解説
getCenterPosisition関数は、非常に簡単な構成になっていますが、まず表示されているエレメントサイズを取得し、その後画面の表示サイズとスクロール座標を取得し、
それぞれのx軸、y軸を半分にして、TOP値とLEFT値を算出してます。
今回は画面全体のサイズを参照してますが、特定のエレメント内での挙動にしたい場合は、適宜windowの箇所などを書き換える事で対応できると思います。
個人的には、フローティングしているエレメントは、"box-shadow"のCSSを記述して、浮いている感を演出するのがいいと思うので、そうしたデザイン要素も検討してみましょう。
