WebTecNote

[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン

Tenderfeel

jQuery練習ついでにプラグイン作って便乗。元ネタはCSS Happy Lifeさん。
最近テレビの画面左端にアナログと出るようになってますが、
あのウザい表示をIE6使ってるときにやろうじゃないか、というものです。

このプラグインはスクロールしても追いかけて常に画面左端に表示し、
さらにアイコンへマウスオーバーするとメッセージを入れ替えて
ユーザーにしつこくバージョンアップを促しますｗｗｗ

以下デモはＩＥ以外だと何も表示されません。
View Demo »

jQuery ver 1.2.6以上用プラグインです
jQuery.browserのサポートの関係で1.3以上が必要でした。

Usage

ヘッダに以下ソースを書く。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.jAnalogIE.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	$("body").jAnalogIE();
});
//]]>
</script>

上記記述でbody直下にdiv要素を挿入します。

Options

Element.jAnalogIE({options});

Elementは$(“body”)みたいな書き方で、挿入先の要素を指定する。

“jAnalogIE” をダウンロード

WTN-jAnalogIE.zip – 1420 回のダウンロード – 21.98 KB

補足

アナログアイコンのhtml構造は次の通り。（デフォルト）

<div id="analog"><a href="http://www.stopie6.org/" target="_blank" title="stop IE6 campain">アナログ</a></div>

上記要素を指定した要素の直下に挿入します。
その時、syle属性でposition・top・rightプロパティを直接要素に指定します。

スクロールイベントが発生した際にstyle属性を変更するため、
filterなどのプロパティが反映されなくなることがあります。
75行目付近の以下ソースがそのCSS指定部分です。

icon.css({"top":size,"right":options.right + "px"});

スクロールで消えてしまうCSSは上記部分を変更してください。

当然ながら、javascriptオフでは動作しませんｗ

モバイルバージョンを終了