スクロール催促ボタンとページトップへ戻るボタンの出し分け

See the Pen GoToTop by Tenderfeel (@Tenderfeel) on CodePen.

某サイトで使っているボタンを要点だけ切り出してみた。

以下が指定された挙動だった:

  • 初期状態は下へスクロールするボタン
  • ファーストビューが消えるくらいスクロールしたらトップへ戻るボタンにする
  • フッターにトップへ戻るボタンを被せない

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

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


直接見る

“[jQuery] ユーザエージェント(userAgent)判別プラグイン” の続きを読む

[CSS3+jQuery] 画像なしでどこまで作れるのか?の限界に(forkして)挑戦 – jsdo.pigg

jsdo.itで今診断テスト作ったら来月末ごろに3DS当たるかもよキャンペーンやってますよ。

それはそれで熱いんですが、私の中でいまブームになってるのは
GeckoTangさんが作ったjsdo.piggのfork祭り(勝手に祭り化)です。

まあとにかくSafariかChromeで実物を見ていただきたい。

jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

かわいい顔してるだろ…。これ画像使ってないんだぜ…?

見た瞬間ティンと来た。

2/24のつぶやき「http://jsdo.it/tsmallfield/counting_sheep2 と http://jsdo.it/GeckoTang/dOv6 合体させたら農場っぽくなりそう」

つぶやいたらtsmallfieldさんが実行してくれた。

背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

全く変更なしで合体させただけなのにこの統一感!シンクロ率半端ない!
この背景も画像ゼロなんですよ。fork元である羊数えるやつではCSSで描かれた動物も見れます。
で、その後「作ってくれる人いたらラッキー」なノリで追加案をつぶやいてみたんだけど、
深夜過ぎた所為か朝見たときforkされてなかったので、辛抱たまらんくなって自分で作ってみた。

UI付けてみた。forked from: 背景付けてみた。forked from: jsdo.pigg – jsdo.it – share JavaScript, HTML5 and CSS

ほらもうなんかアバターSNSっぽい!!!
繰り返しますがここまで画像ナシです。CSS3マジぱねーっす!

全fork元はこちら。

私が追加したものはこれだけ。

  • jQueryでチャットっぽいUIの追加
  • jQuery用のCSSチューニング
  • ふきだしスタイル変更ラジオボタンの追加
  • まばたきアニメーション(CSS3)
  • 口パクアニメーション(CSS3) ←form ミサワ祭り

(あのミサワ祭りがこんなところで役に立つとはw jsdo.it恐ろしい子…!)

UIにはforkされやすいようにjQueryを使いました。
現状まともに見れるのはChromeとSafariだけだけど、CSSだけでアメーバピグとか@gamesみたいな雰囲気になってるのがマジ凄くない?

今後も何かティンときたら追加するつもりでいるのですが、
WebSocketチャットの実装は共用サーバーだと無理だから出来なさそうです。
VPS持ってる方が実装してくれないかなーと思って記事にまとめてみました 😀

WebSocketチャット版jsdo.pigg登場の巻

ginpeiさんがWebSocketに対応させてるよ!

jsdo.piggを乗せてみた forked from: WebSocket触ってみた – jsdo.it – share JavaScript, HTML5 and CSS

これにフキダシとかの装飾がされたらと思うとwktkが止まらなーい!
発言が交互に繰り返されていくなら「吹き出し」風スタイルの方がしっくりしそう。
使われてるWebSocketのAPIサービスは「WebSocket試したいけど自分でサーバー周り用意するのは面倒」という時に便利そうです。

[jQuery] Image Slider/News Ticker Clone

Simple News/Image Sliderみたいに画像を1列に並べて延々横スクロールさせるやつが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] Image Slider/News Ticker Clone” の続きを読む

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

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

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

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

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

“[jQuery]IE6以下で閲覧すると画面左端にアナログと表示させるプラグイン” の続きを読む

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

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

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

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">
//< !&#91;CDATA&#91;
$(document).ready(function(){
	$("#main").jExternalLink();
});
//&#93;&#93;>
</script>

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

“[jQuery]リンクに新しいウィンドウを開くアイコンを自動で追加する” の続きを読む

[jQuery]hrefのURLがフルパスの時だけ別窓を開く

jQuery1.2.6用。別窓開くスクリプトの超簡易サンプル。
aタグを捜査してhrefに書かれたURLがhttpから始まってる場合のみtarget=”_blank”を追加する。

$("a").each(function (i) {
        if ($(this).attr('href').indexOf("http") != -1) {
         $(this).attr('target','_blank');
        }
    });

上のはIEでスルーされたのでwindow.openで分けてみる

$("a").each(function (i) {
        if ($(this).attr('href').indexOf("http") != -1) {
			if(jQuery.browser.msie){
				$(this).attr('onclick','window.open('this.href','status=yes,scrollbars=yes,directories=yes,menubar=yes,resizable=yes,toolbar=yes'); return false;');
			}else{
      		   $(this).attr('target','_blank');
			}
        }
    });

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

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

jQuery1.2.6用。

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

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

特別なことしなくてもイベントが発生した時のマウスポインタの位置を取得することが出来る。
“[jQuery]イメージマップでTooltip表示するサンプル” の続きを読む

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

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

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

“[jQuery]サムネイルクリックで画像変更(+effect)” の続きを読む