prog*sig

■13.0 Introduction

Webページのスペースの決定要因を学ぶ。
ページフローにある要素によってスペースは決まるが、position: absolute;のようにページフローから外れた場合は影響を与えない。

■13.1 Determining the Area of the Web Page

ウィンドウページのwidthとheightを求める。

function size() {
    var wdth = 0;
    var hth = 0;
    if (!window.innerWidth) {
        wdth = (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);
        hth = (document.documentElement.clientHeight ? document.documentElement.clientWidth : document.body.clientHeight);
    } else {
        wdth = window.innerWidth;
        hth = window.innerHeight;
    }
    return {
        width: wdth,
        height: hth
    };
}
var viewPort = size();
var w = viewPort.width;
var h = viewPort.height;

CSS3はCSSOM View Moduleというもので標準を決めようとしている。

■13.2 Measuring Elements

要素の高さを取得するにはgetBoundingClientRectを使う。

var height = 0;
var rect = document.getElementById("it").getBoundingClientRect();
if (rect.height) {
    height = rect.height;
} else {
    height = rect.bottom - rect.top; // derive height
}
alert(rect.height);

このメソッドはIE5からきてCSSOMで標準となろうとしてる。
要素に対して実行するとClientRect objectを返す。
ClientRect objectにはtop, bottom,right,leftが入っていて、Firefoxだとheightとwidthも入っているため計算の必要はない。
要素の大きさはborderまでのサイズとなりmarginは含まれない。これはCSSでも同じ
text->padding->border->margin Chapter 2　ハウ・トゥ編-Theme 010 - prog*sig

■13.3 Locating Elements in the Page

要素の位置を取得
同じようにgetBoundingClientRectでleftとtopをとれば、座標となる。

function positionObject(obj) {
   var rect = obj.getBoundingClientRect();
   return [rect.left,rect.top];
}

■13.4 Hiding Page Sections

visibility and displayの違い。
visibilityは見えなくても他の要素に影響与える(スペースを持ってる)
display:noneは要素のスペースを取り除くのでリフロー計算が起きる。

■13.5 Creating Collapsible Form Sections

必要なものだけ表示して後は折りたたんでおきたい。
clickでdisplayを変化させればいいでないの

■13.6 Adding a Page Overlay

overlayする要素を作りたい。

.overlay{
   background-color: #000;
   opacity: .7;
   filter: alpha(opacity=70);
   position: absolute; top: 0; left: 0;
   width: 100%; height: 100%;
   z-index: 10;
}

サンプルがシンプルだけど結構良い感じだ。

• Overlay

■13.7 Creating Tab Pages

Tabデザイン
タブはよく使われて有効なデザインだが、ルールがある。
• The highlighted tab is changed to the one just clicked.
• The currently displayed page is hidden or set to nondisplay.
• The clicked tab’s style is changed (so it’s highlighted).
• The associated content page is displayed.
要はクリックできるものは分かるようにする、現在のタブがどれかを分かるようにする。
これ地味に難しい。色分けだけだと見分けで判断できない。

■13.8 Creating Hover-Based Pop-up Info Windows

マウスオーバーでポップアップをさせる。
要点を抜き出すと、ポップアップさせたい要素に"mouseover"イベントを付けて、
そのイベントではXHRで情報を取得して、overlay要素をcompPosで取得した位置を元に入れる。
また"mouseout"イベントでは追加した要素を取り除く処置を入れる。

// compute position for pop up
function compPos(obj) {
    var rect = obj.getBoundingClientRect();
    var height;
    if (rect.height) {
      height = rect.height;
    } else {
      height = rect.bottom - rect.top;
    }
    var top = rect.top + height + 10;
    return [rect.left, top];
}

要素位置の章だった。