スクロールメニューの宣言によるIEの動作不具合とCSS表示の崩れの原因を教えてください
- スクロールメニューの宣言を入れるとIEでしか動作しない問題が発生しています。
- 一方、宣言を抜くとIE以外では動作しますが、CSS表示が崩れてしまいます。
- IEでの問題の原因として、<!DOCTYPE html>宣言が関係している可能性があります。
- ベストアンサー
スクロールメニューが宣言を入れるとIEだけでしか動作しないので、困っています。
サイドメニューバーをスクールに合わせて動く、スクリプトを使っていますが、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">を入れると、 IEでしか、動きません。 また、上記の宣言を抜くと、IE以外では動きますが、 IEでのCSS表示が崩れてしまいます。 原因を教えてください。 使用しているスクリプトは下記です。 <script type="text/javascript"> var timer window.onload = scrolltop; window.onunload = stoptimer; function scrolltop() { var menu = document.getElementById('scrollmenu'); var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; menu.style.top = scrollTop; timer = setTimeout("scrolltop()",10); } function stoptimer() { clearTimeout(timer) } </script> 何卒、宜しくお願いします。
- ziggy_mao
- お礼率56% (9/16)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
この場合DOC宣言はあまり関係ないと思うんですけど BODY部とかCSSが載せてないので解らないけど id="scrollmenu"の要素のpositionはabsoluteになっていますよねえ。 そうじゃないと、menu.style.top = scrollTop;しても動かんはずでは、 position:absolute;するとCSSレイアウトが崩れるのは当然のような... そもそも、スクロール用途にstyle.topみたいなスタイル属性変更を 使うのが無理があるのではないかと、どこかに例があったのでしょうか？ どうせjavascript使うのだから、window.scrollTo()を使った方がよいのでは <script type="text/javascript"> window.onload = scrolltop; function scrolltop() { var menu = document.getElementById('scrollmenu'); window.scrollTo(0,menu.offsetTop); } </script> みたいに
関連するQ&A
- jquery 追従メニュー IEについて
下記jqueryを使って追従メニューを制作した時に、IEで確認すると限りなくスクロールできてしまいます。 解決する方法を検索しましたがわかりませんでした。 どなたかお分かりの方教えてください。 よろしくお願いします。 <script type="text/javascript"> $(function() { var offset = $("#leftcontent2").offset(); var topPadding = 15; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#leftcontent2").stop().animate({ marginTop: $(window).scrollTop() - offset.top + topPadding }); } else { $("#leftcontent2").stop().animate({ marginTop: 0 }); } }); }); </script>
- 締切済み
- JavaScript
- DOCTYPE宣言とdocument.body.clientHeight
お世話になります。 ブラウザのサイズを取得するにはどうすればよいのでしょうか？ document.body.clientHeightで取得出来るのは分かりましたが DTDにより動作したり、しなくなるのも分かりました。 ×動作しない <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ○動作する <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 後者のものですとIEでは動作しますが、firefoxでは動作しません。 何か対処法は、御座いませんでしょうか？ 一番望む形は <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> の宣言で、ブラウザサイズが取れるようになるのがベストです。 CSSを使用しているので<?xml version="1.0" encoding="UTF-8"?>を入れると 表示モードが互換になるので・・・。 対応したいブラウザはIE6.0、firefox,Safariです。 一応ソース <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script> function init(){ var bodyHeight = document.body.clientHeight; alert(bodyHeight); } </script> </head> <body onload="init();"> <div> ほげ </div> </body> </html>
- ベストアンサー
- JavaScript
- 無限ループ
教えてください。 画面をリサイズすると画面再表示するようにしたいのですが、 下記のソースでは IE8で無限ループになります。 どこがおかしいのでしょうか？ どのように直せばいいのでしょうか？ jQuery(document).ready(function () { var timer = false; $(window).on("load resize", ReLayout); function ReLayout(event) { var _width = $(window).width(); var winWidth_resized; if(event.type == 'resize') { if (_width > 767) { if (timer !== false) { clearTimeout(timer); } timer = setTimeout( disp, 200); } } } function disp(){ location.href = location.href; } });
- ベストアンサー
- JavaScript
- スクロール位置 ページ切り替え前と同じにしたい
POST送信をしてページが切り替わった時に、切り替え前のスクロール位置にスクロールが来るようにしたいです。 以下のソースでスクロール位置は取得できるようなのですが、切り替え後のページに反映させるにはどうしたらいいでしょうか？ function getScrollPosition() { var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTop; return obj; }
- 締切済み
- JavaScript
- 宣言してないとエラーが出ます
あるサイトで戴いてきたJAVAスクリプトなのですが xNodeは宣言してませんとエラーが出ますどなたかご教授頂けませんか？ HTML> <?xml version="1.0" encoding="shift_jis"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"/> <script type="text/javascript" src="./popup.js"></script> <title></title> </head> java> var imgNode = null; function popupImage( filepath ){ var y = 0; if( document.all ){ y = document.body.scrollTop + 32; if( ! imgNode ){ imgNode = document.createElement('img'); imgNode.setAttribute( 'src' , filepath ); imgNode.onclick = closeImage; } } else if( document.implementation ){ y = window.pageYOffset + 32; if( ! imgNode ){ imgNode = document.createElement('img'); imgNode.setAttribute( 'src' , filepath ); imgNode.addEventListener('click' ,closeImage , true); } } else{ return false; } imgNode.style.position = 'absolute'; imgNode.style.left = '32px'; imgNode.style.top = y + 'px'; imgNode.style.borderColor = '#0099FF'; imgNode.style.borderWidth = '2px'; imgNode.style.borderStyle = 'solid'; imgNode.style.margin = '0'; document.body.appendChild(imgNode); document.body.appendChild(xNode); } function closeImage(){ if( imgNode ){ document.body.removeChild(imgNode); imgNode = null; } }
- ベストアンサー
- JavaScript
- コールバック関数が上手くいかないです
こんにちは。 ブラウザ上に70と表示させるため、以下のソースを書きましたがうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <script type="text/javascript"> //<![CDATA[ function funcA(a) { alert(a + 10); } function funcB(b, func) { var x = b + 2; func(x); } function funcC(c){ var body = document.body; body.innerHTML = c * 10; } funcB(5,funcC); //]]> </script> </head> <body> </body> </html> どなたか詳しい方、ご教示お願いいたします。
- ベストアンサー
- JavaScript
- スクロールしても画像・文字がついてくる
教えて!goo内にて、スクロールしても画像もしくは、文字がついてくるJavascriptのコードが下記のようにありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> function F1() { v='.pixelTop=';dS='';sD='.style';y='document.body.scrollTop';} function F2() { obj='obj1';yy=eval(y);eval(dS+obj+sD+v+yy);setTimeout('F2()',10);} </script> </head> <body onload="F1();F2();"> <div id='obj1' style='position:absolute;left:0px; top:0px;'> ここが動きます。 </div> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> </body> </html> そこで質問なのですが、DOCTYPEを下記のように変更すると動作しなくなったのですが、この原因が調べてもわかりませんでしたので、どなたか原因がわかる方教えていただけませんでしょうか？ 使用ブラウザは、IE6 です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- ベストアンサー
- JavaScript
- スクロールの時間調節
初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう？ プログラムには詳しくないので すぐに使える状態で教えていただけませんか？ <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>
- 締切済み
- JavaScript
- IE6.0で実行した際に、構文エラーと表示されます。
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp-JP"> <head> <title>try</title> <script type="text/javascript"> <![CDATA[ function try01(){window.alert("try");} ]]></script> </head> <body onload="try01();"> <h1>try</h1> </body> </html> 以上のHTML文書を実行すると構文エラーになります。 私には、どこに問題があるか、わかりません。 何が問題なのか、分かる方がいらっしゃいましたら教えていただきたく思います。
- ベストアンサー
- JavaScript
- うまく動作しないのはなぜ？
shift、→、↓の３つのキーにのうち、１つだけ押すとブラウザに「１」を表示、２つ押すと「２」を表示、３つとも押すと「３」を表示する、という動作のjava scriptを書きました。（初心者です） ところが３つ押した場合なぜか動作してくれません。「→」ではなく「←」キーで行った場合はちゃんと「３」が表示されるのですが…。 原因がわからず困ってます。どなたかお助け下さい。 こちらの環境はwindowsXPでIE（バージョン6）です。 ソースも載せておきます。 <html> <head> <script type="text/javascript"> document.onkeydown = keydown; document.onkeyup = keyup; var shift=0, right=0, back=0; function keydown(){ switch(event.keyCode){ case 32: shift=1; break; case 39: right=1; break; case 40: back=1; break; } } function keyup(){ switch(event.keyCode){ case 32: shift=0; break; case 39: right=0; break; case 40: back=0; break; } } function timer(){ window.setTimeout("timer();", 20); document.getElementById("shift+right+back").innerHTML = shift + right + back; } </script> </head> <body> <script> timer(); </script> shift+right+back=<p id="shift+right+back"></p> </body> </html>
- ベストアンサー
- JavaScript
お礼
遅くなってすみません。 ご回答ありがとう御座います。 ご指摘の部分を調整したら、動きました。 しかしなぜ、DOC宣言をいれると、 IEだけで動いたのでしょう。