- ベストアンサー
【javascript クロスブラウザ】処理中はカーソルを砂時計にしたい
- javascript実行中はカーソルを砂時計にする方法を検証した
- IEやFirefoxでは期待通りの動作が、OperaやSafariでは異なる結果が得られた
- クロスブラウザで期待した結果を得るためのアイディアを募集している
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- マウスポインタが砂時計に
IE6で、以下のスクリプトを表示させると、 マウスカーソルが砂時計になって、チカチカします。 <script language="JavaScript"> var x = 10; function hogehoge() { document.getElementById('test').style.left = x + "px"; x++; } setInterval ( 'hogehoge()',50 ) ; </script> <div id="test">xxxx</div> チカチカしなくなるようにしたいのですが、方法が有りましたらご教授願います。 なお、オブジェクトはこれ以上軽くすることは出来ません。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 砂時計について教えてください。
下のように記述すると、NN、Firefoxの最新版では特に何もないのですが、IEの最新版ではマウスカーソルを動かすたびに砂時計がチカチカと出る理由を教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <script type="text/JavaScript"> <!-- function over(){document.getElementById("menu0").style.display="block";} function over2(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } document.getElementById("menu"+n).style.display="block"; document.getElementById("menu"+n).style.top=(n*20)-20+"px"; } function out(n){ for(i = 1;i < 2;i++){ document.getElementById("menu"+i).style.display="none"; } } //--> </script> <table cellspacing="0" cellpadding="0"> <tr> <td valign="top"> <div id="menu0" style="display:none;"> <div onmouseover="over2(1)"><a href="url01.html">link01</a></div> </div> </td> <td valign="top"> <div id="menu1" style="display:none;" onmouseover="over2(1)" onmouseout="out(1)"> <div><a href="url11.html">link11</a></div> </div> <div id="menu2" style="display:none;" onmouseover="over2(2)" onmouseout="out(2)"> <div><a href="url21.html">link21</a></div> </div> <div id="menu3" style="display:none;" onmouseover="over2(3)" onmouseout="out(3)"> <div><a href="url31.html">link31</a></div> </div> </td> </tr> </table>
- ベストアンサー
- JavaScript
- Firefox/2 カーソルが砂時計のまま while(line=str.shift()){
<html> <head> <script type="text/javascript"> function init(){ var str="a:b:c".split(/:/); var line; while(line=str.shift()){ document.write(line + "<BR>"); } } </script> </head> <body onload="init()"> </body> </html> 上記をFirefox/2(Win XP)で実行すると、カーソルが砂時計のまま戻りません。(IE6では再現視せず) 回避策ありましたら教えてください。
- ベストアンサー
- JavaScript
- Javascriptで各ブラウザを厳密に区別する方法
JsvascriptでIE,FireFox,Safari,Opera,Chromeのそれぞれのブラウザを厳密に区別する方法が知りたいです。 それが困難な場合はIE/FireFoxとその他のブラウザを区別する方法がわかれば構いません。 最近Javascriptを触っていませんが2008年後半から今までで何かJavascriptで変化したことはあるのでしょうか? 2007年はAjaxというものが出てきましたが、その後 目新しいものがあったでしょうか?それとも今は減少中?
- ベストアンサー
- JavaScript
- マウスカーソルに合わせて画像が移動するjavascriptで困っていま
マウスカーソルに合わせて画像が移動するjavascriptで困っています。 マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、 マウスカーソルの動きについていけず、画像がワープ(?)してしまいます。 解決策が分かる方がいらっしゃいましたら、ご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> <SCRIPT> <!-- function move(event){ img.style.left=event.x; img.style.top=event.y; } //--> </SCRIPT> </HEAD> <BODY> <IMG src="hoge.png" name="img" style="position:absolute;" > <div onmousemove="move(event);" style="width:500px; height:500px; background-color:#cccccc;"></div> </BODY> </HTML>
- ベストアンサー
- JavaScript
- Operaでカーソルが常に(ハンド)手の形になってしまいます
JavaScriptで、 onMouseOver=\"document.body.style.cursor=\'hand\';\" onMouseOut=\"document.body.style.cursor=\'normal\' と指定すると、”Opera”のウィンドウでは カーソルが常に(ハンド)手の形になってしまいます。 何か解消方法を知っている方がいたら教えてくださいませんか? 宜しくお願いします。
- ベストアンサー
- Windows XP
- opera で戻った時のページの初期化処理について
こんにちわ。 opera上の「戻る処理」関連で困っています。 デフォルト非表示の<div>領域をjavascriptで 表示するようにしたりしてるのですが、 一度どこかのページに行って「戻るボタン」で 戻ってきたときに、それが表示されたままに なってしまいます。 出来れば戻ってきた場合も非表示にするための 初期化処理をしたいのですが、なにかいい方法を ご存知の方いらっしゃいましたら教えてください。 検証:windows98, opera7.23 分かっていること:戻った場合、body onload も通らない。 --------------- <head> <script> function vis_switch(arg) { obj = document.getElementById("vis"); obj.style.visibility = arg; } </script> </head> <body onload="javascript:vis_switch('hidden')"> <div id="vis" style="visibility:hidden;"> 表示/非表示 </div> <a href="javascript:vis_switch('visible');">表示on</a> <a href="http://goo.ne.jp">どこかのページ</a> </body> -----------------------
- ベストアンサー
- JavaScript
- ブラウザ依存? html JavaScript textboxの値の渡し方
<html> <head> <script type="text/javascript"> function print(arg){ document.getElementById("out").innerHTML = "<br/>" + arg; } </script> </head> <body> <input type="textbox" name="text1"/><br/> <input type="button" value="print" onclick="print(text1.value)"/> <div id="out"></div> </body> </html> 上記は、textboxに入力した文字列を[print]ボタンを押下すると表示するhtmlです。IE6.0では期待通りに動作するのですが、Firefox/2.0では動作しません。 ブラウザに依存しない様にはどこを直せばよいですか?
- ベストアンサー
- JavaScript
- 【CSS javascript】ブラウザ依存 各ボックスwidthの合計値をoffsetWidthに収めたときの表示
ボックス1、ボックス2、ボックス3と3つのボックスをfloat: left;で左から横に並べて、キッチリブラウザの幅に収めたいです。 ボックス1は、width: 20%;を指定。 ボックス2は、width: 5px;を指定。 ボックス3は、ブラウザ幅に3つが収まる値をjavascriptで計算して指定したいです。 そこで、各ボックスwidthの合計値をoffsetWidth以下なら、各ボックスは折り返さずに表示されると考え、以下htmlを作成しました。 ※行頭スペースは全角です。 <html> <head> <style type="text/css"> #b1 { background-color: ffffff; float: left; height: 100%; width: 20%; overflow: auto; } #b2 { background-color: 000000; float: left; height: 100%; width: 5px; } #b3 { background-color: ffffff; float: left; height: 100%; overflow: auto; } </style> <script> i = function(id){ return document.getElementById(id) }; function init(){ var W = document.body.offsetWidth || document.documentElement.offsetWidth; var b1 = i('b1').offsetWidth; var b2 = i('b2').offsetWidth; var b3= W - b1 - b2; alert(W +' = ' + b1 + ' + ' + b2 + ' + ' + b3); i('b3').style.width = b3 + 'px'; }; </script> </head> <body onLoad = "init();" > <div id="b1">f1</div> <div id="b2" > </div> <div id="b3">f2</div> </body> </html> 上記を実行した結果、IE,Operaは折り返してしまい、FirFox,Google Chromeは折り返さずに表示できました。 IE,Operaは、なぜ折り返してしまうのでしょうか?
- ベストアンサー
- JavaScript
- ブラウザに応じたJavaScriptの書き方
divの中にp、 pの中にspan、 spanの中にinputがあるとして、 クリックしたらそれぞれの要素のタグををalertで表示させたいとき、 (例1) <div onClick="a=event.target || event.srcElement;alert(a.tagName)">div <p>p <span>span <input type="button" value="input"> </span> </p> </div> で良いと思います。 (IE,Safri,Chrome,Opera,Firefox,Lunascapeで確認済み) ただ、onClick内をスッキリさせたいので (例2) <script> function whereYouClick1(){ a=event.target || event.srcElement; alert(a.tagName); } </script> <div onclick="whereYouClick1();">div <p>p <span>span <input type="button" value="input"> </span> </p> </div> とすると、FirefoxとLunascapeで動かなくなります(よね?)。 苦肉の策として (例3) <script> function whereYouClick2(){ alert(a.tagName); } </script> <div onclick="a=event.target || event.srcElement;whereYouClick2()">div <p>p <span>span <input type="button" value="input"> </span> </p> </div> としたらすべてのブラウザで動いたのですが、腑に落ちません。 これなら(例1)のままの方がすっきりして良かったような気がします。 ここ以外でも同じスクリプトを使いまわしたいときにはfunctionを定義したいところですが、 Forefox, Lunascapeのために(例3)の書き方にならざるを得なくなると思いますが、気持ち悪いです。 もっときれいな書き方はないのでしょうか。 また、上の例では一旦 a=event.target || event.srcElement; としてから、 alert(a.tagName) とやっていますが、 alert(event.target.tagName || event.srcElement.tagName) とやったらIEではエラーとなりました。そんなもんなんでしょうか。 基本的な事柄で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
Hardkingさん ご回答ありがとうございます。 あきらめて、しっかり作りこむしかないようですね。