jQueryプラグインsuperfish、IE6でのバグ

jQueryプラグインsuperfishはマウスオーバーメニューを作成する為のプラグインです。

エフェクトも綺麗で良いプラグインなんですが、IE６でz-indexのバグがあり

修正に少し時間がかかったのでメモ。

修正する為には

jquery.bgiframe.min.jsが必要です。

IE6特有のバグになるので

<!--[if IE 6]><script type="text/javascript" src="js/jquery.bgiframe.min.js"></script><![endif]-->

と読み込んでおいて

<script type="text/javascript">
jQuery(document).ready(function(){
		//プラグインを使用する際は先にプラグインを適用
		if (typeof document.documentElement.style.maxHeight != "undefined") { //IE7以上、Firefox, Opera, Chrome等

ﾂjQuery("ul.sf-menu").supersubs({
            minWidth:    12,
　　 maxWidth:    27,
ﾂextraWidth:  1
ﾂﾂ        }).superfish();
ﾂ    });
} else { //IE6
ﾂjQuery("ul.sf-menu").supersubs({
            minWidth:    12,
　　　　　　　 maxWidth:    27,
ﾂ            extraWidth:  1
　　　　　}).superfish().find('ul').bgIframe({opacity:false}); 
//jquery.bgiframe.min.jsを選択エリアに適用



});


}
}); </script>

とすればOK。

他のブラウザの場合は読み込んでも読みこまなくても影響がないので、IE６用のコードだけでも問題は無いです。

jQueryでラジオボタンの値を　取得、設定

$(“input[name=name属性]:checked”).val()

コレで値を取得して、

$(“input[name=name属性]“).val([値])

これで設定。

値を設定するときはリスト型で渡す所（[]でくくる）ことに注意。

jQueryに様々な機能を追加できるプラグイン（jQuery Tools）

画像を自動でスクロールするjavascriptを探していたら見つけたjQuery Tools

英語のページなので使い方を簡単にまとめておく

デモページ

ダウンロードページ

ダウンロードページを開いて必要なファイルをダウンロードする。

ｊQueryが無い場合はjQueryの本家か上記のダウンロードページでダウンロードしてください。

ダウンロードですが、必要な機能をチェックして「Download Now」というボタンを押せば最適化されたファイルがダウンロードできます。

いろんな機能があるので全部説明は出来ませんが、デモページに入ってコードを読めば、大体使い方が分かると思います。

主な機能は

1. Tabs(タブ機能）
2. ToolTip（ツールチップ）
3. Overlay（オーバーレイ（ライトボックスみたいなもの））
4. Scrollable（画像スクロール）
5. Validator（入力チェック）
6. Rangeinput(スライドバーで入力）
7. Dateinput(カレンダーで入力）
8. Expose（部分的に浮き出させる）
9. Flashembed（Flash読み込み）

です。

必要な機能は結構揃っているので使い勝手が良いかと思います。

ハイパーリンクにスクロールアニメーションを加える（jQuery）

ハイパーリンクをクリックした際デフォルトではパッと移動しますが

移動にスクロールのアニメーションをつけれないかと自作してみました。

j$ = jQuery;

var delay = 20; //処理間隔（ms）
var sw = 0.35; // 移動の細かさ （0 < sw <1 の範囲で）

var baseDelH = 10;
var beforeH;

j$(function(){
j$(“[href^='#']“).each(function(index){
j$(this).click(scrollEvent);
});

});

function scrollEvent(eo) {
var hlId = j$(this).attr(‘href’);
smoothScroll(hlId);
return false;
}

function smoothScroll(hlId) {
var targetH = j$(hlId).offset().top;
var targetW = j$(hlId).offset().left;
var w = j$(window);
var sH = w.scrollTop();
var wH = w.height();

var delH = sH – targetH;

var offset = delH * sw;
var nextHeight = sH – offset;

if (delH > 0) {
if (delH < baseDelH) {
w.scrollTop(targetH);
} else {
w.scrollTop(nextHeight);
var timerId =ﾂ setTimeout(
function () {
smoothScroll(hlId);
clearTimeout(timerId);
},delay);
}
} else if (delH < 0) {
if (delH > baseDelH || (beforeH == nextHeight)) {
w.scrollTop(targetH);
} else {
w.scrollTop(nextHeight);
var timerId =setTimeout(function () {
smoothScroll(hlId);
clearTimeout(timerId);
},delay);
beforeH = nextHeight;
}
} else {
w.scrollTop(targetH);
}
}

ｊQueryの下で読み込めば勝手にハイパーリンクにアニメーションが加わります。

イージングを大雑把にした動きになります。

ページの感じが変わるので良かったらどうぞ＾＾

jQueryオブジェクトの比較

jQuery(“#head”)同士が同じ場合の処理をしたい時

思いつく処理は

jQuery(“#head”)ﾂ ==ﾂ jQuery(“#head”)

ですが結果は

false

になります。

先に作られたjQueryオブジェクトと後に作られたjQueryオブジェクトは同じにならないみたいで

この問題を解決するには

jQuery(“#head”).get(0) == jQuery(“#head”).get(0)

とDOM同士を比べることで解決できます。

jQuery　読み込み時に処理を行う

jQueryで読み込みの際に処理を行う処理をよく忘れるのでメモ

$(document).ready(function(){
//読み込み完了時に行う処理
});

//略式
$(function(){
//読み込み完了時に行う処理
});

ちなみにJavaScriptの
document.body.onload

より処理されるタイミングは早いです。