jQuery

[jQuery] ユーザエージェント(userAgent)判別プラグイン

by

ユーザーエージェントからブラウザの情報をピックアップしてクラスを付与するjQueryプラグインを作ってみました。
パソコン・スマートフォンの他に、JavaScriptの使用が可能だと思われるゲーム機・テレビ・ガラケーのブラウザも判別対象としています。


直接見る

続きを読む

[jQuery] Image Slider/News Ticker Clone

by

Simple News/Image Sliderみたいに画像を１列に並べて延々横スクロールさせるやつがjQueryで欲しかったんだけど
検索してもそういうのが見つからなかったからクローン作った。

見た目と動きはオリジナルと大体同じです。

The Code

ターゲットに指定できるのはリスト要素（ULまたはOL）限定です。リスト（LI）の中身は問いません。

$(document).ready(function(){
$('#target').imageSlider();
});

#target {overflow:hidden;}

親要素もしくはwrap要素にoverflow:hiddenしておくこと。
ターゲットに指定された要素にはリストの横幅の合計がセットされます。
表示範囲を限定したい場合はプラグインが作成するwrap要素をoverflow:hiddenにしてwidthを設定してください。

Option

className (string)
wrap要素のクラス名。デフォルトはslider-wrapper
speed (number)
スクロールのduration。デフォルトは3000
easing (string)
スクロールのeasing。デフォルトはlinear

続きを読む

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

by

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

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

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

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

続きを読む

[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する

by

殴り書きは続く…AutoExternalLinkのjQuery版。mootools版の同タイトル記事とほぼ同じです。
jQueryは馴染みが浅いのでもっさり感漂う残念なソースになってます。
自分がサイト組む時は外部リンクに大抵relかclass属性を付与するんで、relかclass持ちにだけ追加するライト版も書いてみた。
ダウンロードはスクリプトファイル２種と、jQuery版に修正したAutoExternalLinkプラグインファイルのセット。
元ソースからの入れ替えとかは自己責任でお願いします。

wordpressプラグイン本体の改造はこちらの記事で解説していますが、
zipに修正済みのプラグインファイルも突っ込んどいたので上書きでおｋ。動作デモはこのブログそのものです。

jQueryプラグインなので普通のサイトでも使えると思います。
varは1.2.6以上対応です多分。（1.2.6と1.3.2でしか確認してない）

Header

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.jExternalLink.plugin.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
	$("#main").jExternalLink();
});
//]]>
</script>

上記指定で#main以下にあるaタグを全てチェックします。

続きを読む

[jQuery]イメージマップでTooltip表示するサンプル

by

「イメージマップのホットスポットにマウスオーバーしたら説明表示出るように出来ない？」って言われて書いたやつ。
非表示にしてるブロック要素を表示してるだけなので、画像とかテキストとか割とフリーダムに出せる。

jQuery1.2.6用。

jQueryのマウスイベントには以下プロパティ提供されていて

  • pageX/Y ： ページの左上を0としたマウスポインタの位置
  • clientX/Y ：　ブラウザのドキュメント表示領域を0としたマウスポインタの位置

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。

続きを読む

[jQuery]サムネイルクリックで画像変更（+effect）

by

前にmootools1.2で作ったのと似たものをjQueryでも書いたので晒します。
このスクリプトは画像切り替えだけです。

動作にはjQuery1.2.6が必要です。

続きを読む