国民宿舎はらぺこ 大浴場

• javascript - CSSをいじくる (404 Blog Not Found さま)

実は似たようなギミックを使って、UI の実験をしていたりしますｗ

• 京葉チャット サンプルページ
• 現時点のソースファイル

今のところ、以下のブラウザにて動作確認済みです。(すべて Windows XP sp2 環境下)

• Internet Explorer 6 (スクロール時のウィンドウの動きが微妙だったり、右上のトグルボタンの形が微妙だったりします ^_^;)
• Internet Explorer 7
• Firefox 2
• Opera 9 (ウィンドウをドラッグ移動しまくっているとあっさりクラッシュしてしまう模様。原因は不明。。。)

なお、サンプルページに書かれている内容はドラフトというか適当というかかなりデタラメなので現時点では信用しないでください。ｗ

ページの左下に半透明のウィンドウらしきものが表示されると思います。タイトルバーらしきものをドラッグすると、ブラウザ内でドラッグ移動できます。

ウィンドウらしきものの右上のボタンを押すと、ウィンドウが大きくなって不透明化し、フォームが表示されます。この状態で、ウィンドウの右下隅辺りにマウスカーソルをポインタすると、マウスカーソルの形状が変わります。ここを掴んでドラッグすると、ウィンドウのサイズを変更できます。

この、ウィンドウの「移動」と「サイズ変更」に、document.styleSheets[0] への変更を用いています。詳細は、プログラム中の ChatWindowIf オブジェクト、特に ChatWindowIf.prototype.setupStyle メソッドと ChatWindowIf.prototype.updatePosition メソッド、そして ChatWindowIf.prototype.setPosition メソッド辺りを参照してください。

以下、dankogai さんの公開されているサンプルについて。手元の IE7 ではいずれのボタンも動作しません。恐らく以下が原因ではないかと思われます。

• すべての関数で cssRules を取得する箇所で、以下のように記述されている行を、

        var rules = stylesheets[s].cssRules;
  

  以下のように書き換えてみて下さい。

        var rules = stylesheets[s].rules || stylesheets[s].cssRules;
  

  ややこしいことに、Windows 系 IE のみ、cssRules ではなく、rules となっています。
• StyleSheet オブジェクトに対して、Windows 系 IE では、deleteRule メソッドは使用できないようです。また、insertRule は、Windows 系 IE では代わりに addRule を使用せねばなりません。CSSRule オブジェクト自体は、cssText プロパティは読み取り専用ですが、style プロパティ下の各プロパティへは書き込み可能ですので、セレクタが既に存在するスタイルへの変更の場合は、現在値との差分を見た上でスタイル要素ごとに分解して設定する、といったような面倒くさい実装になるんではないかと思います。。。(あるいは addRule メソッドがよしなに上書きしてくれるのかもしれませんが、定かではありません…そのうち試して追記するかも)

参考テキストとしては、amachang さんご提供のこちらなんかいかがでしょうか? (ちょっと横に長くて大変だけどｗ)

おいらが書いているプログラムについても、お気づきの点等あればご指摘いただけると幸いです m(_ _)m 。つか、Mac IE と Safari が試せる環境欲しいなぁ～。。。(おやくそく)