textareaの中で選択した文字列の前後に、任意の文字列を挿入するJavascript。流れとしては、まず選択領域の始点と終点の位置を取得し、その境界を基準にしてtextareaの文字列全体を分割。そして加工して組みなおす。

始点と終点の位置は、Mozillaおよび（最近の）Opera/Safariでは容易に取得できる。問題はIE。IEのTextRangeオブジェクトは、後のコンテクストを見て処理を行うことが難しいため、特にtextarea内の文字列を操作したい場合は厄介です。

逆に言えば、始点と終点の位置さえ判ればなんとかなるので、いろいろ試してみてなんとか形に出来ました。

»続きがあります

イベントオブジェクトの扱いはブラウザによって異なり、利用には注意が必要です。Internet Explorerでは「window.event」、他のブラウザではイベントハンドラにイベントオブジェクトが渡されます。

「event」オブジェクト自体はSafari 2でもOperaでも存在し、Internet Explorer同様にアクセスすることができます。ただしFirefoxはダメ。（仕様上はFirefoxの処理が正しい）

なので実際に利用する際には、イベントオブジェクトの有無に応じてInternet Explorerと他ブラウザで処理を分ける必要があります。また、イベントオブジェクトで扱われる各種プロパティも、互換性のあるものはかなり限られます。特にイベント発生時の座標値には注意が必要。

»続きがあります

マウスポインタのページ内座標を取得するJavascript。
Opera 9、Safari 1.2、IE 5-7、Firefox 2で確認済み。

»続きがあります

あんまり綺麗な方法じゃないのだけど、5分でできる。
（サンプルファイル）

1. #fixedElement {
2. position: fixed;
3. top: 100px;
4. left: 80px;
5.  
6. /* IE5 later && javascript-on */
7. position: expression('absolute');
8. top: expression(documentElement.scrollTop + 100 + 'px');
9. left: expression(documentElement.scrollLeft + 80 + 'px');
10. }

note: max-widthとかにも応用できそうね。ただ、ソースごっちゃになるから長めの処理は書かないほうが良いかも。

参照: WebFX, CSS Expression Optimization

»続きがあります

• Lucky bag::blog, line-height の値には単位なしが良いとされる理由
• TRANS, YUI Fonts CSSのline-height: 1.22em;の謎を解く！

「line-height」の表示結果に関して、単位があるかないか（「line-height: 1.2;」なのか「line-hieght: 1.2em;」とするか）、そして全称セレクタから指定するかどうかで、得られる結果が微妙に違うと言う話について。

とりあえず検証してみました。以下のテスト・ファイルをどぞ。

• bodyにline-heightなし
• bodyにline-height（単位なし）
• bodyにline-height（単位あり）

• bodyに全称セレクタ＋line-height（単位なし）
• bodyに全称セレクタ＋line-height（単位あり）
• bodyに全称セレクタ＋line-height（単位あり）＋line-heightはbodyだけ

• 全称セレクタ＋line-height（単位なし）
• 全称セレクタ＋line-height（単位あり）
• 全称セレクタ＋line-height（単位あり）＋line-heightはbodyだけ

»続きがあります