読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【ツールチップ連動&レスポンシブなプログレスバー】

f:id:wp-lesson:20170207144943j:plain

達成率を表すとき使われるプログレスバー
バーの表示原理は意外とシンプルです。
 
・背景色の違う2枚のボックスを重ねる
・手前のボックスに style="width:80%;" のように
 横幅をパーセントで指定する
 
これだけです。
バーの幅をCSSファイルに記述しないのは、
パーセンテージを変更する際にHTMLを動的に
書き換える必要があるためです。
 
ちょっと工夫したのは進捗率の数字と
平均点を表すツールチップの表示位置が、
進捗率の数値に応じて自動的に最適化される
という仕組み。
 
レスポンシブなので、画面サイズが変わると
位置を再計算しなければなりません。
 
進捗率とツールチップの座標を再計算する
関数を作り、loadイベントとresizeイベントが
発生したときに関数を呼び出すように仕込む。
 
肩がこります・・・