• 締切済み

ThickBoxのバグ？

下記のようにThickBoxでiframe表示しているのですが、ブラウザに横スクロールバーがでている状態でThickBoxを表示させると、隠れている部分（スクロールして表示される部分）がオーバーレイ表示されません。 ThickBoxはVer3.1、ブラウザはＩＥ７です。ThickBoxのバグなのでしょうか？ <a href="xxxx.html?KeepThis=true&TB_iframe=true&width=300&height=300" class="thickbox">○○○○</a><br /> それから、KeepThisの意味が分からないのですが、こちらも教えていただけると助かります。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ThickBoxはまったく知りませんが・・・ 文章だけだとわかりにくいのですが、スクロールバーは親フレームのもの？ それともiframeのスクロールバーのことなのでしょうか？ 配布元の説明を調べてみましたか？　http://jquery.com/demo/thickbox/ サンプルがいくつか出ているし、とりあえずそこで実験してみればもともとがどういう仕様か確認できるでしょう。（親フレームで横スクロールバーを出すには、ブラウザ幅を縮めてあげれば可能です。） 手元にIE7がないのでこちらでは実験できませんでしたが、IE6では問題ない表示と思われます。 そのサンプルの中にもありますが、「KeepThis」はiframeをモーダル的に扱うか否かを設定するプロパティみたいですね。（3番目のサンプル） また、IE7に関しては多少トラブルがあるみたいで、「ThickBox Forum」でIE7で検索して見れば、情報が得られます。 いくつか解決策もあるみたいですが、完全ではなさそう。 （全部は見てないのでよくわかりません） まぁ、バグというよりは、未対応なだけなのでは？（ｊQueryかThikBoxかどちらなのかわかりませんが・・） （↑Web検索で15分程度で、調べた内容です）

flatpond
質問者

お礼

回答ありがとうございます。 スクロールバーは親フレームのものです。 配布元のサンプルで実験してみたら、問題なく動いているように見えます。 使い方や環境の問題かもしれませんね。

flatpond
質問者

補足

自己解決しましたので、ご報告します。 HTMLにDOCTYPE宣言を入れたら、正常に動作するようになりました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ThickboxでHTMLを指定サイズで表示したい

    ThickboxでHTMLページを指定したサイズで表示させたい。 お世話になります。 自社サイトでthickboxを使用したいと考えています。既に画像をクリックして大きな画像を表示させる（オーバーレイ表示）ためにthickboxを導入しており、それは比較的簡単だったのですが、今回は別個に作成したHTMLページを同じようなデザインで表示させたいと思っています。 いろいろなサイトを参考にしてこのようなソースになりました。table{width:800px;height:600px}が記述されたsample01.htmlというページをやはりwidth:800px、height:600pxでthickboxでオーバーレイ表示させたいというのが目標です。 <head> <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="all"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/thickbox.js"></script> </head> <body>～中略～ <a href="sample01.html?width=800px&height=600px" class="thickbox"><img src="images/sample02-small.jpg" alt="画像の説明" border="0"></a> </body> ところが、一応Thickboxは機能するのですが、キレイな形で表示されず、またその理由もよく分からず困っています。初心者なので、つまらないところで行きつまっているかもしれませんが、どうか知恵をお貸し下さい。 ※分からない点 (1)800×600px指定しているのに、小さいサイズで表示され、その文スクロールバーが表示される。インラインフレームのようなデザインにしたくない。 (2)上部にグレー部分ができる（Closeボタン用だと思われるがいらない）。既に画像を表示させる際の場合のように右上部に自分で制作したボタンを配置してCloseボタンとしたい。 既に作成したthickboc.cssは--- #TB_closeWindow{ position:absolute; width:30px; height:30px; top:-15px; right:-15px; } #TB_closeWindowButton{ background-image:url(../images/button-thickbox-close.png); position:absolute; width:30px; height:30px; } (3)表示させたHTMLが文字化けする。 <script type="text/javascript" charset="Shift_JIS"></script>指定しています。 以上です。どうかご教示よろしくお願いします。

    • 締切済み
    • CSS
  • オートページングだとライトボックスが開かない

    大量の写真を表示するために、jquery.masonry + infinitescroll を使用しています。 http://masonry.desandro.com/demos/infinite-scroll.html 写真をクリックしたときにライトボックス風にページを表示できるよう↓このようにthickbox.jsを入れているのですが、 <a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a> オートページングで読み込んできた部分は、写真をクリックしてもthickboxが開かずにそのまま画面が遷移してしまいます。 ■現在の状況 ・masonryで写真を敷き詰めるのはできています ・infinitescrollで、スクロールダウンしていくと自動的に次の写真を読み込んで敷き詰めます。これもできています。 ・最初に表示されるページ（オートページングではないページ）では、写真をクリックすればthickboxが開きます。 ・最初に表示されるページをスクロールダウンして自動的に読み込まれた写真達は、クリックするとthickboxではなく画面遷移します（ブラウザのアドレス欄がその画像のパスになってしまう） ■やってみたこと ・infinitescroll で <div id="container">～</div>を読み込むように指定しているので、２ページ目以降のファイルで、#container　の中でthickbox.js, thickbox.cssを宣言してみました。 <div id="container"> <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="all" /> <script type="text/javascript" src="js/thickbox.js"></script> <a href="foophp?fileName=filename.png&keepThis=true&TB_iframe=true&height=500" title="" class="thickbox"><img src="filepath/filename.png" width="210" border="0" /></a> </div> のようにcontainer内に表示してみましたが状況は変わらず、オートページングで読んだページでは写真をクリックしても画面遷移してしまいました。 ■解決したいこと オートページングで読み込まれた写真をクリックしても、画面遷移せずにthickboxを開きたい。 何卒ご教示の程、お願い申し上げます。

  • thickbox3.1の表示位置バグ

    thickbox3.1を使って画像をポップアップで表示させているのですが、 サイト幅が下にとても長く、その途中のコンテンツで適応させると、 PCで確認した際は画面中央に表示されるのですが、 iPhoneやiPadで観たときに、クリックで何も起こらないな～・・・と思っていたら、 スクロールして一番上までのぼって行くとそこに表示されてました。 このバグの回避方法を教えていただけましたら幸いです。 よろしくおねがいいたします。

  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • Thickboxを自動で閉じることは不可能でしょうか？

    お世話になります Thickbox.jsを使用してloading graphのようなものを作っているのですが100%になったら自動で閉じるようにはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>Thickbox</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen" /> </head> <body><div id="wrapper"> <a href="search.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=90&width=300" title="charasearch" class="thickbox"> <input type="button" value="character search" class="search"> </a> </div> </body> </html> <<search.html>> 実際にはhtmlファイルではなくcgiファイル(search.cgi)で処理を行っています Thickbox.cssをいじって本文のみ表示させてます（上側のTitleやcloseボタンはdisplay:none;しています 必要なとこだけになりますが・・・ <script type="text/javascript"><!-- window.onload = function() { Timer = setInterval('counts()',1); } w=0; function counts() { w += 1; document.getElementById("graph").style.width = w + "px"; if(w >= 300) { clearInterval(Timer); } } //--></script> <style type="text/css"><!-- #graph { width:0px; height:20px; background-color:red; margin-top:5px; float:left; } --></style> <div id="graph"><div> ページを移動させていけば簡単なのですが大まかな流れとして id,passなどを入力 character searchボタンを押す Thickboxでseach.cgiを呼び出しchara.cgiの中から同じものがないか調べる あればエラー表示、なければ続けて入力といった感じにしています

  • IE6,IE7でThickBox3の画像がうまく表示されません。

    IE6,IE7でThickBox3の画像がうまく表示されません。 htmlへの記述は以下のような感じなのですが、Firefoxでは問題なく表示されるのですが IE6、IE7だと、画像だけ表示されなかったり、同じ画像が上下に２枚表示されたりします。 そしてたまに上手く表示されます。 検索するとIEで真中に表示されないというのがありましたが、それとは原因が違うようです。 どなたかご存知の方はいませんでしょうか？ 宜しくお願い致します。 <ul> <li><a href="../img/photo/flower/001.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/001_s.jpg" alt="花" width="100" height="66" /></a></li> <li><a href="../img/photo/flower/002.jpg" class="thickbox" rel="flower" title="花"><img src="../img/photo/flower/002_s.jpg" alt="花" width="100" height="66" /></a></li> </ul>

    • ベストアンサー
    • HTML
  • HTMLの画像のリンクについて

    ページ内にインラインフレームを作成し画像サムネイルをクリックするとフレーム内に表示するという感じにしたいのですが、フレームサイズを500×500にしたので、このサイズを超える画像を表示するとページのスタイルが崩れてしまいます。元画像のリサイズをせずに表示させる方法はないでしょうか？ 構造は以下のようになってます。 <html> <head> <title>photo</title> </head> <body BGCOLOR="007777"> <br><br> <iframe NAME="photo" WIDTH="500" HEIGHT="500" FRAMEBORDER="0" ALIGN="right"></iframe> <br><br><br> <p> 　　　<a HREF="gazou1.jpg" TARGET="photo"><IMG SRC="gazou1.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> <a HREF="gazou2.jpg" STYLE=""><IMG SRC="gazou2.jpg" ALT="" WIDTH="50" HEIGHT="50" BORDER="0"></a> </body>

  • Ｔｈｉｃｋｂｏｘに表示されたページのアドレスを取得できないでしょうか？

    お世話になります 入力されたアドレスが実在するか調べたいのですがThickboxに表示されたホームページのアドレスを取得することはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>chosproduce.com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen"> <script type="text/javascript"><!-- function addcheck() { url = document.getElementById("add").value; document.getElementById("hide").href = url + "?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=0&width=0"; document.getElementById("push").click(); document.getElementById("er").innerHTML = ""; checkurl = (Thickboxに表示されたアドレス); if(checkurl != url) { document.getElementById("er").innerHTML = "実在しません"; } tb_remove(); } //--></script> <style type="text/css"><!-- #hide { display:none; } --></style> </head> <body> <div> <input type="text" name="add" id="add"> <input type="button" value="check" onclick="addcheck()"> <a href="" title="addcheck" class="thickbox" id="hide"> <input type="button" value="c" id="push"> </a> <div id="er"></div> </div> </body> </html> という感じにしています window.openだと(window名).location.hrefで多分取れると思うのですが開いて閉じると画面がパチッとなってしまうのでできません thickboxだとwindow名（iframe仕様になってるのでiframe名かな？）が何かお分かりになる方いらっしゃいますでしょうか？

  • iframe内でのスクロールについて

    iframeに関する質問です。 iframe内のみアンカーでスクロールしたいのですが、iframe含めページ全体がスクロールしてしまいます。 sampleファイルとして質問したい部分を抜粋したものを下記を記載します。 ◆index.html(親html) ◆01.html(iframe含む子html) ↓ ◆index.html <ul> <li><a href="01.html#Aarea" target="inline">子htmlのAへスクロール</a></li> <li><a href="01.html#Barea" target="inline">孫htmlのBへスクロール</a></li> <li><a href="01.html#Carea" target="inline">孫htmlのCへスクロール</a></li> </ul> <iframe src="01.html" id="inline" name="inline" width="300px" height="300px"></iframe> ◆01.html <div name="Aarea" id="Aarea" style="background:#00F; width:300px; height:300px; color:#CCC;"> <p>A area</p> </div> <div name="Barea" id="Barea" style="background:#9C0; width:300px; height:300px; color:#CCC;"> <p>B area</p> </div> <div name="Carea" id="Carea" style="background:#C36; width:300px; height:300px; color:#CCC;"> <p>C area</p> </div> これを実行した際に親であるindex.htmlもスクロールしてしまいます。 以前にも似た質問がされていましたが、対処方法が思っていたものと違っていた為質問自体重複してしまうかもしれませんが質問するに至りました。 完全にiframe内のみをスクロールさせる方法はありますでしょうか。 よろしくお願いします。

  • iflameのスクロールバーについて

    ページ内に、iflameでページを表示しようとしています。 縦に長いページなので、縦にだけスクロールバーを出したいのですが… <iframe src="http://...." width="600" height="400" scrolling="yes"></iframe> こんな感じに設定しています。 ウィンドウズIEではキレイに見えています。 ですが、マッキントッシュIEで見ると、スクロールバーが表示されません。 <iframe src="http://...." width="600" height="400" scrolling="auto"></iframe> にすると、マッキントッシュIEでもスクロールバーがきれいに表示されるのですが、 ウィンドウズIEで、必要のない下の部分（横部分）のスクロールバーまで出てしまいます。 この横スクロールバー、たとえ中味を短くしても、表示されるので…すごーく嫌なのです…。 マッキントッシュと、ウィンドウズ両方で、たて部分だけスクロールバーが出るようにする方法はあるのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する