今回のエントリーも前に仕事で使ったので、メモ書き程度にエントリー。
案件によっては、バナーの掲載エリアに制限があり、ローテーションさせる必要がある場合があります。
そんな時に便利なのがCrossfader.js。
» Javascript / CSS Crossfader : CSS . XHTML . Javascript . DOM : Brand Spanking New
独立系のjsなので特に別のライブラリは不必要で、記述するスクリプトも、非常にシンプルです。
» サンプル
実装方法は作者のサイトからダウンロードしたファイルに入っているbsn.Crossfader.jsを読み込んで、ファンクションCrossfaderを実行するだけ。
第一引数に表示する順番、第二引数に切り替える時間(ミリ秒)、第三引数に表示時間(ミリ秒)を与えればOK。
注意事項としてはJSオフの場合に当然、要素がすべてXHTMLの記述通りに表示されてしまうため、親要素に高さを与えてoverflow:hiddenにしておくくらい。
既にこの手の情報は巷に溢れているのですが、メモ書き程度にエントリー。
案件によっては文字サイズの切り換えボタンを付けてくれと言われる事があります。
レガシーブラウザと違ってモダンブラウザでは文字サイズの固定という概念自体がないので、ブラウザ側でのサイズ変更でいいんでない？と思ったりするのですが、多分、昔の名残なんでしょうね。まだ根強く残っていたりします。
そんなわけで、jQueryを使った文字サイズの切り換えのサンプルを作ってみました。
» サンプル
» サンプル(ZIP)
やってることは参照サイトと同じで、文字サイズの入ったCSS(font_m.css、font_l.css)をJavaScriptで切り替え、状態をCookieで保持するというもの。
プラスアルファで、文字サイズメニューをアクティブにするようにしてあります。
このメニューのアクティブ化は、切り替えるそれぞれのCSSにスタイルを設定するのが一番楽かと思います。
使用しているライブラリー
» jQuery
» StyleSwichter jQuery plugin
» jquery.cookie.js
今の案件で、不慣れなJavaScriptを書いてみたんだけど、location.hrefでちょっとハマったのでメモ。
<a>タグにonclickイベントでlocation.hrefを書くと、IE6で正常に動作しないみたい。
(クリックしてもリンクしない)
そのとき書いていたコード。
<a href=”javascript:void(0)” onclick=”location.href=’URL’;”>hoge</a>
正しくは、以下の書き方をするらしい。
<a href=”javascript:void(0)” onclick=”location.href=’hoge.html’; return false;”>hoge</a>
このreturn falseを書いておけば、キチンと動作する。
もっとも、
<a href=”javascript:location.href=’hoge.html’;”>hoge</a>
こちらでも普通に動作するのだけれど。
この辺りは多分、JS書いてる人には何言ってんの？って感じなんでしょうけど、まだまだかじり初めな僕には罠だったりするのです。