案件対応中に、画面のスクロールに伴って画面左（もしくは右）に配置したメニューが追従してくる「フローティングメニュー（エレベーターメニュー）」の実装を検討しました。Google検索でjQueryプラグインを探すと、3年ほど前から更新されていないプラグインや、jQuery公式サイトのPluginsから消えてしまっているプラグインばかりでしたので、サンプルスクリプトを公開します。

本サンプルをたたき台としてご利用頂ければと思いますが、「いいね」が多いようでしたらプラグイン化も検討してみたいと思います。

• 続きを読む

（先月会社のFacebookウォールに書いた記事をより広めるために転載します。）

Facebookページの独自タブ（HTMLでオリジナルのFacebookページ）を作られている方にお知らせです。先日9月24日、Facebook開発者ブログの記事「Platform Updates: Operation Developer Love」にて、iframeの高さ調整に関するJavaScriptの仕様変更がアナウンスされています。

• 続きを読む

CSS Nite LP, Disk 18の復習とjQuery Templates pluginの実験をかねて、スクリプトを書いてみました。はじめはレポート記事で紹介したサンプルコードの改造をしたのですが、徳田さんのセッションのスライドを見返すと同じコードが紹介されていたので、XMLで記述されたデータをjQueryで取得して表示するコードをお題にしてみました。

• サンプルファイル

作成しての感想ですが、jQuery Templates pluginを利用すると、JavaScriptのコード内にHTMLが混ざらず、コードの見通し・メンテナンス性が非常に良くなりました。

• 続きを読む

正直なところ、地方、とくに僕が住んでいる街だと同じ職種同士の方で集まるような勉強会や、自分が聞きたいテーマに沿ったセミナーが開催されることなんて無いに等しい状態。そんな折、ある程度jQueryに習熟した人向けのイベントが開催されるということで、とても楽しみにして行ったわけです。

セミナーの様子はTogetterにまとめられたツイートや、後日公開されるであろう資料・音声を見ていただければということで、自分が印象に残った点を簡単に書き留めておくと、やはり高津戸さん（@Takazudo）のセッションの話になるでしょうか。jQueryのプラグインは書けるので、それよりも大きなアプリケーションの構築には非常に興味があったのです。

• 続きを読む

jQueryベースで開発している際に画像のロールオーバー機能を取り入れたいことが時々あるのですが、良いプラグインがなく他の優れたライブラリ（MJL）を利用していました。

jQueryを少し触れた経験があれば、画像のロールオーバー機能は.hover()を利用して簡単に書けるものですが、.hover()はマウスイベントのためキーボード操作でフォーカスした際に動作しません（現状、多くのプラグインがそういう仕様です）。

そこで今回、MJL.Rolloverのコードリーディングをしてロジックを学ばせていただきつつ、キーボード操作にも対応した画像ロールオーバープラグインを書いてみました。（GNU GPLに基づく自由ソフトウェアということで問題ないという認識でいますが...、問題がありましたらお知らせください。単にjQuery Pluginに移植したのではなく、派生プログラムといったところですが...。）

サンプル

• サンプルHTMLを見る

HTML側はロールオーバーを実現したい要素（もしくは親要素）に、任意のclass属性値（roll等）を付けます。

<ul class="nav-global">
<li><a href="#"><img src="images/gnav_shimalog.gif" width="90" height="37" alt="Shimalog" class="roll" /></a></li>
</ul>

JavaScript側は、次のようにHTML側で付与したclass属性値に対し、プラグインを動作させるメソッドを書くだけでOKです。

"jQuery" in window && (function($) {
    $(function() {
        $(".roll").rollover();
    })
}(jQuery));

• 続きを読む