[javascript] 内包する要素のサイズを比率から計算する(contain or cover)

object-fit: cover; などのサイズをjsで計算する。
div要素をcover表示するときなどに使えるかもしれない。

See the Pen calculate cover and contain by phantom4 (@phantom4) on CodePen.

[JavaScript] 要素が画面内に表示されているか

getBoundingClientRect() を使うと簡単に判別できるようです。

要素が画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.top && rect.bottom < window.innerHeight;

要素が一部でも画面内に表示されている

const rect = element.getBoundingClientRect();
const isInView = 0 < rect.bottom && rect.top < window.innerHeight;

See the Pen in view by phantom4 (@phantom4) on CodePen.

iPhoneではcodepenやiframeで上手く動きません。

[js] setTimeout、setIntervalのdelayに24日 20時間 31分 23秒 648 以上を指定すると即実行される

32bitということらしいです。

※11/11追記
サンプルが分かりにくいので変更しました。

setTimeout(() => {
  console.log('hoge');  // すぐ実行される
}, 2147483648);

テスト結果

See the Pen max delay of setTimeout & setInterval by phantom4 (@phantom4) on CodePen.

See the Pen max delay of setTimeout & setInterval by phantom4 (@phantom4) on CodePen.

4:3、16:9などのサイズ一覧

たまに必要になってその度に検索していたので作ってみた。
幅を総当りして、割り切れる高さを算出。

See the Pen aspect ratio calc by phantom4 (@phantom4) on CodePen.

以下は、幅1〜1280のときの4:3と16:9のリスト

続きを読む 4:3、16:9などのサイズ一覧

[js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする(改良版)

前回から改良したので、別記事にしました。
基本的な処理はほとんど変わっていませんが少し改良しています。

  • スクロールの判定方法を変更
  • アドレスバーが消えたときのイベントが取得できるようになった

続きを読む [js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする(改良版)

ハッシュ変更を検知

ライブラリに依存しないハッシュ変更を検知するスクリプト。
ほとんど出番はないと思われ。


2013/1/18追記
CoffeeScriptも少しかじったので用意してみた。
ただしやり始めたばっかりなので不備があるかも。。
現時点で把握している不備と対策です。
・on()が存在しない
 →bind()を使う
・off()存在しない
 →unbind()を使う

デモ:

デモ

続きを読む ハッシュ変更を検知