prototype.jsとprotoload.jsを使用して
ロード画面を作成しました。
http://youmos.com/news/protoload_js
テーブルのdivのidを指定してロード画面を組み込んだのですが
Fire Foxだと大丈夫だったのにIEだとロードイメージがすごくズレます。
IEの場合だけmargin-left、margin-topを使ってロードイメージを調整したのですがブラウザの大きさを変えるとやはりずれてしまいます。
prototype.jsのoffsetLeftがブラウザによって値が変わってしまうのが
原因ぽいです。
このブラウザ依存をなくすか、offsetLeftの正しい取得方法など
わかる人いませんでしょうか?
よろしくお願いします。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
こんにちは
面白いものを知っておられますね(^^)
早速試してみましたが確かにIEだけmargin分ズレが生じたりウィンドウサイズを変えるととんでもないところに出てますね・・・
protoload.js内の45行目 window.setTimeout((function() { というところに
element.style.position = "relative";
63行目 stopWaiting: function(element) { というところに
element.style.position = "";
というのを { }内の先頭に付け加えてみてください
window.setTimeout((function() {
element.style.position = "relative";
if (this._waiting) {
って感じで
一応自分で試してみたところうまくいっているようなのですが・・・
http://chaosproduce.com/test/test1.html
No.1
- 回答日時:
HTML構造などの詳細がわからないのでとりあえずですが
body の style で margin:0px なら
IEでもFirefoxでも offsetLeftで同じ数値が戻ると思います。
body に margin をつけたり、デフォルトの状態だと、IEはこのmargin部分(またはデフォルトマージン)を含まずにoffsetLeft値を返すのでbodyからのoffsetと言う事。firefoxは このmargin分も含めてoffsetLeft値を返すので、枠からのoffsetと言う事。
だろうと思います。
デフォルトでは8pxくらいかな? この分をIEの場合は足してやらねばならないのかも?
または、
bodyには style="margin:8px;" など特定の値を明確にCSS指定しておく。
function GetLeft(id){
var el = document.getElementById(id);
var px = 0;
while(el){ px += el.offsetLeft; el = el.offsetParent; }
return px;
}
GetLeft('id') でそのエレメントの正しい?offsetLeft値が取れるかもです。
これでいけるかどうかわかりませんけど、とりあえず質問者さんの組んでるページで試してみてください。
回答ありがとうございます。
body の style で margin:0pxをつけても、
IEの場合だとoffsetLeftが常に0になってしまいました。
http://d.hatena.ne.jp/susie-t/20061004/115994279 …
このサイトを見る限り、offsetLeftの問題は深いみたいです。
なのでarexisさんのoffsetLeftの取得を参考に
protoload.jsを修正したらうまくいきました!!
下記protoload.jsの修正部分
window.setTimeout((function() {
if (this._waiting) {
var left = this.offsetLeft,
top = this.offsetTop ,
width = this.offsetWidth,
height = this.offsetHeight ,
l = this._loading;
// IEのoffsetLeftズレ修正追加
if (this.isIE()) {
var el = $('lineupLoad');
var px = 0;
while(el){ px += el.offsetLeft; el = el.offsetParent; }
left = px;
// IEのoffsetTopズレ修正追加
top = top + 15;
}
l.style.left = left+'px';
l.style.top = top+'px';
l.style.width = width+'px';
l.style.height = height+'px';
l.style.display = 'inline';
}
}).bind(element), timeUntilShow);
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ブラウザ) ブラウザでの音量(YouTubeなどの視聴)が自動的に下がってしまう。(できれば直したいです。) 2 2023/07/15 08:52
- InternetExplorer(IE) 既定のブラウザーを変更した場合、付随して処理が必要なことはありますか? 2 2022/03/25 16:04
- その他(パソコン・周辺機器) EXCELで「WEBオプションの対象ブラウザ」を変更する方法 2 2023/04/12 15:44
- HTML・CSS Chrome のキャッシュについて 3 2022/05/26 07:50
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- Chrome(クローム) インターネットの各サイトの画像が表示されない 3 2022/12/04 22:43
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- JavaScript [Java] Edgeでのアドレスバー非表示について 3 2022/04/20 17:51
- その他(プログラミング・Web制作) ZWCAD CUIXとLISPの関係について 1 2022/09/28 03:07
- Excel(エクセル) Excel2019 マクロを使用し画像を貼り付けした際のリンク切れについて 2 2022/11/15 16:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<a>タグのテキストを取得
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
onchangeイベントを使ってspan...
-
ownerDocumentの使い方を知りた...
-
【Tabキー】特定の範囲内だけで...
-
画像の一部を表示
-
問題はbind の付いたリスナーを...
-
HTML:Tableタグに対し、JavaScr...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
google apps scriptの終了のさせ方
-
二次元配列を使って順位をだす...
-
idを使わずにonclickで自身の要...
-
XMLHttpRequestでキャッシュを...
-
正規表現で半角数字1桁のみを全...
-
undefinedを表示させない方法は...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
[初心者]javascriptのfor文でな...
-
ActiveXobjectが作成できない
-
任意の座標をクリックさせるには
-
appendChildがieだとできない??
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onclickを使わずにイベント処理...
-
アンカークリックのイベントを...
-
javascriptでスロットゲームを...
-
画像上のクリックした場所が分...
-
javascriptでCSVを呼出しvlookup
-
javascriptで編集可能不可能の...
-
Click回数を数え、規定された回...
-
子画面からwindow.openを開いた...
おすすめ情報