Archive: 2008

ブロック要素の高さを揃える

高さというより下端だけど。

equal-bottom-nに対応する要素の下端を揃える。

サンプル

$ (function () {
  for (var i = 1; $ (".equal-bottom-" + i).length; i++) {
    var block = $ (".equal-bottom-" + i);
    var height = 0;
    block.each (function () {
      height = Math.max ($ (this).offset ().top + $ (this).height (), height);
    });
    block.each (function () {
      $ (this).height (height - $ (this).offset ().top);
    });
  }
});

続きを読む

2008/12/05 12:35 | code | コメント (0)

なんちゃってvalign

やはり出来ると便利なので。

サンプル

$ (function () {
  $ ("div.grid.middle > div.column").addClass ("middle");
  $ ("div.grid.bottom > div.column").addClass ("bottom");
  $ ("div.grid div.column").filter (".middle, .bottom").each (function () {
    var height = 0;
    $ (this).siblings ().each (function () {
      height = Math.max (height, $ (this).height ());
    });
    var margin = Math.max (height - $ (this).height (), 0);
    $ (this).css ("margin-top", ($ (this).hasClass ("middle") ? Math.floor (margin / 2) : margin) + "px");
  });
});

続きを読む

2008/12/04 08:01 | code | コメント (0)

テーブルのセルの中をいい感じに

<td><ul /></td><td>ほげほげ<ul /></td>、両方ともul:first-childになるのは困ることが多いので:first-node疑似クラスを使えるようにする。

:-moz-first-nodeと同じ。

サンプル

jQuery.extend (jQuery.expr [":"], {
  "first-node": function (a) {
    var b = a.parentNode.childNodes;
      for (var i = 0; i < b.length; i++) {
      var c = b [i];
      if (c.nodeType == 1) {
        return c.parentNode.getElementsByTagName ("*")[0] == a;
      }
      if (jQuery.trim (c.nodeValue)) {
        return false;
      }
    }
    return false;
  }
});
$ (function () {
  $ ("td > :first-node").addClass ("first-node-of-td");
});

2008/11/18 16:32 | code | コメント (0)

横幅不定のブロック要素を中央・右揃え

要するに横幅を自動で設定してやるだけ。

サンプル

$ (function () {
  $ (".left, .center, .right").each (function () {
    $ (this).css ({
      display: "block",
      float: "none",
      width: $ (this).css ({ display: "inline-block", float: "left" }).width ()
    });
  });
});

続きを読む

2008/11/15 11:00 | code | コメント (0)

ダイアログを出さずにウィンドウを閉じる

window.open以外の方法で開いたウィンドウをwindow.closeで閉じるときに「ウィンドウは、表示中の…」というダイアログを出さずにウィンドウを閉じる。

将来にわたって問題ないのかどうかはあやしい。

サンプル

window._close = window.close;
window.close = function () {
  (window.open ("", "_top").opener = top)._close ()
};
<a href="javascript:window.close ();">閉じる</a>

2008/10/13 16:29 | code | コメント (0)

Categories

Archives

About

こんにちは、上山根 祐輔 (かみやまね ゆうすけ) です。東京を拠点に活動しているフリーランスデザイナーです。