Home > > 他人のFlashを勝手にjsで真似してみたらなんかいろいろ勉強になった

[PR]

2024-04-25

Share on Tumblr

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

Comments:

Trackback+Pingback:

Listed below are links to weblogs that reference: [PR] from Born Neet

Home > > 他人のFlashを勝手にjsで真似してみたらなんかいろいろ勉強になった

Home > JavaScript > 他人のFlashを勝手にjsで真似してみたらなんかいろいろ勉強になった

Newer
Older

他人のFlashを勝手にjsで真似してみたらなんかいろいろ勉強になった

2007-11-25
JavaScript

Share on Tumblr

昨日の続き。はまったこととか、参考にした記事とか。
本編（？）では余計なことに時間かけすぎて、プログラミング的なことが書けなかったので…。

なんだかんだで結構勉強になりました。

興味のある人はどうぞ。

[改行されない…（Firefox）]

まずはまったのは、firefoxで●を入れたspanが改行されないという問題。

BugTrack-Fx2/54 - もじら組 Wiki にもあるし、バグっぽい？
ってことで、float:left;（必然的にdisplay:block;も）で応急処置…と思いきや、Element.style.float = 'left';ってやっても効かない！？

どうやら、

Element.style.styleFloat = 'left';	//IE
Element.style.cssFloat = 'left';	//Firefox

てやらんと駄目らしい。
（UchのX40記: [JavaScript]DOM Elementのstyle属性のfloat）

結局、 Firefoxで長い半角文字列が折り返されない（改行されない） -OKWave にある、（ゼロ幅スペース文字というらしい）というのを挿入することにした。（存在自体始めて知った…）

なんか、改行のためにfloatを使うのは気持ち悪かったので。

[半透明にならない…（今度はIE）]

次は、IEで半透明が適用されないというバグ（？）に悩まされる。
もちろん、（opacityだけじゃなく）alphaフィルタを指定した上でですよ。

調べてみると、
IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。 - Enjoy*Study
なんだそうです。

ということで、zoom: 1;を指定して無事解決。

[おまけ]

地味だけど、document.createNodeは勝手にhtmlエスケープする
（createTextNodeの挙動 - umezoの日記）
なんてことも今さら認識。（文字参照が勝手にエスケープされてちょっと焦った）
そりゃそうだよな。

[その他の参考記事]

半透明なcssの書き方を確認
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン　BLOG

改行関連（の名前とか、他の方法とかいろいろ参考に）
Mozilla-gumi Forum [One Topic All View / Re[1]: 自動折り返しの挙動 / Page: 0]
Geckoエンジンで長いURLとかを折り返し表示 - Lism.in * blog
ZERO WIDTH SPACE (U+200B) のエンティティ名ってないの？ - daily dayflower
長い文字列の改行方法 - wbr, , css - World Wide Walker

以上。
これでいつでも水玉模様（『ドット柄（笑）』とか書いた方がいいのかな？）を作れますね。

…たぶん、二度と作りませんが。