ITエンジニア/デザイナ向けにオープンソースを毎日紹介

自動というのがいいですよね!

レスポンシブWebデザインは一つのHTMLコードで複数のウィンドウサイズに対応できる便利な技術ですが、幅が変更されることで予定外の表示になることがあります。単純にデザインが統一化されるだけでなく、それぞれに合わせたテクニックが必要です。

今回はツールチップに注目したライブラリ、Offscreen.jsを紹介します。ウィンドウ幅を読み込んで表示位置を調整してくれます。

Offscreen.jsの使い方

HTMLは次のように記述します。

$( document ).ready(function() {
  $('.tooltip__content').offscreen({
    smartResize: true,
    rightClass: 'right-edge',
    leftClass: 'left-edge'
  });
});

smartResize を trueにするとウィンドウリサイズも有効になり、都度サイズをチェックした上で実行されるようになるようです。

Offscreen.jsのデモ

例えばこれは一番左のツールチップを出した場合。中央寄せで出ています。
例えばこれは一番左のツールチップを出した場合。中央寄せで出ています。

一番右。中央寄せではウィンドウから飛び出してしまうので左側に出ます。
一番右。中央寄せではウィンドウから飛び出してしまうので左側に出ます。

このツールチップ表示位置の自動調整がOffscreen.jsの特徴になります。

ウィンドウサイズを縮めた場合。左側のツールチップも自動的に調整されます。
ウィンドウサイズを縮めた場合。左側のツールチップも自動的に調整されます。

左から2番目の場合。こちらもそれなりの場所に調整されます。
左から2番目の場合。こちらもそれなりの場所に調整されます。

Offscreen.jsを使えばこれまでのツールチップをそのまま活かしたまま、レスポンシブWebデザインにスマートな対応ができるようになります。意外と気付きづらいデザイン上の問題点をスマートに解決してくれそうです。

Offscreen.jsはjQuery/JavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Offscreen.js Demo

gijsroge/offscreen.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2