Ajaxで今よみがえる(^^;;-->[クロスブラウザ技術 ]DHTMLサンプル集
古籏一浩さんとのはじめての共著 発売中-->『Ajax実践テクニック』 古籏一浩/高橋 登史朗 (著)秀和システム
配本予約開始-->『入門Ajax 増補改訂版 』 高橋 登史朗 (著)ソフトバンククリエイティブ ; ISBN: 4797336242
【カテゴリー】 ActionScript ( 4 ) AIR ( 1 ) AjaSQL ( 10 ) Ajax ( 546 ) Arax ( 1 ) canvas ( 10 ) CSS ( 10 ) DLNA ( 1 ) Dojo ( 16 ) DOM ( 45 ) ES4 ( 4 ) 反重力物質 ( 1 ) ffAdd-on ( 1 ) Flash ( 45 ) Flash Remoting ( 11 ) FTP ( 2 ) GAF ( 9 ) Google Maps ( 108 ) GPS ( 38 ) HTTPヘッダサンプル ( 9 ) IPv6 ( 1 ) 漫画 ( 1 ) Java ( 44 ) JavaScript ( 236 ) jKamo ( 8 ) jQchart ( 1 ) jQuery ( 85 ) jquery-ref ( 1 ) jsGadget ( 19 ) jslb_ ( 3 ) jslb_ajax ( 9 ) JSON ( 44 ) JSR223 ( 7 ) kjscmd ( 1 ) KNOPPIX ( 1 ) Linux ( 14 ) Mac ( 8 ) Memo ( 3 ) Microformats ( 2 ) Mini AJAX ( 2 ) MochiKit ( 2 ) mootools ( 2 ) Movable Type ( 57 ) MySQL ( 10 ) NewGameWeb ( 2 ) Nucleus ( 8 ) OpenAJAX ( 3 ) OpenDocument ( 1 ) OS ( 5 ) P2P ( 2 ) Perl ( 7 ) PHP ( 37 ) PostGIS ( 1 ) PostgreSQL ( 4 ) prototype.js ( 21 ) ROBOT ( 1 ) RSSリーダー ( 14 ) Ruby on Rails ( 7 ) Spry ( 6 ) SQLite ( 11 ) SQLiteWorker ( 2 ) ssh ( 1 ) SSI ( 2 ) SVG ( 15 ) TRON ( 1 ) Video ( 1 ) VML ( 1 ) Webサービス ( 90 ) widget ( 6 ) Wiki ( 1 ) Win ( 6 ) WSH ( 1 ) X01HT ( 29 ) XML ( 28 ) XOOPS ( 1 ) XQuery ( 2 ) XUL ( 4 ) Yahoo! UI ( 59 ) 日付入力用カレンダー ( 1 ) 『Ajax実践テクニック』 ( 1 ) 『入門 Ajax』 ( 42 ) WinTips ( 2 ) こりゃすごい ( 2 ) チューニング ( 20 ) ダイナミックロード関数 ( 7 ) リファレンス ( 13 ) ライブラリ ( 90 ) レーダー雨量表示 ( 1 ) ハード ( 15 ) ペンギン ( 2 ) ブラウザ ( 61 ) ブログでBBS ( 1 ) アクセスグラフ ( 3 ) カレンダーによる日付入力スクリプト ( 4 ) クロスブラウザ ( 11 ) クロスブラウザ関数 ( 7 ) スマートフォン ( 8 ) セキュリティ ( 90 ) ソフトイーサ ( 1 ) マッシュアップ ( 22 ) 暗号 ( 4 ) 映画 ( 41 ) 河川の水位グラフ ( 3 ) 回線 ( 2 ) 開発ツール ( 17 ) 牛久大仏 ( 8 ) 携帯 ( 112 ) 言語 ( 18 ) 故障 ( 2 ) 洪水警報システム ( 2 ) 今日のひと言 ( 2 ) 仕様 ( 46 ) 雑談 ( 205 ) 書籍 ( 17 ) 親子ウインドウ有無の確認関数 ( 3 ) 新海誠 ( 3 )

【info】有料サポート(ベータ)限定 承り中 /【JSサポート(仮称)】 

【費用】 とりあえず、言い値で承ります。ただし、できる範囲での限定受付です。込み具合等によりお受けできない場合がありますのであらかじめご了承ください。サポートにご納得いただけなければ料金は不要です。 逆に感動したら多くても構いません(^^;;;。

【できること】 たとえば、かも日記で無料配布されているコードのカスタマイズや、あるいは、JavaScript/Ajax全般+Webサーバーとの連携などのアドバイス&サンプル作成等 。A:jQchartなどでWeb用グラフ設置(エクセル→CSVやデータベースからWebグラフ生成)などのアドバイスやカスタマイズサンプル作成。B:ツリーメニューなどのカスタマイズサンプル。C:Google Mapsのカスタマイズ。etc...

【できないこと】 腕立て伏せ200回

【ライセンス】 私が今まで「かも日記」等で提供してきたコードの大半は、商用利用、改造、自由、連絡不要で、今後もそれらは変わりません。そして、この有料サポートによりカスタマイズコードなどが提供される場合でも、同様に、それらを商用利用しても改造しても自由です。ただし、制限のきついライブラリなどを使う場合は、各ライブラリのライセンスに準拠せざるを得ない場合があります。

【info】いつもいろいろなテストなどをページ内のあちこちでやっているので、重かったり、壊れていたりするf^^;ことも多いですが、何卒、ご了承ください ( _ _ b

【クロスブラウザ このページ内へのリンク】
【jQuery】dimensions.jsのinnerHeightがクロスブラウザでない
【Flash】FlashムービーとJavaScriptを連携
【クロスブラウザ】konquerorのCSS2-3サポート一覧表
【クロスブラウザ】getBoundingClientRect とgetBoxObjectFor
【クロスブラウザ】getDynamicStyle()
【クロスブラウザ】IEのgetAttribute / setAttribute で class 、style NG
【クロスブラウザ】class属性値をgetAttributeで取るときは、、、
【Ajax】クロスブラウザなXMLデータアイランド
【クロスブラウザ】Konquerorでalertに\n
【クロスブラウザ】IE の getAttribute / setAttribute
【クロスブラウザ】Safariのlocation.hash

[ クロスブラウザ ]

2008年04月19日

【jQuery】dimensions.jsのinnerHeightがクロスブラウザでない

jQuery 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


document.bodyなブラウザ画面の内寸を取ろうと思って、jquery.dimensions.jsのinnerWidth()やHeight()でOKだろうと思っていたら、IEとFirefoxの動作が異なっていました。。。がっかり。

$(document.body).innerWidth()と$(document.body).innerHeight()を取ったのですが、ざっくりみたところ、Firefoxは表示されている領域、IEはスクロールしないと見えないページ全体を測っているようです。

しょうがなく、なんとなく修正してみたのでメモ。もう少しましな方法がありそうですけれど、とりあえず。WinのIE6,Opera9,Safari3.1,firefox2.0で、今のところ、なんとなくうまくいっているようにはみえる気がしますf^^;。<ほんとか?

if(document.documentElement){
	var bWidth=document.documentElement.clientWidth;
	var bHeight=document.documentElement.clientHeight;
} else {
	var bWidth = Math.min(
		screen.avaiWidth , 
		$(document.body).innerWidth()
	);
	var bHeight = Math.min(
		screen.availHeight , 
		$(document.body).innerHeight()
	);
}
投稿者 tato : 00:37

2007年02月03日

【Flash】FlashムービーとJavaScriptを連携

Flash 】 , JavaScript 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


FlashムービーとJavaScriptを連携させてみよう ITPro
http://itpro.nikkeibp.co.jp/article/COLUMN/20070118/259015/?ST=start

#これはとてもわかりやすい。

投稿者 tato : 20:26

2006年05月16日

【クロスブラウザ】konquerorのCSS2-3サポート一覧表

CSS 】 , JavaScript 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


CSS 2.1 & 3 Support in KHTML 3.4 http://www.konqueror.org/css/
投稿者 tato : 22:25 | トラックバック (0)

2006年04月20日

【クロスブラウザ】getBoundingClientRect とgetBoxObjectFor

JavaScript 】 , Yahoo! UI 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


MozのgetBoxObjectForもIEのgetBoundingClientRect も対象ボックスの領域を得るのに使えますが、IEの場合、画面左上に2px,2px分よけいに勘定されるので少し違います。ちなみにたとえば、Yahoo! UIのDom 0.9.0の、YAHOO.util.Dom.getXY やRegionなどでは、これが修正されていませんのでIEだけ2pxずれたりしますから注意が必要です。

getBoundingClientRect
http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/getboundingclientrect.asp
getBoxObjectFor
http://www.google.com/search?hl=en&lr=&q=document.getBoxObjectFor

if (el.getBoundingClientRect) box = el.getBoundingClientRect();//ie
if (document.getBoxObjectFor) box = document.getBoxObjectFor(el);//moz

*Yahoo! UIのgetX、getY、getXY、getRegionなどは内部でJscriptのgetBoundingClientRectメソッドを利用していますが、これは画面左上部に2px,2px分多くカウントします。したがって、厳密にクロスブラウザ化するには、IEの場合にその差を引く必要があります。

修正方法としては、IEの場合だけ結果の値から2px分引く方法もありますが、getBoundingClientRectは、ライブラリのdom.js内にあるYAHOO.util.Domクラスのメソッドthis.getXYの中で使われていますので、このメソッドのreturn文を 下記のように書き換えることで、内部でgetXYを利用しているメンバーすべての修正ができます。

      //return [box.left + scrollLeft, box.top + scrollTop]; //こちらはオリジナルです
      return [box.left + scrollLeft -2 , box.top + scrollTop -2];

投稿者 tato : 11:23 | トラックバック (0)

2006年02月02日

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

クロスブラウザ 】 , クロスブラウザ関数 ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


インラインでスタイル指定しない場合の値は、たとえばoj.style.topなどでは取れない。という件について、いままでもいろいろなところで個別に話をしてきましたが、クロスブラウザ関数にしておきます。

たとえば、ページのどこかでtop:100pxなどと、明示的に指定していなければ、"auto"などが入っている可能性があることにも注意が必要です。

動的なスタイル値取得
getDynamicStyle(id,style)
http://jsgt.org/js/books/dhtml2/part3/cross/getdynamicstyle.htm
<html> <head> <style> #test{ position:absolute; top:100px; left:100px } </style> </head> <body> <div id="test">aaa</div> <script> alert("inlineのスタイル指定がなければ\ndocument.getElementById('test').style.topでは取得できません\n"+document.getElementById('test').style.top) a = getDynamicStyle('test','top'); alert("でもgetDynamicStyle('test','top')で大丈夫\n"+a) function getDynamicStyle(id,style){ if(!document.getElementById)return; var node = document.getElementById(id); if(node.currentStyle){ return node.currentStyle[style]; } else if(document.defaultView){ return document.defaultView.getComputedStyle(node,'').getPropertyValue(style); } else { return null } } //// // getDynamicStyle(id,style) //allow // Win e6 f1 o8 // Mac e5 f1 o8 s2 //deny // Mac s1.25 // Linux k3 // //@see http://www.mozilla-japan.org/docs/dom/domref/examples7.html //@see http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/objects/currentstyle.asp </script> </body> </html>


    高橋 ( 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 )

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


    【コメント】(←clickで入力欄open)
投稿者 tato : 16:46 | トラックバック (0)

2006年01月23日

【クロスブラウザ】IEのgetAttribute / setAttribute で class 、style NG

クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


IE の getAttribute / setAttribute
http://nanto.asablo.jp/blog/2005/10/29/123294#tb192137

// NG
element.getAttribute("class");
element.setAttribute("style", "background-color: #fff; color: #000;");
element.setAttribute("onclick", "clickHandler(event);");
// OK
element.getAttribute("className");
element.style.cssText = "background-color: #fff; color: #000;";
element.setAttribute("onclick", new Function("clickHandler(event);"));

#そういえば、Operaでoj.cssTextがだめなんですよね、、、うう。
@関連 【クロスブラウザ】class属性値をgetAttributeで取るときは、、、
http://jsgt.org/mt/archives/01/000788.html

投稿者 tato : 20:48 | トラックバック (0)

2006年01月18日

【クロスブラウザ】class属性値をgetAttributeで取るときは、、、

DOM 】 , JavaScript 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


class属性値をgetAttributeで取るときは、下記に注意。すっかり忘れてました(^^;

oj.getAttribute('class') ←FireFox,Opera,Safari
oj.getAttribute('className') ←IE

クロスブラウザな書き方は下記でOK
oj.getAttribute('class')||oj.getAttribute('className')


if(oj.getAttribute('class')||oj.getAttribute('className')=='xxx'){ ... }
if((oj.getAttribute('class')||oj.getAttribute('className'))=='xxx'){ ... }



    nagi ( 2006年01月18日 10:24 )

    oda さんの仰るとおり、 == の方が || より優先されますね。
    var attr = oj.getAttribute('class')||oj.getAttribute('className')=='xxx';
    とすると、
    Gecko では、 attr には属性値が入り、
    Trident では、属性値が 'xxx' と等しいか評価した結果(boolean)が入るようです。

    意図通りの分岐を書くなら、
    if ( ( oj.getAttribute('class')||oj.getAttribute('className') ) == 'xxx' ){ ... }
    ですかね。

    高橋 ( 2006年01月18日 12:41 )

    おぉ、なんと素早いつっこみありがとうございます(^^;;
    直しました。


    【コメント】(←clickで入力欄open)
投稿者 tato : 00:35 | トラックバック (0)

2005年11月11日

【Ajax】クロスブラウザなXMLデータアイランド

Ajax 】 , XML 】 , クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


XMLデータアイランドをすべてのブラウザで動作させる方法
Nigel McFarlane
http://japan.internet.com/developer/20051108/25.html

IE 4.0やNetscape 4.xといった古びたブラウザが姿を消し、MozillaとFirefoxが台頭してきた現在、DHTMLは以前にも増して強力で、汎用性の高い技術に育ちつつあります。IEに拘束されてきたアプリケーションをDHTMLで解き放ってください。

この方亡くなられたんですね、、、。敬意を込めて黙祷。

投稿者 tato : 18:55 | トラックバック (0)

2005年11月09日

【クロスブラウザ】Konquerorでalertに\n

クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


Konquerorでalertに\nを含むテキストを渡すと改行にならない
http://mag.autumn.org/Content.modf?id=20051108121643

投稿者 tato : 12:23 | トラックバック (0)

2005年11月07日

【クロスブラウザ】IE の getAttribute / setAttribute

クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


IE の getAttribute / setAttribute
http://nanto.asablo.jp/blog/2005/10/29/123294#c132376

IE のgetAttribute / setAttribute の振る舞いが、Win、Macともに微妙にDOM Level 1 と異なるということについてのお話。

投稿者 tato : 06:47 | トラックバック (0)

2005年11月03日

【クロスブラウザ】Safariのlocation.hash

クロスブラウザ ブックマークに追加する ブックマーク-- Buzzurl  / Hatena  / Livedoor track feed


ブラウザ間非互換性: Safariのlocation.hash http://mag.autumn.org/Content.modf?id=20051102211029 Safariでlocation.hash時にonloadイベントが発生するケース http://mag.autumn.org/Content.modf?id=20051102212821
投稿者 tato : 12:46 | トラックバック (0)

【info】有料サポート(ベータ)限定 承り中 /【JSサポート(仮称)】 

【費用】 とりあえず、言い値で承ります。ただし、できる範囲での限定受付です。込み具合等によりお受けできない場合がありますのであらかじめご了承ください。サポートにご納得いただけなければ料金は不要です。 逆に感動したら多くても構いません(^^;;;。

【できること】 たとえば、かも日記で無料配布されているコードのカスタマイズや、あるいは、JavaScript/Ajax全般+Webサーバーとの連携などのアドバイス&サンプル作成等 。A:jQchartなどでWeb用グラフ設置(エクセル→CSVやデータベースからWebグラフ生成)などのアドバイスやカスタマイズサンプル作成。B:ツリーメニューなどのカスタマイズサンプル。C:Google Mapsのカスタマイズ。etc...

【できないこと】 腕立て伏せ200回

【ライセンス】 私が今まで「かも日記」等で提供してきたコードの大半は、商用利用、改造、自由、連絡不要で、今後もそれらは変わりません。そして、この有料サポートによりカスタマイズコードなどが提供される場合でも、同様に、それらを商用利用しても改造しても自由です。ただし、制限のきついライブラリなどを使う場合は、各ライブラリのライセンスに準拠せざるを得ない場合があります。

【jsgt.org関連 最新アクセス 10件 htmlファイルのみ 】(30秒更新/Max接続30分 リピートなし)