The Trap of Web Design

jQuery で window.onresize = function() { ...} と同様のことをするには、

$(window).resize(function() { ... });

を今日覚えたオレ（笑）

Note [fancybox link Check] をリキッドレイアウトにしてしまって、min-width を使いたくなったので、ソレを IE6- にも適用するための小物スクリプト作り。前にもさんざんやってたけど、ここんとこ業務でリキッドレイアウトすること殆どないので、使う事もなかったのです。リキッドにしない訳はいろいろありますが、最近、980px 固定で文句いわれることだって無いし…。

---

jQuery(function($){
  function ieliquidnwidth() {
    if (IE && version < 7) {
      var cw = document.body.clientWidth;
      var w = '';
      if (784 > cw) {
        w = "784px";
      } else if (1260 < cw) {
        w = "1260px";
      } else {
        w = "auto";
      }
      $('#header, #cover, #contents, #footer').css({
        width: w
      });
    }
  }
  ieliquidnwidth();
 
  $(window).resize(function() {
    ieliquidnwidth();
    setplink();
  });
 
});

実は resize でもういっちょうとある機能をいれてるのですが、自分の環境だと見れないのです。だから、せっかくなので、本編（ここ）にも仕込んでます。それは IE 限定でなくて（どちらかといえば、バグ回避で IE は適用しないほうがいいという…）

IE の判別コードは

var agent = navigator.userAgent;
var IE = apname.indexOf("Microsoft",0) != -1;
if (IE) {
	version = parseFloat(agent.match(/MSIE\s(\d+\.\d+)/)[1]);
}

最近知ったけどこんなのもある。

var IE = /*@cc_on!@*/false;

他のいろんなブラウザ用のコードはまだまだチェック中で終わってませーん。

pre + code のとこ、見やすくしたいということで、最初、SyntaxHighlighter を使ってるのをよく見るのでチェックしてみたけど、ことのほかややこしいのでやめて、次に jquery.chili.js を使って実装してみて、やっぱり重苦しいのでやめて、結局自作して、色のトコだけ prettify.js を使ってるんですが、日本語入るとバグってんなぁ…。

pre { overflow: scroll; } がちょっと、と思うのと、行番号付加と pre-wrap 効かないブラウザでも改行してしまえ、ってことと、複数行の色変更くらいの機能があればということで自前になったんですが、需要はあるのだろうか？

要望あれば、jQuery プラグインとして配布します。スタイル指定をハードコーディングしてるんですが、よいのかしら。

ちょびちょび指示くる作業しながら、最初は、PHPSPOT 開発日誌 から iCal link Calendar に飛び、NP_Calendar 改造して、Archive ページで使いたいと思った（つくっちゃいました）んですが、そのサイトの jQuery 関連のネタが面白くて、文字にグラデーションかかってるやつを解析したので、真似しよう（してみた…けどこれじゃぁねぇ…笑）とおもいながら、Graham Watson for President of the European Parliament のコレデモカコレデモカという jQuery 攻めに惚れて、Thickbox よりも、jQuery fancybox が良い（かえちゃいました）んじゃないかと、チェックをはじめて…

続々フォントサイズ指定手法用に「フォントサイズ可変スライダー」を作ってもみたりもしたんですが、うーむ、このカーソルスライド自体、あんまり操作性よくない気もちょっとする。

いろいろやりたいことあるんですが、仕事します（笑）