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

by

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”)みたいな書き方で、挿入先の要素を指定する。

  • site:
    クリックした時ジャンプさせるサイトを指定する。デフォルトは”STOP”
    “STOP”→stop IE6 campain
    “END”→end 6
    “FF”→Firefox ダウンロード
    “http://example.com”→URL挿入
  • title:
    アンカーのタイトル。デフォルトはnull
  • text:
    アイコンの中身。デフォルトはテキストで”アナログ”
    html形式も有効なので画像も使えます
  • message:
    マウスオーバー時に入れ替えるメッセージ。デフォルトは”今すぐバージョンアップ！”
    これもタグが有効です。
  • top:
    画面上端からの位置。数値で記述する事。デフォルトは20
  • right:
    画面右端からの位置。数値で記述する事。デフォルトは20
  • delay:
    fadeIn()のduration。数値が少ないほど早くなります。単位はmsでデフォルトは300

“jAnalogIE” をダウンロード

WTN-jAnalogIE.zip – 1665 回のダウンロード – 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オフでは動作しませんｗ

「[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン」への6件のフィードバック

  1. こんばんわ、ひろです。　またまた　質問してみます。
    夜な夜な、IE6の訪問者対策考えてまして、オォォ～!!!　って記事にありついたら
    Tenderfeelさんの記事でした　（笑）　やっぱすげーっす！Tenderfeelさん。

    サイトでcssにposition 「fixed」とか使ったり（jQueryで今の所制御）、
    IE6での表示がビミョーだなぁ～なんて
    箇所が何箇所かあるんですけど、
    IE6での訪問者をなんとか上位バージョンに誘導させたく、
    IE6以下で自分のサイトに訪問したら、「アップグレードしてください！」みたいな
    コメントを表示させたく、またまた悩んでおりました。

    こういうのって、応用すれば、例えば
    自分のサイトにIE6で訪問された時に、画面を「ごめんなさい。あなたのお使いのブラウザは
    IE6ですね。 IE6ではこのサイトを見ることは推奨できません。
    ＩＥをバージョンアップさせるか、FireFoxの最新版をダウンロードして、再度訪問してください
    IE8(リンク) Firefox最新バージョン（リンク）」
    みたいに表示させる事って可能なんでしょうか？

    こういうのを表示させるのって、やっぱりサーバー側での制御なんでしょうか？
    （ちなみに私はサーバーサイドの知識はゼロです　笑）

    返信

  2. 褒めても何も出ませんよ 😀

    このプラグインの冒頭に次のような記述があるのですが


    if ( $.browser.msie && $.browser.version !="7.0" && navigator.appVersion.indexOf("MSIE 8.")==-1)

    このif文を利用すれば、IE8以外のユーザーには画面を表示させないという事も可能です。

    Javascriptだけで出来ますが、オフにしているユーザーにはスルーされます。
    未だにIE6を使っているユーザーがオフにしている可能性は限りなく低いと思われるので
    鬱陶しい表示を出してバージョンアップを促すのは効果ありそうですが、
    二度と訪問されなくなる可能性もある諸刃の剣…IE6ユーザーは要らないという心構えで挑んだほうがいいかもしれませんｗ

    返信

  3. 褒めても何も出ませんか。　てか、出てますよ！

    そっかぁ～、なるほど　なるほど。
    二度と訪問されなくなる可能性もあるってのが、怖いですねぇ。
    てか、それはダメだーぁー。

    んー。。。　一度、上記if文でどんな感じになるか見てみてから
    再度、検討してみます。

    あっ、それとブログ作ってて　またまたなんですが、
    もう1つ技術的な事でお聞きしたい事ありまして、　ネット上で調べて
    色々やってみたんですが、うまくいかない事なんですが、
    周りに詳しい事を聞ける人がいないんで（皆無なので）、Tenderfeelさんに一度　「こんな事って
    出来るんでしょうか？」事を聞いてみようと思いまして、

    明日の朝までには、内容をまとめて
    Tenderfeel さんのメアドにメール（添付付き）でお送りしますので、
    お時間ある際にでも、見ていただき
    何かしらアドバイスいただければと思います。
    （無理言って、スイマセン。。。）

    とりあえず、今日の夜中から内容をまとめようと思いますので、
    明日の朝には必ずメールが届いてると思います。
    （グダグダですいません。。。）

    よろしくお願いします。

    返信

  4. 旧ブラウザの人へのアプローチ方法はいろいろあると思いますが、
    あまり押し付けがましいと逆効果になりそうなので加減が難しい所ですね。
    中にはタブが使い辛いという人もいますしｗ

    質問については中身を見てからメールでお答えします 😉

    返信

  5. 通りがかりです！
    IE6の面白いですね。
    いろいろなサイトでIE6死ねというものをやっていますが、先ほど為させて頂いてひとつ修整箇所があったのでご報告させて下さい。

    クリックすると、http://www.stopie6.org/
    に飛びますが、現在何も無くなっている状態なのでそれを修正した方がいいかと思いました。
    なお、個人的にはIE6とIE7の排除がいいんですがね。どっちも劣悪なブラウザーなので。

    返信

  6. すっちー さん＞
    ご指摘ありがとうございます。
    近々jQueryの海に沈む予定があるので、その時にバージョンアップを試みようと思っています。
    IE7については激しく同感です。2010年中は様子見をしていましたが、IE8の浸透が著しいのでもう要らない子扱いしてもよさそうです。

    返信

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。