2012年3月30日金曜日

jQueryでgetElementByIdを書くときの注意

HTML5のcanvas機能を使おうと思って、以下のように書いてみたけど動かなかったのです。 そんなオブジェクトないからそんなメソッドありません、て感じのエラー付きで。 var canvas = $('#drawCanvas');
var context = canvas.getContext('2d');
で、こう書いてみたらちゃんと動く。 var canvas = getElementById('drawCanvas');
var context = canvas.getContext('2d');
なんで? getElementById('drawCanvas')はjQueryなら$('#drawCanvas')じゃないの? と思ってぐぐったら、こういうことでした。
jQueryで「$("#id")」と書くと、返ってくるのはjQueryのObjectで、getElementByIdで返ってくるような生のElementオブジェクトは取れない。
生のElementを取ろうと思った場合は「$("#id")[0]」と書くか「$("#id").get(0)」と書けば良いらしい。
jQueryでdocument.getElementByIdと等価を取る : mwSoft blog

で、こう書いてみたら確かに動いた。 var canvas = $('#drawCanvas')[0];
var context = canvas.getContext('2d');
先日スクロールバーの操作の所でなんで[0]が要るのかわからなくて悩んでたのも、これが原因だったんですね。すっきりした!

jQueryのセレクタに変数を使うメモ

parts = $(this).val();
$('img[src*= ' + parts + ']').show();
変数名「parts」を除いて「''」で括るだけではうまくいかなくてどうしようかなーと思ったんだけど、「+」で連結しないと一つの文字列にならないから駄目だったんですね。

2012年3月19日月曜日

rubyCGI設置時のメモ

無料レンタルサーバー等で、rubyCGIの拡張子を「cgi」にしないといけない場合、拡張子を変えるのは最初に直接呼ばれるファイルだけで良い。 

start.cgi (require test)
test.rb
test2.rb



て感じで。requireの記述も拡張子なしのそのままでOK。

これがわかってなくて、全ての拡張子「rb」を「cgi」にしたら動かなくって難儀した。
こんなことで引っかかるのは自分ぐらいかもしれないけど、メモ。

2012年3月16日金曜日

jQueryでスクロールバー操作のメモ

jQueryで id="log" なテキストエリアのスクロールバーを常に最下部にする。というのをやろうとして詰まった時のメモ。
 JavaScriptの場合
log = document.getElementById('log');
log.scrollTop = log.scrollHeight;
なんだけど、jQueryで
$("#log").scrollTop($("#log").scrollHeight()); とやると、 scrollHeightが取れなくて駄目でした。
jsdo.itで見かけたやり方でやってみたらうまくいったのでメモ。
$("#log").scrollTop($("#log")[0].scrollHeight); うまくいったものの、何故 [0]が必要なのかよく理解できてません。
#logテキストエリアのscrollHeight って複数ある可能性があるのかな……。
$("#log").scrollTop($("#log").prop('scrollHeight')); propでもちゃんと動きました。
$("#log").scrollTop($("#log").attr('scrollHeight'));  attrでは駄目でした。
jQueryのバージョンは1.7.1です。

 追記

理由わかった! Kai-coo Plog: jQueryでgetElementByIdを書くときの注意

2012年3月14日水曜日

メモ

jQueryでHTMLのフォームやリンクのクリックを無効化(画面遷移防止)

$("form").submit(function () { return false; }); これやってなくて、Ajaxでpostするのにエンターや送信ボタン押すと画面リロードされてしまって、Ajaxの意味ないやん!てなってた。
return false; の部分は、event.preventDefault();でも同じ。

CSSのみで吹き出しを作るのに参考になったページ

Pure CSS speech bubbles
How to Create CSS3 Speech Bubbles Without Images

JavaScriptのsetTimeoutとclearTimeoutで詰まった時に参考になったページ

新JavaScript入門 10. フロー制御

2つの吹き出しを時間差でフェイドアウトさせるのに、「setTimeoutに変数名を付ける」「その前にその変数を定義しておく」というのがわかってなくてタイミングがぐだぐだになったりそんな変数定義されてねーよって怒られたりした。数週間前にドットインストールのJavaScript講座でやったはずなのに綺麗さっぱり忘れてて自分の鳥頭ぶりにびっくりした。