メニューバーもスクロールに合わせて動く仕組み
- 左側に縦メニューのあるスタイルシートでレイアウトしたXHTMLのページを作成しています。コンテンツでブラウザにスクロールバーがついたときに、メニューバーもスクロールに合わせて動く仕組みをJavaScriptで実装しました。
- 動作はするのですが、限りなくスクロールするため、下のほうのメニューが見えなくなってしまいます。http://allabout.co.jp/internet/javascript/closeup/CU20010713/index.htmで紹介されているものも試しましたがうまくいきません。
- 上のメニューのような一定の場所の間を動かすように改善したいです。
- ベストアンサー
メニューバーもスクロールに合わせて動く仕組み
Javascriptの方に質問を出したのですが、 回答していただけなかったのでこちらでも質問させてください(;_;) 左側に縦メニューのあるスタイルシートでレイアウトしたXHTMLのページを作成しています。 コンテンツでブラウザにスクロールバーがついたときに、メニューバーもスクロールに合わせて動く仕組みを JavaScriptでいれました。 <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 class="menu" id='obj1' style='position:absolute;left:auto; top:90px;'> <script type="text/javascript"> for(var i=0;i<100;i++){document.write('<br>')} </script> 動作はするのですが、限りなくスクロールするため、下のほうのメニューが 見えなくなってしまいます。 http://allabout.co.jp/internet/javascript/closeup/CU20010713/index.htmで 紹介されているものも挑戦したのですがなかなかうまくいきません。 上のメニューのような一定の場所の間を動かすようにしたいのですが、どう改善したらよいでしょうか？
- go_and_goes
- お礼率50% (43/86)
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<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 f(){ var e=document.getElementById('orz'); e.style.top=(document.body.scrollTop/(document.body.scrollHeight-document.body.clientHeight))*(document.body.scrollHeight-e.clientHeight); setTimeout(f,10); } </script> </head> <body onload="f();"> <div class="menu" id="orz" style="position:absolute;border:solid 0px;left:auto;top:0px;width:200px"> <script type="text/javascript"> for(var i=0;i<50;++i){document.write(i+"<br/>");} </script> </div> <div class="contents" style="position:absolute;border:solid 2px;top:0px;left:200px;height:3000px;">コンテンツ</div> </html> こういうことかな？ 確実に使いにくそうなメニューですが・・・。
その他の回答 (2)
- talepanda
- ベストアンサー率58% (45/77)
＞コンテンツの高さの間のみでメニューをスクロール つまり、一番下までスクロールしたときに、メニューバーにはどうなっていて欲しいのしょうか？ コンテンツの底辺と、メニューバーの底辺が一致する、ということですか？ また、一番上を表示しているときは、コンテンツの上辺とメニューバーの上辺が一致する、ということでしょうか？ 多少冗長でもいいので、どういうことがしたいのかわかるように説明してもらえたら、可能か不可能か、可能であればどうやればいいのか、お答えできると思います。
お礼
ご返答ありがとうございます。 そうなんです。コンテンツの下の方を見ているときはコンテンツの底辺と、メニューバーの底辺が一致して、ページにアクセスした際や一番上を表示しているときは、コンテンツの上辺とメニューバーの上辺が一致するといった表示方法にしたいのです。 分かりづらい説明ですみません。 また、メニューのサイズですが、ブラウザの高さより確実にはみ出します（1000px位あります）。
- talepanda
- ベストアンサー率58% (45/77)
＞動作はするのですが、限りなくスクロールするため、下のほうのメニューが ＞見えなくなってしまいます。 表示位置固定で、メニューの高さがウィンドウの高さより大きいわけですから、どんなにスクロールしてもはみ出た部分は表示されないでしょう。 ＞上のメニューのような一定の場所の間を動かすようにしたいのですが もう少し詳しくお願いします。 表示位置を固定しなければいいだけでは？とも思うのですが。
お礼
回答有難うございます。 左側にこのスクロールするメニューがあって右側にはメニューよりも 高さのあるコンテンツが入るようになってます。 ┏━┳━━━━┓ こんなレイアウトになってま す。 分かりづらくてすみません。 ┃メ┃ コ ┃ 固定の指定を取ってみたのですが、動きが変わりませんでした。 ┃二┃ ン ┃ コンテンツの高さの間のみでメニューをスクロール ┃ュ┃ テ ┃ させることはやはり不可能なのでしょうか(>_<)? ┃｜┃ ン ┃ ： ： ツ ┃ ： ： ┃ ┗━━━━━━┛
補足
何度もすみません(;_;) メニューのスクロールが限りなくスクロールするという現象ですが、右側のコンテンツや一番下に表示させているCopyrightの部分までも通り越して下のほうまでスクロールしていくんです(>_<)
関連するQ&A
- スクロールしても画像・文字がついてくる
教えて!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
- スクロールバーが反映されない
ＨＰ作成まったくの初心者です。 今つまづいているのが、スクロールバーの色が 変更できないことです。 ＩＥは「Internet Explorer 6 Service Pack 1 (Windows XP SP1) 」です。 いちおう、タグを載せます。 初心者なのでめちゃめちゃだと思いますので お恥ずかしいのですが、よければご教授ください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Style-Type" content="text/css"> <title>☆</title> <script type="text/javascript"> <!-- function jikoku() { dd = new Date(); document.F1.T1.value = dd.toLocaleString(); window.setTimeout("jikoku()", 1000); } // --> </script> <STYLE type="text/css"> <!-- body,td { font-size : 12px; color : #bc8f8f; font-family : Verdana; line-height : 15pt; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration : none; } a:link{ color : #ffb9d4; } a:active { color : #69b4; } a:visited{ color : #ffd9e4; } a:hover{ color : #FFd9b4; position : relative; top : 2px;} --> </style> <STYLE type="text/css"> <!-- body { scrollbar-face-color:#ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color:#ffb9d4; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; } --> </STYLE> </head> <body> <BODY background=img/wall.gif> </body> </html>
- ベストアンサー
- HTML
- metaタグについて
xhtml、strictで作っているのですが、metaで疑問に思ったので質問させていただきます。 CSSやJavascriptを外部ファイルにしていても <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> の記述は必要なんでしょうか？
- ベストアンサー
- HTML
- アコーディオンメニュー 開いたまま動かない
アコーディオンメニューを設置したく検索をかけサンプルを入手、手直ししながら設置を試みるのですが、サンプルからして「JavaScriptの記述後 bodyが表示されない」、「親メニューはOKだがサブメニューが開かない」などなど、もう手詰まり状態です。 二日かかって下記 URLまでたどり着き正常な位置にきれいに並ぶのですが、私の作っているページ内ではメニューが開いたままの状態です。 http://d.hatena.ne.jp/takahashijunko/20120202/1328189955 「DOCTYPE宣言」、「@charset "UTF-8」の違いなどで私のページ（以下に記述）で使うことは無理なのでしょうか、それとも私はまったく勘違いをしているのでしょうか？ アコーディオンメニューを使える道があるならばご教授ください。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>○○○○○</title> <meta name="description" content="○,○,○,○,"> <meta name="keywords" content="○,○,○,○,,"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <link rel="stylesheet" href="style2.css" type="text/css"> <script type="text/javascript" src="js/jquery-1.6.min.js"></script> ・・・・URL先コピペの為省略・・・・ </script> </head> XP Chrom - IE8 - Firefox3.6 にて検証 よろしくお願いします。
- ベストアンサー
- HTML
- 等のタグは入れた方が良いのでしょうか?
<link href="http://○○.css" rel="stylesheet"> の様に外部ファイルからCSSやjavascriptを読み込んでいるのですが <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> 等のタグは入れた方が良いのでしょうか? これらのタグの役割がわかりません。
- ベストアンサー
- HTML
- jqueryを使ったスクロール画面が正しく作動しません。
jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span> テスト</span> </div> </div> </div> </body> </html>
- ベストアンサー
- HTML
- ツリー式 メニューを外部ファイルとして読み込みたい
ツリー式 メニューを見つけて参考にさせていただいておりますがメニュー項目を外部ファイルにしたく試行錯誤いたしましたがうまく配列に入れることができません。 どなたか詳しい方、ご教授願えないでしょうか？ よろしくお願いいたします。 下記のscriptの menu[0] = "メニュー,0,0"; のmenu配列を外部ファイルにしたい。 <html> <head> <title>menu</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> content="text/javascript"> <script type="text/javascript" src="crossbrow_lib.js"></script> <script type="text/javascript" src="dhtml_lib.js"></script> <script type="text/javascript"> <!-- BrowserCheck(); menu = new Array; ＊＊＊＊＊ここから↓ menu[0] = "メニュー,0,0"; menu[1] = "<a href=test1.html target=_blank>test11</a>,1,1"; menu[2] = "<a href=test2.html target=_blank>test2</a>,1,1"; menu[3] = "TEST3,1,0"; menu[4] = "TEST3-1,2,0"; menu[5] = "<iframe src=test3-1.html width=600 height=480></iframe>,3,2"; menu[6] = "TEST4,1,0"; menu[7] = "TEST4-1,2,0"; menu[8] = "<iframe src=test4-1.html width=600 ＊＊＊＊＊ ここまで height=480></iframe>,3,2"; ExpposinitX =10; ExpposinitY =10; ExpWidth = 600; function init(){ ExplorerTree(); } //--> </script> <script type="text/javascript"> <!-- //--> </script> <style type="text/css"> <!-- --> </style> <link rel="stylesheet" href="style.css" type="text/css"> </head>
- ベストアンサー
- JavaScript
- METAタグについて
HPに以下の様な記述をしたのですが、gooやinfoseekに登録して１週間経ても、全く検索されません。 <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta name="robots" content="index,follow"> <meta name="keywords" content=""> <meta name="description" content=""> 正しい記述方法について、何方か教えて下さい。
- ベストアンサー
- HTML
- z-indexを指定したボックスの下に表示させる
z-indexとjavascriptを組み合わせて下記のようなページを作っています。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ああああ</title> <meta http-equiv="Content-Script-Type" content="text/JavaScript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <script type="text/javascript"> <!-- function MM_showHideLayers() { //v9.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <style type="text/css"> div#aaa { z-index: 2; position:absolute; width: 300px; } div#bbb { z-index: 1; position:absolute; width: 300px; } </style> </head> <body> <h1>あああ</h1> <p><a onclick="MM_showHideLayers('aaa','','show','bbb','','hide')">ううう</a> / <a onclick="MM_showHideLayers('aaa','','hide','bbb','','show')">えええ</a></p> <div id="aaa" style="visibility:visible"> <h2>ううう</h2> <p>うううううううう<br /> うううううううう</p> </div> <div id="bbb" style="visibility:hidden"> <h2>えええ</h2> <p>えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ<br /> えええええええええ</p> </div> <p>いいいいいいいいい<br /> いいいいいいいいい</p> </body> </html> 切り替わるdivの下に<p>いいいい</p>を表示させたいのですが、後ろに回って表示されません。 これを表示させる方法をご存じでしたら教えてください。
- ベストアンサー
- HTML
お礼
ご返答ありがとうございます。 表示できました(＾_＾)! 本当に有難うございました！