• 締切済み

あるscriptを使うとIEだけ横スクロール

こんにちは。 質問させていただきます。 下記URLのJavascriptでタブ切り替えをしています。 http://nais.to/~yto/tools/css_tabs/ 導入事態はとても簡単に出来たのですが、 何故かIEで表示するとブラウザ全体に横スクロールが出てしまいます。 上記のスクリプトを切ると横スクロールは消えます。 javascriptの中身はこんな感じです。 // bpref = tab body prefix, hpref = tab header prefix function seltab(bpref, hpref, id_max, selected) { if (! document.getElementById) return; for (i = 0; i <= id_max; i++) { if (! document.getElementById(bpref + i)) continue; if (i == selected) { document.getElementById(bpref + i).style.visibility = "visible"; document.getElementById(bpref + i).style.position = ""; document.getElementById(hpref + i).className = "open"; } else { document.getElementById(bpref + i).style.visibility = "hidden"; document.getElementById(bpref + i).style.position = "absolute"; document.getElementById(hpref + i).className = "close"; } } } とても軽量で余計な機能も無いので気に入ってるんですが、 横スクロールを確認してからは他のスクリプトで対応してます。 jsにお詳しい方がいらっしゃれば、どうかご教授下さい。 よろしくお願いいたします。

noname#146867
noname#146867

みんなの回答

回答No.1

こんばんは。 非常に断片的なので、なんとも言えませんが・・・、 document.getElementById(hpref + i).className = "open"; と document.getElementById(hpref + i).className = "close"; の部分のCSSが、 padding: 0.5em; となっています。 多分、これが原因かと思いますが・・・。 paddingを取るなら、その分の余裕を予め取っておかないと、横スクロールが出ます。

関連するQ&A

  • これは何をするスクリプトですか?

    <head> <script type="text/javascript"> <!-- function loading() { if (document.getElementById){ document.getElementById('load').style.visibility = 'hidden'; } else { if (document.layers){ document.layers['load'].visibility = 'hidden'; } else { document.all('load').style.visibility = 'hidden'; }}} // --> </script> </head> <body onload="loading()"> 詳細は略して書いています。 プログラムに全く詳しくないので、何をやろうとしているスクリプトなのかわかりません。 皆様には簡単かとは思いますが、よろしくお願いします。

  • IE6ではjavascriptが動くのにNN7.1では動かない。

    ”コンピューター家庭向け”のところでも質問したのですが、回答がないのでここで質問させていただきます。 HTML部分 <div class="galico"> <script language="javascript" src="poser.js"></script> <a href="javascript:showgallery()"> <img src="../base/gallery.gif" alt=""> </a> </div> SSC部分 .galico { z-index: 3; position: relative; top: 29px; left: -200px; } javascript部分 function showgallery(){ if ( document.all )document.all('gallery').style.visibility ='visible' else if ( document.layers )document.layers['gallery'].visibility ='show' else if ( document.getElementById )document.getElementById('gallery').style.visibility ='visible' } この記述で、IE6では思った通りに動いてくれます。("../base/gallery.gif"をクリックするとjavascriptを実行してくれる。) ところが、NN7.1では "../base/gallery.gif" に触れても、ステータスバーにjavascriptにリンクするように表示もされないし、クリックしても動きません。 なぜかSSCの "position: relative;" を "position: absolute;" にしてやると動くのですが。。。 なぜでしょうか。わかりやすく教えていただけないでしょうか。

  • ページを最初に表示したときオンになるタブを作る方法(css,javascript)

    cssとjavascriptを使ってタブを使用したページを作っています。 ページ表示時に一番左に表示される01タブを黒く表示しておいてほしいのですが、うまくいきません。 元にしたサンプルはちゃんと表示される仕様になっていましたが、いじっているうちにおかしくなったようです。 原因がわからないのでアドバイスいただけると大変ありがたいです。 よろしくお願い致します。 下記が制作中のhtmlです。 http://www014.upp.so-net.ne.jp/kanikko/test/test.html js中身******************* /*--setup--*/ window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('topics01'), document.getElementById('topics02'), document.getElementById('topics03'), document.getElementById('topics04'), document.getElementById('topics05'), document.getElementById('topics06'), document.getElementById('topics07') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } css中身******************* #javascript_tab_sample { width:448px; background:#ffffff; border:1px solid red; margin-bottom:10px; text-align:left; } #javascript_tab_sample ul#tab { margin:0; padding:0; border:1px solid black; background:blue; float:left; width:100%; } #javascript_tab_sample ul#tab li { text-align:center; border:1px solid orange; border-bottom:none; float:left; width:5em; } #javascript_tab_sample ul#tab li.selected { background-color:#000; } #javascript_tab_sample ul#tab li.selected a { color:#fff; }

    • ベストアンサー
    • HTML
  • Netscape4でスタイルシートを設定すると、スクリプトが動作しません。

    お世話になっています。 現在、スタイルシートのvisibility属性を利用してリンクをクリックすると、見えなかったテーブルを表示させる、というサンプルを作っています。 しかし、テーブル内にスタイルシートの設定を入れた途端、Netscape4のみ動作しなくなりました。(「#この部分が~」のところです) 原因が分かれば、教えていただきたいと思います。 ソースは次の通りです。 function hyoji(lay){ if(document.getElementById) { document.getElementById(lay).style.visibility = 'visible'; } else if(document.all) { document.all(lay).style.visibility = 'visible'; } else if(document.layers) { document.layers[lay].visibility = 'show'; } } <A HREF="javascript:hyoji('test0')">ZERO</a>  <A HREF="javascript:hyoji('test1')">ONE</a> <A HREF="javascript:hyoji('test2')">TWO</a> <div id = "test0" style="position:absolute; top:100px; left:100px ;visibility:hidden"> <table border=3> <tr> <td bgcolor=teal>ZERO</td> </tr></table></div> <div id = "test1" style="position:absolute; top:200px; left:100px ;visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink> #この部分が問題? <span style="line-height:120%">ONE</font></td> </tr></table></div> <div id = "test2" style="position:absolute; top:150px; left:100px; visibility : hidden"> <table border=3> <tr><td bgcolor=hotpink>TWO</td></tr> </table> </div>

  • ページが切り替わるスクリプトで最初から指定のページを表示させる

    <html> <head> <script type="text/javascript" language="JavaScript"> <!-- JavaScript小技集 2005. 6.17 function showthis(obj) { if(!obj) return false; if(document.getElementById) { document.getElementById("item1").style.display = "none"; document.getElementById("item2").style.display = "none"; document.getElementById("item3").style.display = "none"; document.getElementById(obj).style.display = "block"; } else { return false; } } // --> </script> <style type="text/css"> #item1,#item2,#item3 { display: none; } </style> </head> <body> <form> <select onchange="showthis(this.value)"> <option selected="selected">記事を選ぶ</option> <option value="item1">記事1</option> <option value="item2">記事2</option> <option value="item3">記事3</option> </select> </form> </body> <html> これなんですが、これを貼ってあるページを読み込んだ際、最初からitem1を表示した状態にしたいのですが どうすればよいのでしょう?

  • javascriptをCSSに書き込むと動作しません。何故ですか?

    下記のjavascriptをCSSに書き込みました。拡張子は.jsとしました。 jsのフォルダにtopmuv.jsというファイル名にしました。 <script type="text/javascript"> <!-- function blink() { if (!document.all) { return; } for (i = 0; i < document.all.length; i++) { obj = document.all(i); if (obj.className == "blink") { if (obj.style.visibility == "visible") { obj.style.visibility = "hidden"; } else { obj.style.visibility = "visible"; } } } setTimeout("blink()", 500); } // --> </script> </head> <body onload="blink()"> htmlの読み込みは <LINK rel="stylesheet" href="js/topmuv.js" type="text/javascript"> と書いています。 この場合、上記javascriptのソースをシート上にダイレクトに書き込むと正常に動作しますがcssにすると動作しません。 何が悪いのでしょうか? 詳しい方宜しくお願いします。

  • Java script エラー

    以前、質問して教えていただいたJava scriptですが、 サーバにアップしたところ Java script エラー 「pages[i].style.display = 'none';」が発生しました。 Java scriptの知識が全くない素人で申し訳ないのですが、 エラーの原因を教えていただけますでしょうか? よろしくお願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml"​ xml:lang="ja" lang="ja"> <head> <title>タブ切替のサンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <script type="text/javascript"> // <![CDATA[ var tab = { peek:0, init: function(start){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(var i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } this.peek = start; this.showpage(tabs[this.peek]); }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) { tab.peek = num; break; } } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'present'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } function initialize(){ tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('page1'), document.getElementById('page2'), document.getElementById('page3'), document.getElementById('page4'), document.getElementById('page5') ] } tab.init(0); } function proceed(num){ if(tab.peek + num < tab.setup.tabs.length && 0 <= tab.peek + num){ tab.showpage(tab.setup.tabs[tab.peek + num]); } } // ]]> </script>

  • マウスでスクロールした値を取得できない

    IE6.02を使っています。 マウスの座標を追いかけるプログラムで、 ブラウザを縦方向にスクロールしてもその座標を取得したいのですが、 なぜかdocument.body.scrollTopが0のままで追いかけてきませんでした。 次のどこがいけないのでしょうか? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>sample</title> <script type="text/javascript"><!-- document.onmousemove=function(e){ if(document.all){ Myimg.style.pixelLeft=document.body.scrollLeft+event.x+15; Myimg.style.pixelTop=document.body.scrollTop+event.y+15; } else if(document.getElementById){ document.getElementById("Myimg").style.left=e.pageX+15; document.getElementById("Myimg").style.top=e.pageY+15; } } --></script> </head> <body> <span id="Myimg" style="position:absolute"><img src="gazou.gif"></span> a<br>←スクロールバーがでるように改行していく a<br> a<br> a<br> a<br> ・ ・ ・ </body> </html>

  • JavaScriptエラーについて

    お世話になります。 おわかりになる方、ぜひ教えてください。 タブメニューのボタンを押すと、内容が切り替わるというJavaScriptなのですが、いちよう正常に動作はしているようなのですが、エラーがでてしまいます。 エラーを無くしたいのですが、どうすればいのでしょうか? 【エラー内容】 'document.getElementById()'はNullまたはオブジェクトではありません。 【HTML】 <div id="javascript_tab_sample"> <ul> <li><a href="#W3C">W3C</a></li> <li><a href="#xhtml">xhtml</a></li> </ul> <dl id="w3c"> <p>内容1</p> </dl> <dl id="xhtml"> <p>内容2</p> </dl> </div> 【JavaScript】 window.onload=function() { tab.setup = { tabs: document.getElementById('tab').getElementsByTagName('li'), pages: [ document.getElementById('w3c'), document.getElementById('xhtml') ] } tab.init(); } /*--setup end--*/ var tab = { init: function(){ var tabs = this.setup.tabs; var pages = this.setup.pages; for(i=0; i<pages.length; i++) { if(i !== 0) pages[i].style.display = 'none'; tabs[i].onclick = function(){ tab.showpage(this); return false; }; } }, showpage: function(obj){ var tabs = this.setup.tabs; var pages = this.setup.pages; var num; for(num=0; num<tabs.length; num++) { if(tabs[num] === obj) break; } for(var i=0; i<pages.length; i++) { if(i == num) { pages[num].style.display = 'block'; tabs[num].className = 'selected'; } else{ pages[i].style.display = 'none'; tabs[i].className = null; } } } } よろしくお願いします。

  • フラグに名前を付けるには?

    spflagが0なら指定ID(i)のクラスaを除いてbを付加する、1なら逆のbを除いてaを付加するスクリプトの部分。 var spflag=0 function special(i,a,b){ if (spflag==0){ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([a], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([b], ' '); spflag=1;} else{ document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).remove([b], ' '); document.getElementById(i).className = document.getElementById(i).className.split(/\s+/).merge([a], ' '); spflag=0;} } これのspflagにiの名前を(iはID)足してIDごとのフラグ管理を行いたいのですが、どのようにするのでしょうか?

専門家に質問してみよう