jQueryとdocument.getElementByIdの違い

今まで、$('#header')とdocument.getElementById('header')は、等しいと思っていたのですが、違う事が判明。$('#header')では、jQueryで扱えるオブジェクトだけを取得するようです。

等しく取得するには、

$('#heaer').get(0)

か

$('#header')[0]

とすると良いようです。

かなりこれで詰まりましたので、メモを。

HTTPの基本はここで勉強

Web制作していたら必ず耳にするであろうHTTP。知らなくても大丈夫だけど、知ってるとなんかかっこいい。そんな感じのするHTTPですが、Web担当者Formさんで出されている記事が非常にわかりやすかったのでその紹介です。
http://web-tan.forum.impressrd.jp/e/2010/01/12/7156

HTTPヘッダー情報は、Firefoxなら「Live HTTP Headers」が便利です。
https://addons.mozilla.org/ja/firefox/addon/live-http-headers/

Live HTTP Headersインストール後に、Firefoxのブラウザ上部のURLが表示されている部分の横にあるアイコンをポチッと押して、「詳細を表示」も押して表示されるウィンドウで、ヘッダが追加されているので、それを表示すると、ページのやり取りだけが見れます。（Live HTTP Headersだけで見ると画像のやりとりとかも見れてしまうので。。たぶん正規表現とかで除外できると思いますが）

なんかこういったちょっとした裏側を知ると、出来るやつになった気分だけ味わえます。w

Firefoxのズーム縮小によるレイアウト崩れ

あるスタッフからFirefoxで見たら表示が崩れてるーという報告を受けました。

調べてみるとどうやら、表示→ズームの文字サイズだけを変更するのチェックが入っていない状態で縮小する（画像も全て縮小されるモードです）とレイアウトが崩れる箇所があったようです。

<table>
  <tr>
    &$lt;td><dl>
     <dt><img (中略) width="100" /></dd>
     <<dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
    </dl></td>
  </tr>
</table>
※dt、ddはfloat:leftで横並び

こんな感じで、DIV要素事態はtd要素内にピッタリと設置されていました。

色々調べるとどうやらFirefoxの仕様上のバグのようで（たぶん）。
そもそも画像なんかも小さくなり、普通の状態では無い見方をしているので、無視してやりたい気持ちをぐっと抑え、方法を考えました。
なにやら、1pxの余裕を作ると大丈夫なようですが、この部分は色々インパクトがでかい部分だったのであんまり変更することができず、断念することに。
ただ、最初は一回目の縮小で段崩れを起こしていたのですが、それを3回縮小するぐらいまでは耐えうる軽減策を見つけました。

<table>
  <tr>
    <td><dl>
     <dt><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd><img (中略) width="100" /></dd>
     <dd style="width:99px;"><img (中略) width="100" /></dd>
    </dl></td>
  </tr>
</table>

最後のdd要素に、中のimgより1px小さい数字を掘り込みます。通常での表示も大丈夫ですし、若干の縮小には耐えれました。

なんかすっきりしない方法ですね。。
そもそも画像も縮小するような変な見方してんじゃねぇ～よと心の中で叫びながら、とりあえずでしのいでみましたという心のメモ。

チェックボックスのチェックが外れた時

チェックボックスのチェックが入ると、その名前と値が飛んできますが、チェックボックスのチェックが外れてた時（外れているもの）は、名前すらとんでこないのですね。

これに気づかずかなり悩んでました。
それならそれでPHPでの書きようがありますが、もっと簡単な解決策がありました。

<form action="" method="post">
<input type=hidden" name="check" value="0" />
<input type=checkbox" name="check" value="1" />
</form>

HTTPパラメータは同名の場合は、最後のパラメータを送信するという仕様のようで、その仕組みを利用し、同名のhiddenを用意することでチェックが入ってなくてもhiddenのデータを受け取るので、簡単に判定できるようになります。


参考：CakePHP guide

JavaScriptでGET変数を取得する

ちょこちょこJavaScriptでGET変数を取得する事があるので、メモメモ。

function get_getvariable (matchStr) {
  if (document.location.search.length > 1) {  //【1】
    var tmp = ''
    var parm = document.location.search.substring(1);  //【2】
    parm = parm.split('&');  //【3】
    for (var i=0; i      parm[i] = parm[i].split('=');  //【4】
    }

    /* 一致パーツを検索 */
    for (var j=0; j      if (parm[j][0] == matchStr) {  //【5】
        tmp = parm[j][1];
      }
    }
    if (tmp != '') {
      return tmp;
    } else {
      return false;
    }
  }
}

色々解説です。
【1】そもそもGET変数があるのかをチェック
【2】URLのGET部分を「?」を削除した状態で取得
【3】取得したURLを「&」区切りで、配列として格納
【4】さらに「=」区切りで、連想配列として取得
【5】所得したい変数名と一致する値を検索
て感じです。


http://www.hogehoge.com?aaa=000,bbb=0というURLで「aaa」の変数を取得した場合は、

alert(get_getvariable("aaa"));

とすれば、その値を返します。

もっとキレイなやり方があるのかもしれませんが、とりあえずこんか感じで行けます。