jQueryのイベントハンドラでreturn falseするとイベントのバブリングが止まる - Webtech Walker
例えばjQueryでスムーズスクロール的なのを実装したとして、a要素のデフォルトの機能を止めるために以下のようにreturn falseってするとイベントのバブリングまでとまるよという話。 $(function() { $('a[href*=#]').click(function() { // スムーズスクロールの処理 ... return false; }); }); つまり $(function() { $('a[href*=#]').click(function(ev) { ev.preventDefault(); ev.stopPropagation(); // スムーズスクロールの処理 ... }); }); としたときと同じ挙動になる。return falseしてるコードは、デフォルトの挙動を止めるのは意図してるけど、イベントのバブリングまで止めるのは意図してない場合が多いんじ
郵便番号から住所を検索するJavaScriptの再々発明 - Webtech Walker
先日勉強会で@kotarok先生が見せてくれたjQuery.zip2addrを元に車輪の再々発明（kotarokさんのが再発明と言っていたので）してみました。 jQuery.zip2addrはGoogle日本語入力APIを利用して郵便番号から住所を検索するという画期的アイデアのスクリプトなんですが、これのjQueryとかHTMLに依存してない版です。 DEMO hokaccha’s js-zip2address at master - GitHub zip2address('150-0001', function(address) { address.all; //=> 東京都渋谷区神宮前 address.pref; //=> 東京都 address.city; //=> 渋谷区神宮前 }); ハイフンはあってもなくてもいいです。郵便番号が間違ってたりするとaddressにはundefin
iPhoneやiPadでHTMLのソースを見るのつくった - Webtech Walker
i-sourceviewというのをGAE/Pythonでつくってみました。 i-sourceview hokaccha’s i-sourceview at master - GitHub 同じようなことはアプリとかJS(Bookmarklet)でできるんですけど、アプリだと別途立ち上げが必要だったり、JSだとDOCTYPEが取れなかったりシンタックスハイライトがなかったりします。なのでサーバー側からリクエストしてHTML取得してシンタックスハイライトしたり行番号もつけてみたりしました。 それでつくってみたものの、認証がかかってるページがとれなかったり、JSで書き換えた後のソースが見たい場合もあるなあと思って結局JSで取得するのも用意しました。この二つを併用すれば大体ことたりるかなと。 シンタックスとかはchromeのソースビューに合わせてみました。 こんな感じになります。
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
meca.js
meca.jsとは meca.jsはマークアップエンジニアのコーディングを補助するためのjavascriptです。画像のロールオーバーやIE6の透過png対応などを実装しており、それぞれの機能を簡単にon/offできるので、使わない機能は無効にしてたりできます。その他にも、ターゲットになる要素のセレクタを設定でたりするのである程度柔軟に対応できます。（→元エントリー） 使い方 jQueryとmeca.jsを読み込みます。meca.jsの一番上の方に設定を書いてあるところがありますので、そこを自分の好きな設定に書き換えて下さい。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="meca.js"></script> ページ毎に設定を変更する meca.js本
CSSのデバッグ方法 - Webtech Walker
CSSはプログラムみたいに、エラーがあるからといって、動作が止まったりしません。また、CSSのソースにエラーがなくても思うように動作しないことがあります。そういう場合にどうやって原因を突き止めて修正するか、僕なりのやり方を紹介します。 要点はこんな感じ。 borderを指定してみる display:noneを指定してみる !importantを指定してみる xml宣言を取ってみる（IE6で標準モードにする） widthを指定してみる（hasLayoutをtrueにする） ソースを削除してみる ネットで調べてみる borderを指定してみる 背景やborderをしなければ、基本的にボックスは無色透明なので、どこからどこまでが該当するボックスなのか、わからなく場合があります（僕だけ？）。 ボックスの領域を確認するときは下記のようにborderを指定して確認します。僕の場合、目立つように赤線を表
jQueryのプラグイン、jQuery_Autoで画像のロールオーバー - Webtech Walker
Home Archive jQueryのプラグイン、jQuery_Autoで画像のロールオーバー jQueryのプラグイン、jQuery_Autoで画像のロールオーバー 2007年06月21日 category:javascript Comment(0) Trackback(1) CSS HappyLifeさんでjavascriptによるイメージロールオーバーの記事を書かれていたので、触発されて以前から書こうと思っていたjQueryネタを書きます。 ロールオーバー｜CSS HappyLife jQueryならロールオーバーのプラグインくらいあるだろうと思って探していたら、jQuery_Autoというものを見つけたので使ってみました。 今回はロールオーバーのみ説明しますが、簡易なタブも作成できるようです。 このプラグインの利点はclass指定でロールオーバーを指定す
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
