スクロールしても画像・文字がついてくるJavascriptのコード
- スクロールしても画像や文字がついてくるJavascriptのコードについて質問します。
- DOCTYPEを変更すると動作しなくなった原因について教えてください。
- 使用ブラウザはIE6です。
- ベストアンサー
スクロールしても画像・文字がついてくる
教えて!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">
- sadoru
- お礼率80% (58/72)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
<script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) + 200 + 'px'; } </script> で、位置に固定させる事ができます。数字200の部分をobj1のtopと同じにする事で変更可能です。
その他の回答 (1)
- arexis
- ベストアンサー率66% (66/99)
DOCTYPEで動かなくなるのはScrollTopのとり方の問題です。 document.body.scrollTop document.documentElement.scrollTop の2つを用意して、どちらか取れるほうにしておけばよいので、書き換えようと思いましたが、 そのスクリプトではFirefoxでは動かないので BODYタグの onloadとそのスクリプトを削除して <script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) +'px'; } </script> でDOCTYPEやブラウザに関係なく動くと思いますが、どうでしょう？
補足
ありがとうございます。 勉強になりました。 もう一つ教えていただけますでしょうか？ 下記の通り、style='position:absolute;top:200px; right:100px; ' を追加し画面の中ほどに画像をおいて、そこから画像をスクロールさせようと思うのですが、スクロールをすると、画像が上部に移動してしまいます。 中央部に固定された状態で下部へ画像がスクロールすることはできますでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> <div id='obj1' style='position:absolute;top:200px; right:100px; '> <img src="a.gif"> </div> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> </body> </html> <script type="text/javascript"> window.onscroll = function(){ document.getElementById('obj1').style.top = (document.body.scrollTop ||document.documentElement.scrollTop) +'px'; } </script>
関連するQ&A
- JavascriptでObjectからJSON形式変換するにはどうすればいいでしょうか？
toSourceだと少し違うし、どうすればいいのでしょうか。簡単に変換できる関数でもあればいいのですが、わかりませんでした。 どなたかご教授お願いします。 <!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>objctからJSONに変換</title> <script type="text/javascript"> obj = new Object(); obj.test = "txt"; str = obj.toSource(); document.write(str); //--> </script> </head> <body> </body> </html>
- ベストアンサー
- JavaScript
- script language？ type？
javascript の知識が無いのですが、 ------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> ～～～ <meta http-equiv="content-script-type" content="text/javascript"> </head> <body> <script language="JavaScript"> ～～～ </script> </body> ------------------------------------------ あるプログラムで、 language="JavaScript" のスクリプト言語を <script type="text/JavaScript"> と属性を書き換えても問題ないようですが、 各ブラウザ的に問題ないでしょうか？ また、SSL使用下で同scriptを利用する場合、 SSLの表示が中途半端になるようのですが、 相互関係のヒントか対処法を教えて下さい。
- ベストアンサー
- JavaScript
- Firefoxで下の隙間が開く
http://oshiete1.goo.ne.jp/qa4870757.html この質問の続きですが、 Firefoxで下の隙間があきます。IEでは隙間が無いです。Firefoxで一番下までスクロールしても下の隙間を無くす方法をお願いします。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 上のDTDで隙間が開く 下のDTDなら開かない <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> scriptは、xrea.comの見本です。 scriptは一番下に置きたいのです。 下記例のHTMLは単純な例です。 ********************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja-JP"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>最終行の表示テスト</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"><!-- *{margin:0 50px;} #body{border-left:1px solid red; border-right:1px solid blue; background-color: #EEE;} --></style> </head> <body> <div id="body"> <p style="padding-top: 800px;">最終行</p> </div> <script type="text/javascript"><!-- var ID="100000000-INDEX"; var AD=1; var FRAME=0; // --></script> <script src="http://j1.ax.xrea.com/l.j?id=100000000-INDEX" type="text/javascript"></script> <noscript> <a href="http://w1.ax.xrea.com/c.f?id=100000000-INDEX" target="_blank"><img src="http://w1.ax.xrea.com/l.f?id=100000000-INDEX&url=X" alt="AX" border="0"></a> </noscript> </body> </html>
- ベストアンサー
- HTML
- javascriptからframeへの出力方法
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function init(){ $("f1").innerHTML = "hoge"; $("f2").innerHTML = "piyo"; } </script> </head> <frameset cols="50%,*" onload="init()" > <frame id="f1"> <frame id="f2"> </frameset> </body> </html> 上記、二つに分けたフレームにそれぞれ"hoge"と"piyo"と表示したいのですが出来ません。フレームにjavascriptからアクセスするにはどうしたらよいですか？
- ベストアンサー
- JavaScript
- 以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooト
以下のタグはクリックすると画像が切り替わり、新しいウィンドウでgooトップへリンクするjavascriptです。 はじめて作ったタグなので無駄なところを教えてください また、同じウィンドウで開くにはどこをいじったらよいですか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <script type="text/javascript"> function change(){ document.getElementById("pic").src="2.jpg"; window.open("http://www.goo.ne.jp/");} </script></head> <body> <a href="javascript:change();"><img id="pic" src="1.jpg" alt="gooへリンク"></a> </body></html>
- ベストアンサー
- JavaScript
- HTMLソースにない文字がブラウザ画面に表示
HTMLのソースについて DOMソースについて ある画面のHTMLについて質問です。HTML自体には、閉じるタグが漏れているとかそういったミスが ないことを確認済。 対象のHTMLをブラウザで見ると一番先頭に「/」（半角スラッシュ）が入っています。HTML自体をどんなにみても 余計なスラッシュはありません。見落としがあるといけないので検索をしてみたのですがやはりありません。これは間違いありません。 IE１０ DebugBarを使用しDOMソースというのをみると、<body>のすぐ下に「/」がありその下に<meta ・・・ が続いています。 FireFoxで見てもやはり「/」は画面の一番上に表示されています。インスペクタでみるとIE同様 <meta ・・・ <link ・・・ が、bodyタグ、スラッシュ、の次に続きます。 画面で右クリックしソースをみると 一番先頭に「/」があり次に <!DOCTYPE ・・・と続きます。 すごく困っているのは このスラッシュを取り除きたいのですが、どうしたらいいのでしょうか？ bodyの中を空にしてみたのですがやはり画面でみると先頭に半角スラッシュが登場します。 ほんとうにわからず質問させていただきました。 次に どうしてこのような現象が起きるのでしょうか？ HTMLの先頭部分は以下のとおりです。 bodyタグの中は簡単なtebleです ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <!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> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="noindex,nofollow"> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/xxx.js"></script> <script type="text/javascript" src="js/xxxxxx.js"></script> </head> <body> <div> <table> (略） </table> </div> </body> </html>
- 締切済み
- HTML
- googleに飛べない
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script language="JavaScript"> <meta http-equit="refresh"content"0;http://www.google.co.jp/"> </script> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 13.0.4.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <title> </title> </head> <body> <noscript> <br>JavaScriptを有効にして下さい<br> </noscript> </body> </html> googleに飛べないのですがどこの記述が間違っているのでしょうか？ ご教示お願いします。
- ベストアンサー
- JavaScript
- XHTMLで外部JSファイルを読み込むには？
XHTMLで外部JSファイルを読み込むには？ よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか？？ アドバイス頂ければ幸いです。よろしくお願いいたします。
- ベストアンサー
- 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=shift_jis"> <title>○○○○</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> 文をずらずら・・・ </body> </html>
- 締切済み
- HTML
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
お礼
ありがとう御座います。 解決致しました。 大変勉強になりました。