#?SuikaWiki/0.9
*D&Dで要素の移動

[1] '''質問''' (''[[わかば]]'' [sage] [WEAK[2003-01-07 19:10]]): [[HTML]] と一緒に使って、要素を鼠で drag することにより移動するにはどうしたらいいでしょう?
(つまり、 Windoze とかで[[タイトルバー]] を drag したら窓が動く、みたいなことをしたい。)

[2] ''[[わかば]]'' [sage] [WEAK[2003-01-07 19:12]]: それっぽい属性を適当にいじったらできますた。 ([[SuikaWiki]])/script/drag.js
という [[URI]] の script file で実装しますたのでそちらをどうぞ。
[[WinIE]] (4以上?), [[Mozilla]] ([[Netscape]] 6 以上) で動くと思います。

[3] '''質問''' ''[[わかば]]'' [WEAK[2003-01-12 14:05]]: Mozilla で standards compliance mode になると

 elementFoo.style.left = 123;

としても [VAR[elementFoo]] が動いてくれません。

[4] ''[[わかば]]'' [WEAK[2003-01-12 14:06]]: >>3 [CODE[123]] ではなく [CODE['123px']] と指定しましょう。

[5] ''[[わかば]]'' [WEAK[2003-01-15 19:13]]: ついで? に、 [[CSS]] の [CODE[position: fixed]] もどきを実装してみました。
おまけで [CODE[max-length:]] みたいなの (表示領域からはみ出たら縮小する。)
も書きました。

[[DOM]] とかよく分かってないので(w)動けばいいや位の code になってます。
元々 CSS2 もまともに実装してない [[WinIE]] 対策でしかないのでそれで十分なんですが。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]"); [WEAK[%date;]]: %text(source=>a);%n;':'%require(a);']]
*質問出来る場所

[6] '''質問''' (''[[名無しさん]]'' [sage]): [[JavaScript]] について質問したいのですが、どこでするのが適当でしょうか?

[7] ''[[名無しさん]]'': 
-[8] ''JavaScript質問スレ'' <http://pc3.2ch.net/test/read.cgi/hp/1041701828/>
-[9] ''ここ''。

[21] '''質問''' ''[[わかば]]'' [sage]: [[DOM]] についてもここで質問していいですか?

[22] ''[[わかば]]'' [sage]: >>21 DOM の質問の場所がまだないのでここでしましょう。
いずれ [ABBR[JS] [JavaScript]] と DOM
はちゃんと分離します。
(でも JavaScript の質問が激変する予感)

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
*XHTML で document.cookie

[10] '''質問''' (''[[わかば]]''): [[application/xhtml+xml]] にしたら [CODE[document.cookie]]
が存在しません。困っちゃいます。

[11] ''[[わかば]]'' [WEAK[2003-01-22 21:45]]: >>10 
=''Bug 126177 - document.cookie doesn't work in files served as application/xhtml+xml'' <http://bugzilla.mozilla.org/show_bug.cgi?id=126177>
=''Bug 111514 - document.body has no properties in XHTML as application/xhtml+xml'' <http://bugzilla.mozilla.org/show_bug.cgi?id=111514>

[[DOM]] 的には XML ではあるが HTML ではない罠。
Mozilla の開発者もどう対処すればいいのか困ってるっぽい。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
*document.styleSheets で要素が消滅

[12] '''質問''' (''[[わかば]]'' [sage] [WEAK[2003-01-23 18:23]]): [CODE[SuikaWiki::Plugin::StyleSheet/wikiview/apply-user-preferred-style]]
のような code で [CODE(JS)[document.styleSheets]]
をいじってスタイル・シートの切り替えやってるんですが、切り替えて HTML で指定された優先スタイル以外が選ばれる時に、なぜか文書中の要素の一部が勝手に見えなくなります。
(DOM Inspector で確認したところ、文書木はちゃんと読まれています。また、 JavaScript Console などを見てもエラーは出ません。)
消滅するのは必ずではなく何回かに一回でして、再現条件はこれ以上は分かりませんが、
body 要素の最初の方の子要素が幾つか消えてる気がします。

[13] ''[[わかば]]'' [sage] [WEAK[2003-01-23 18:26]]: >>12 かなり手間取りましたが理由は分かりました。このスクリプトを
head 要素の最後の部分に入れていたのですが、
body 要素の最後に移動したらうまくいきました。

つまり、文書全体が読み込まれた後にスクリプトを実行させないといけなかったということです。

だけどスタイル切り替え自体はうまくいっているように見えてて、実際何度かに1回はちゃんと期待通りにレンダリングされていたのですから、 Mozilla のバグですかねえ。
(それとも仕様的には Moz の実装で問題なくて、たまたま動くこともあるってだけ? よくわかんないや。)

[14] ''[[わかば]]'' [sage]: >>12-13 なんにせよ、 JavaScript の微妙な期待しない動作というのは debug が難しいですね。
DOM/Mozilla も発展途上であるのも絡んで。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
*document.styleSheets に出ない

[15] '''質問''' (''[[名無しさん]]''): [[WinIE]] 6.0 を使っていますが、 [CODE[stylesheet alterate]] と [[rel]] に指定したスタイル・シートが
[CODE(JS)[document.styleSheets]] の一覧でなぜか取得できません。

[16] ''>>15'': 調べてみたら [CODE[rel="stylesheet "]] でもだめでした。

[17] ''>>15-16'': [[M$]] 的には'''仕様'''だと思います... [[link]] 要素をいじれば同じことはできるとは思いますけど...

[18] ''[[わかば]]'': >>17 面倒なので SuikaWiki では M$IE には必ず 
(代替スタイルも含めて) [CODE[stylesheet]] で送るようにしました。
(邪道かな。)

[23] '''質問''' ''[[わかば]]'': [[XHTML]] だと [CODE(DOM)[document.styleSheets]]
が使えません。

[24] ''[[わかば]]'' [>>23]: 代わりに [CODE(DOM)[document.getElementsByTagName('link')]]
云々を使いましょう。 ([[xml-stylesheet]]
もチェックしないと。面倒だな。)

そもそも [CODE(DOM)[document.styleSheets]] は DOM0
らしいので実装していない [[UA]]
もあるかもしれません・・・あるのか?

[25] ''[[わかば]]'': >>24 それつかったけど [[Mozilla]] ではうまくいかないなあ。よくわからん。

[26] ''>>24-25'': [[Bookmarklet]>>21]-34 も参照。
調子に乗るとブラウザが落ちるので注意。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
*document.createStyleSheet を使うと落ちる

[19] '''質問''' (''[[わかば]]'' [WEAK[2003-01-25 11:05]]): [CODE(JS)[document.createStyleSheet()]] を使うと WinIE6 が落ちました。

[20] ''[[わかば]]'': >>19 [[MacIE]] 4.5 も落ちるそうです。 (''DHTML Lab - dhtmlab.com - Dynamic Headline Fader, Version 2.01 - WebReference.com'' <http://www.webreference.com/dhtml/column25/addendum1/fdr201iemac2.html>)

諦めた方が早いでしょう。 [[Mozilla]] には存在しないみたいですし。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
*CSS 算出値の取得

[27] '''質問''' (''[[名無しさん]]''): [[CSS]] の[[算出値]]を取得するにはどうしたらいいですか?

[28] ''>>27'': ([[DOM]]2)
 var styleList = element.ownerDocument.defaultView.getComputedStyle (element, '');
 alert (styleList.getPropertyValue ('width'));

こんな感じ。

[29] ''[[名無しさん]]'': なお、算出値はあくまで CSS 的算出値なので、実際に使われている値とは限らない。例えば >>28 の例で帰ってくる値は [CODE(CSS)[auto]] だったりする。 (使えねー)

[30] ''[[名無しさん]]'': WinIE では >>28 は駄目ですね。

[[#form:'%radio(id=>type,label=>回答,value=>false,default); or %radio(id=>type,label=>追加質問,value=>true);: %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>a,size=>20);':'[%index;] %iif(source=>type,true=>"\'\'\'質問\'\'\' ",false=>"");\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");: %text(source=>a);%n;':'%require(a);']]
[[#form(newq):'':'*%text(source=>qsum);%n;%n;[%index;] \'\'\'質問\'\'\' (\'\'%name;\'\'%text(source=>mail,prefix=>" [",suffix=>"]");%iif(source=>record-date,true=>" [WEAK[%date;]]");): %text(source=>q);%n;%n;[[#form:\'%percent;radio(id=>type,label=>回答,value=>false,default); or %percent;radio(id=>type,label=>追加質問,value=>true);: %percent;text(label=>"名前 : ",id=>name,size=>"9.5"); %percent;text(label=>"メイル: ",id=>mail,size=>9.5); %percent;check(default,id=>record-date,label=>日付を記録);%percent;n;%percent;textarea(id=>a,size=>20);\':\'[%percent;index;] %percent;iif(source=>type,true=>"\\\'\\\'\\\'質問\\\'\\\'\\\' ",false=>"");\\\'\\\'%percent;name;\\\'\\\'%percent;text(source=>mail,prefix=>" [",suffix=>"]");%percent;iif(source=>record-date,true=>" [WEAK[%percent;date;]]");: %percent;text(source=>a);%percent;n;\':\'%percent;require(a);\']]':'%require(q);']]
*新しい質問の追加
[[#form:'%text(id=>qsum,label=>質問要約,size=>10); %text(label=>"名前 : ",id=>name,size=>"9.5"); %text(label=>"メイル: ",id=>mail,size=>9.5); %check(default,id=>record-date,label=>日付を記録);%n;%textarea(id=>q,label=>質問,size=>20);':'':'%output(id=>newq);%require(q);']]