jQuery 1.9 で削除された、クリックイベントを交互に繰り返す「.toggle()」のみを使いたい

この記事は jQuery Advent Calendar 2014 の 9日目の内容です。

何を書こうか悩んだのですが、軽めに。

jQueryのバージョン1.9より前にあった event の toggle、地味に時折あると、簡易的にイベントを繰り返し実行したいような時に便利だったりします。

.toggle() | jQuery API Documentation

.show() と .hide() を繰り返す方の .toggle() ではないことに注意。

このイベントの `.toggle()` だけをプラグイン的に使えるように抜き出してみよと思います。

続きを読む

CSS のTransition 終了時に JavaScript で処理を行う方法

CSS Nite in SAPPORO Vol.15「先どりWebトレンド2015」に登壇して』 で JavaScript との連携を書いたのですが、JavaScriptと合わせて使っていると、 Transition の終了時に合わせて処理を行うようなケースが時折でてきます。

Transition 終了時に JavaScript でイベントを拾えるので、今日はそれを使ったちょっとしたサンプルを紹介。

続きを読む

JavaScript で配列から重複なくランダムに複数の要素を取り出す方法

JavaScript の配列からランダムで要素を取り出して扱いたいということがあるのですが、安易にやろうとしたら重複した値がでてきたり、 splice でその要素を除いたりしてやっていたのですが、どうも動作安定していない感じだったので、自分の中で再度見直しとしてのメモエントリー。

続きを読む

スクロール位置によってサイドバーやナビゲーションを固定・解除する jQuery のシンプルな実装方法と注意点

ページをスクロールしていると、途中から要素が固定表示される動きをするサイトを時折見ます。ナビゲーションだったりサイドバーの目立たせたいところだったり、用途は様々。

例えば、SaCSS の 以前のスペシャルページでも利用していたように、ページ途中で出てくるナビゲーションが、画面の一番上に触れると固定されて以降ずっとついてくるような動きをする。

SaCSS WordBench Sapporo,Late2013

この実装はそれほど難しくなく、比較的簡単に実装できるのですが、諸所気にかけておいたほうが良い部分があったりする。

シンプルな実装方法を紹介しつつ、注意点も書いておこうと思う。

続きを読む