JavaScript++かも日記

【クロスブラウザ】getDynamicStyle() ()

---

高橋 ( 2006年02月02日 22:31 )

はい、どうぞ〜。ライセンスはパブリックドメインです。改造、商用利用も切り張りも自由自在、連絡不要です。って、あえていうほどのコードでもないですねf^^;;

Mitsuhal ( 2006年02月03日 04:44 )

return node.currentStyle.top;
↓
return node.currentStyle[style];
ですよね？


高橋 ( 2006年02月03日 15:52 )

Mitsuhal さんありがとうございます。
直しました。

高橋 ( 2006年02月03日 15:56 )

Safari1はKonquerrorと同じバグっぽいです。document.defaultView.getComputedStyleまでは存在しているので、なにかの呪文で解けるかもしれないです。ちなみに(node,null)では駄目なことだけは確認しましたが、、、。

高橋 ( 2006年02月03日 17:45 )

インテルMacになるついでに、デフォルトもFirefoxしてくれないかな、、、動作確認が楽になる、、、とも限らないかなf^^??

古籏一浩 ( 2006年02月04日 13:25 )

Mac+Safari 2, Firefox 1.5でちゃんと動きました。
う〜む、こういうのは便利ですね〜。
使わせてもらってもいいですか？

古籏一浩 ( 2006年02月04日 13:26 )

どうもありがとうございますです。
Safari 1でも動くとグッドなんですけどね〜。
何か策があるかなあ。
もうG5のHDDがいっぱいで身動きが取れないf(^^;
HDD合計は2TB以上あるのに、残りが14.04GB...

古籏一浩 ( 2006年02月04日 13:27 )

for...inで中身を覗いてみると何かヒントとかないかなあ。
ただ、DOM操作もSafariは思わぬ落とし穴があったりするので何とも...

#頑張ってHDDの空きを33GBまで増やしましたf(^^;


福田 ( 2006年06月17日 18:03 )

はじめまして。
先ほどから座標の位置が取得できずに
５、６時間悩んでいたのですが、
おかげ様で解決しました。ありがとうございます。

---

【コメント】(←clickで入力欄open)

【クロスブラウザ】showModalDialog/showModelessDialog ()

puggyさんによる、
「showModalDialog,showModelessDialog の書き方で window.open() もやっちまおう」というスクリプトです。

// IE と Moz/FF のモードレスダイアログのオープン・値の受け渡し・戻り値の参照
// 方法を統一するインターフェース
// モードレス・モーダルダイアログ共通版

http://puggy.quu.cc/test/DialogTestMain.htm
対応ブラウザ
Moz1.6/FF1.0.6/Op8.5/IE6

---

( 2007年07月02日 15:26 )

ｄ

---

【コメント】(←clickで入力欄open)

【jsGadet】ドラッガブルフロート+透明化フェイド ()

---

fox ( 2006年01月10日 14:46 )

閉じるボタンつけられないでしょうか？

高橋 ( 2006年01月10日 23:03 )

div1.innerHTML="";
とか、
div1.style.width="0px";
div1.style.height="0px";
とかすれば消えますので、関数にしておくと良いかなと。


---

【コメント】(←clickで入力欄open)

Dynamic HTML cross-browser/Examples ()

Ajax書くのに、クロスブラウザなテクニックは必須なので、
Dynamic HTML cross-browser/Examples
を、サーバー２カ所 　３カ所!!　にミラーな分散しました。
どっちか どれが落ちても大丈夫。。。。

ちょと古いサンプル集ですけど、逆に今ではなかなか調べにくいテクニックも満載ですから、Ajax書くときにはそれなりに必携でしょ(^^?
http://www.fureai.or.jp/~tato/DHTML/simple/contents.htm
http://jsgt.org/js/books/dhtml2/contents.htm
http://game.gr.jp/js/books/dhtml2/contents.htm

---

puggy ( 2005年10月08日 08:51 )

var aaa = html
function HelloWorold() {
alert(ok");
}


puggy ( 2005年10月08日 08:59 )

ちょっと長いけど載せておきます。
ダイアログ系が２大ブラウザでようやく完全ではない
ものの互換性が取れるようになってきたので。

でも、modal=yes はどーみても、モードレスですよね。
これを、onblur="self.focus()" にしてもいいんだけど、
これはこれで処理が複雑だし、結構面倒だから。

でも、「常に前面に出る」窓を 普通の window.open
でコンテンツの内容がどうであれ完全に再現可能な
やり方をご存知であるならそれに置き換えてもいい
かもしれませんね。。。

///////////////////////////////////////////////////////////////////////////////
//
// IE と Moz/FF のモードレスダイアログのオープン・値の受け渡し・戻り値の参照
// 方法を統一するインターフェース
// モードレス・モーダルダイアログ共通版
//
// コピペで貼り付けるHTMLタグ：
//
//
//
// 統一インターフェース（基本的にIEに倣う）:
// ●showModelessDialog(url,param,options)
// ●showModalDialog(url,param,options)
// ------------------+-------------+-------------------------------------------
// parameter name | type | usage
// ------------------+-------------+-------------------------------------------
// url | "string" | url を指定する
// param | "object" | 必ず DialogParam() オブジェクトを指定する
// options | "string" | window.open() の指定と同じものを指定する
// | | IE,Moz,FF,OP 等ブラウザによるオプション指定
// | | 方法の違いを全て吸収します。
// ------------------+-------------+-------------------------------------------
// ●DialogParam(window_name)
// ------------------+-------------+-------------------------------------------
// parameter name | type | usage
// ------------------+-------------+-------------------------------------------
// window_name | "string" | ダイアログウィンドウに付ける固有の名前を
// | | 指定する。モードレスダイアログのときのみ
// | | window.xxxDialog.xxxx.xxxx 書式でダイアロ
// | | グを参照できるようにする。
// modal | boolean | modal=true,modeless=false を設定する
// modeless | boolean | modal=false,modeless=true を設定する
// | | modal=false,modeless=false は ChildWindow
////////////////////////////////////////////////////////////////////////////////
// Dialog Style
// IE: window.dialogArguments="object"
// MZ: window.opener="object"
// FF: window.opener="object"
//
// Window Style
// IE: child Window の場合：window.opener="object",dialogArguments="undefined"
// MZ: 同上
// FF: 同上
////////////////////////////////////////////////////////////////////////////////
//z-index をキープするメソッドと指定オプション一覧
// method |o| option | usage
// --------------------------+-+------------------+------------------------
// showModalDialog |i| - | メソッド名称の通り
// showModelessDialog |i| - | 　　　　〃
// window.open |m| modal=yes | 第三引数に指定でモーダル
// window.open |m| dependent=yes | 第三引数に指定でモードレス
// ※現時点では、window.open("","","modal=yes"); はバグにより、"dependent=yes"
// と等価。
//
////////////////////////////////////////////////////////////////////////////////
var _op_ = !!window.opener; //子窓で起動された
var _ie_ = !!window.dialogArguments; //IE で動いているか(showModal を実装している）
var _md_ = !!window.showModelessDialog; //showModal を実装している
var _mf_ = navigator.userAgent.match(/(gecko|firefox)/i) != null; //Moz/Firefox

////////////////////////////////////////////////////////////////////////////////
//
// Public Methods
//
////////////////////////////////////////////////////////////////////////////////
// このモジュールの公開メソッド
function DialogParam(window_name) {
this["name"] = window_name;

//起動時に再設定される
this["modal"] = false;
this["modeless"] = false;

this.getVersion=function() { return "0.1"; }
this.toString=function() {
var k;
var s="";
for (k in this) {
s += k + "=" + this[k] + "\n";
}
return s;
}
}
var opt_mode = false;
//false=window.open() オプションを IE 系オプション へ変換（デフォルト）
//true =showModalDialog() オプションを window.open() 系オプションへ変換

function useMM() { opt_mode = false;}
function useIE() { opt_mode = true; }

////////////////////////////////////////////////////////////////////////////////
//
// showModalDialog and showModelessDialog の（再）定義
//
////////////////////////////////////////////////////////////////////////////////
//IE の場合：既存の showModal/Modeless をオーバーライドする
//MZ の場合：新規の showModal/Modeless を作成する
window.showModalDialog = function(dlg) { //モーダルダイアログ
return function(url,obj,prm) {
//IE だけ 第四パラメータ dlg を使う
return OpenModalDialog(url,obj,prm,dlg);
}
}(window.showModalDialog);

window.showModelessDialog = function(dlg) { //モードレスダイアログ
return function(url,obj,prm) {
//IE だけ 第四パラメータ dlg を使う
return OpenModelessDialog(url,obj,prm,dlg);
}
}(window.showModelessDialog);

////////////////////////////////////////////////////////////////////////////////
//
// Private Methods
//
////////////////////////////////////////////////////////////////////////////////
//（絶対移動）
//IE の モードレスダイアログは通常 moveTo では移動できません。
//これを moveTo でも移動できるようにします。
var InitMoveTo = function() {
window.moveTo = function(mvto) {
return function(x,y) {
if (_ie_) window.dialogLeft=toPX(x),window.dialogTop=toPX(y);
else mvto(x,y);
}
}(window.moveTo);
}
//（相対移動）
//これも
var InitMoveBy = function() {
window.moveBy = function(mvby) {
return function(x,y) {
if (_ie_) window.dialogLeft=toPX(x),window.dialogTop=toPX(y);
else mvby(x,y);
}
}(window.moveBy);
}
//数値を"px" 付き文字列に変換する
var toPX = function(n) {
var z = n;
if (typeof n == "string") {
try {
z = parseInt(n);
}
catch( e ) {
return n;
}
}
return z + "px";
}


//------------------------------------------------------------------------------
// モーダルダイアログをオープンする
//------------------------------------------------------------------------------
var OpenModalDialog = function(url,dialogParam,options,modalDialog) {

if (_md_) {
dialogParam.modeless = false;
dialogParam.modal = true;

var w = modalDialog(url,dialogParam,
!opt_mode ? OptionConverter_ie(options) : options);
window[dialogParam.name] = w;
//w.returnValue = null;//戻り値は returnValue を見てね。
return w;
}
else if (_mf_) {
dialogParam.modal = false;
dialogParam.modeless = true;

if (opt_mode)
options = OptionConverter_mm(options);

var modal = "modal=yes"; //バグに付き、モードレスと同じ動作をしてしまう
if (options.length > 0) modal+=",";
options = modal + options;
var w = window.open(url,dialogParam.name,options);
//MZ/FF 系のモーダルダイアログはバグっています。
//モーダルなのに動きはモードレスです。
//なので IE とは互換になりません。注意！
window[dialogParam.name+"_arguments"] = dialogParam;
w.returnValue = null;
return w;
}
else {
dialogParam.modeless = false;
dialogParam.modal = false;

if (opt_mode)
options = OptionConverter_mm(options);

var w = window.open(url,dialogParam.name,options);
window[dialogParam.name+"_arguments"] = dialogParam;
w.returnValue = null;
return w;
}
}
//------------------------------------------------------------------------------
// モードレスダイアログをオープンする
//------------------------------------------------------------------------------
var OpenModelessDialog = function(url,dialogParam,options,modelessDialog) {

if (_md_) {
dialogParam.modal = false;
dialogParam.modeless = true;

var w = modelessDialog(url,dialogParam,
!opt_mode ? OptionConverter_ie(options) : options);
window[dialogParam.name] = w;
w.returnValue = null; //戻り値は returnValue を見てね。
return w;
}
else if (_mf_) {
dialogParam.modal = false;
dialogParam.modeless = true;

if (opt_mode)
options = OptionConverter_mm(options);

var dependent = "dependent=yes";
if (options.length > 0) dependent+=",";
options = dependent + options;
var w = window.open(url,dialogParam.name,options);
window[dialogParam.name+"_arguments"] = dialogParam;
w.returnValue = null;
return w;
}
else {
dialogParam.modal = false;
dialogParam.modeless = false;

if (opt_mode)
options = OptionConverter_mm(options);

var w = window.open(url,dialogParam.name,options);
window[dialogParam.name+"_arguments"] = dialogParam;
w.returnValue = null;
return w;
}
}

//------------------------------------------------------------------------------
//IE のオプションへ変換するテーブル
//------------------------------------------------------------------------------
//IE の他のオプションあれば適宜追加してください。但し、双方互換性のある
//オプションじゃないと意味がありません。
var opt_mm_to_ie = {
"width" : "dialogWidth",
"height" : "dialogHeight",
"top" : "dialogTop",
"left" : "dialogLeft",
"status" : "status",
"resizable" : "resizable",
"scrollbars" : "scroll"
};

var opt_ie_to_mm = {
// IE options | Moz/IE/FF/OP and other window.open() options
"dialogWidth" : "width",
"dialogHeight" : "height",
"dialogTop" : "top",
"dialogLeft" : "left",
"status" : "status",
"resizable" : "resizable",
"scroll" : "scrollbars"
};
//------------------------------------------------------------------------------
// option converter
//------------------------------------------------------------------------------
var OptionConverter = function(op, opts, dlm1, equ, dlm2) {
var ar = op.split(dlm1);
var ah = [];
var an = [];
for (var i=0;i < ar.length;i++) {
var ss = ar[i].split(equ);
ss[0] = ss[0].replace(/ /g,"");
ss[1] = ss[1].replace(/ /g,"");
ah[ss[0]] = ss[1];
}
for (var key in opts) {
if (ah[key] != null) {
var tan = key.match(/(width|height|top|left)/i) != null;
var elm = ah[key];
if (tan && elm.match(/^[+\-]*\d+$/)) {
elm += "px";
}
an.push(opts[key]+":"+elm);
}
}
op = an.join(dlm2);
return op;
}
//window.open() 系オプションから IE 風オプションへ変換
var OptionConverter_ie = function(op) {
return OptionConverter(op,opt_mm_to_ie, ",", "=", ";");
}
//IE 風オプションから、window.open() 系オプションへ変換
var OptionConverter_mm = function(op) {
return OptionConverter(op, opt_ie_to_mm, ";", ":", ",");
}
//------------------------------------------------------------------------------
// Initialize
//------------------------------------------------------------------------------
InitMoveTo();
InitMoveBy();
if (_op_) {
if (window.opener[window.name+"_arguments"] != null)
window.dialogArguments = window.opener[window.name+"_arguments"];
}
//------------------------------------------------------------------------------
// End //2005/10/07(Fri)
//------------------------------------------------------------------------------


puggy ( 2005年10月08日 09:08 )

確認取れているブラウザは、
IE6
Moz1.6
FireFox1.0.6
３つです。
Moz と FF は既知の直さない予定のバグなそうな・・・
alwaysRaised=yes がだいぶ前から実装されている
のに直さないんだもん・・・あ、常に前面は治っている
か。ちゅーても、
２枚開くと片方親画面の後ろに行ってしまうバグも
あるけどｗ＞Moz/FF

FFはActiveXBridge使っているような雰囲気だから、
素直にIEと同じモーダルダイアログの中身を実装すればいいのにね〜。

高橋 ( 2005年10月08日 21:23 )

ども〜。
このページ、ドラッガブルフロートのイベント処理のせいで、コピペが出来なくなってますね、、、(^^;ソース開いて、除去して、＆lt;を変換して試しましたｆ^^;＜自業自得。　IE のオプションへ変換するテーブル良い手ですね。クロスブラウザ時に、差異をあんな感じでまとめられれば、将来のメンテも見やすくて楽かも。Operaはまだ？なんですね。

高橋 ( 2005年10月08日 21:26 )

あ、「出現」さえさせなければ、コピペできるのか、、、。

( 2007年09月06日 10:31 )

test

---

【コメント】(←clickで入力欄open)

リンクが切れてました ()

---

---

【コメント】(←clickで入力欄open)

クロスブラウザサンプル集 ()

これも、リンクつけときます。
Win,Mac,Linux/IE,NN,Mozilla,Opera,SafariといったOSとブラウザの壁を越えて動作するクロスブラウザ関数と応用サンプル集です。正直、死にそうなくらい苦労して作った本です(^^;。
http://jsgt.org/js/dhtml2/contents.htm

---

---

【コメント】(←clickで入力欄open)

クロスブラウザ関数 ()

クロスブラウザ関数
クロスブラウザ関数サンプルへのリンクをまとめてみました。下記サンプル集の関数です。 Win,Mac,Linux/IE,NN,Mozilla,Opera,SafariといったOSとブラウザの壁を越えて動作するクロスブラウザ関数と応用サンプル集。 買ってね(^^)!→ ここまでできる!JavaScriptらくらく活用サンプル集
【表示】 showLAYER() 表示属性set（表示） hideLAYER() 表示属性set（非表示） getVISIBLE() 表示属性get 【移動】 moveLAYER() レイヤー移動 moveByLAYER() レイヤー移動（対現在地） slideLAYERs() レイヤースライド fixedLAYER() レイヤー位置固定 followingLAYER() マウス追跡 【生成】 createLAYER() レイヤー生成 【サイズ】 resizeToLAYER() レイヤーリサイズ resizeByLAYER() レイヤーリサイズ（対現サイズ） zoomLAYER() レイヤーズーム 【位置】 getLEFT() レイヤー左辺X座標get getTOP() レイヤー上辺Y座標get getRIGHT() レイヤー右辺X座標get getBOTTOM() レイヤー下辺Y座標get	【奥行】 zindexLAYER() 奥行Z座標set getZINDEX() 奥行Z座標get 【クリップ】 setCLIP() クリップ wipeCLIP() ワイプ 【出力】 outputLAYER() HTML出力 【色】 setBGCOLOR() 背景色set getBGCOLOR() 背景色get fadeBGCOLORbyGRY() 背景色フェード（グレイ） fadeBGCOLOR() 背景色フェード setOpacity() 不透明度set fadeOpacity() 不透明度フェード setBGIMG() 背景画像set setFGCOLOR() 文字色set	【ウインドウ】 getINNERWIDTH() ブラウザ内幅get getINNERHEIGHT() ブラウザ内高get resizeToWIN() ブラウザリサイズ（内寸） resizeByWIN() ブラウザリサイズ（対現外寸） moveToWIN() ブラウザ移動 moveByWIN() ブラウザ移動（対現位置） win_closed() ウインドウ有無の確認 【キー】 getKEYCODE() キーコードget 【マウス】 getMouseX() マウスX座標get getMouseY() マウスY座標get getMouseXonScreen() Screen上のマウスX座標get getMouseYonScreen() Screen上のマウスY座標get 【スクリーン】 getScreenWIDTH() フルスクリーン幅get getScreenHEIGHT() フルスクリーン高get getScreenAvailWIDTH() スクリーン有効幅get getScreenAvailHEIGHT() スクリーン有効高get	【言語】 getBrowserLANG() ブラウザ言語コードget 【オブジェクト】 getLayStyleOj() レイヤースタイルオブジェクトget getLayOj() レイヤーオブジェクトget 【イベント】[ added ] startEvent() イベント開始 stopEvent() イベント停止 【その他】 pop() ポップアップメニュー dragLay() ドラッグドロップ openFlashWin() フラッシュ用ウインドウ

---

---

【コメント】(←clickで入力欄open)