• ベストアンサー

thickboxでウィンドウサイズが小さい場合

thickboxを使用したwebページを作成しています。 HTMLに記述したオーバレイ表示するサイズより 開いているブラウザウィンドウが小さい場合、 オーバレイ表示したページの一番上のタイトルが見えなかったり スクロールバーが表示されなかったりして オーバレイ表示したページの全体が見えなくて困っています。 対処法をご存知の方、いらっしゃいましたらお教えくださいますでしょうか。

  • peca
  • お礼率92% (24/26)

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

IE以外なら、予めjavascriptでwindow.resizeBy(x,y)かwindow.resizeTo(x,y) でブラウザウィンドウの大きさをこちらから勝手に変更する事が できますが、IE7以降は操作出来なくなってますね。 thickboxのページに紹介されている下記の他の代替となるライブラリー 「colorbox」 http://colorpowered.com/colorbox/ 「jWuery UI Dialog」 http://jqueryui.com/demos/dialog/ 「fancybox」 http://fancybox.net/ 「DOM Window」 http://swip.codylindley.com/DOMWindowDemo.html 「shdowvox」 http://www.shadowbox-js.com/index.html をみんな試してみましたが、「shdowvox」だと、対処できますね。 オーバーレィをウィンドウサイズに合わせて縮小表示してくれます。 それから、「colorbox」も同様に縮小表示してくれるんですが、 html内容表示だと、今ひとつ中身がくずれたりするんですよ。画像なら OKですが。他のライブリーはみんな「tickbox」と同じ症状になります。 従いまして、jQuery系なら、 「shdowvox」を使うのがベストかと思います。 ※ライブラリーを使ってうまくいかない時は、改造を考えるより、 　他のを探すか、特化した物を作った方が早道です。

peca
質問者

お礼

ご回答いただきありがとうございます。 shadowbox、試してみようと思います！

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

関連するQ&A

  • 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の意味が分からないのですが、こちらも教えていただけると助かります。

  • 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
  • thickboxのjavascriptについて

    ウェブサイト作成初心者です。 ホームページの一部のページでthickboxを使用してhtmlを表示するページを作ろうとしています。 その場合 <head>～</head>内に <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" /> はthickboxを使うページだけに記述すればいいのでしょうか。それとも前ページに記述しないといけないのでしょうか。 お分かりなられる方、お手数ですが教えてくださいませ。

    • ベストアンサー
    • HTML
  • Firefox　横スクロールバーを表示したい

    当方webサイトを制作しています。 大体完成しており、ブラウザチェックをしている段階なのですが 修正したい箇所がありまして、修正方法をどなたか教えていただけますでしょうか。 横幅を960pxで作ったのですが、よくブラウザのサイズを小さくしたときに横スクロールバーが表示されますよね。 ところがFirefoxで確認したところ、横スクロールバー（縦は出ます）が 表示されず、小さくしたら見えていない部分を表示する手段がありません。 960px以下のモニタのユーザへの対処法として、解像度960px以下の場合は（要はページが画面に収まりきらない場合です） 横スクロールバーで、見えていないところも表示できるようにしたいのです。 現状は以下の通りです。 ・bodyに幅は指定していません（ウィンドウのサイズを960px以上に大きくしたときでもセンターに表示させるため） ・cssで960pxのサイズ指定をしている箇所はあります。 ・IE6では横スクロールが表示されています。 ・html上にwidth960pxのimgを置いてみましたが解決にいたりませんでした。 webで調べてみましても、「スクロールバーを消したい」の情報は あるのですが、「表示させたい」の対処法をみつけることができませんでした。 対処法をご存知の方、どうかよろしくお願いいたします。

  • ＩＥで、ウィンドウサイズを小さくすると、ページの左側も欠ける。

    ＩＥで、マウス操作によりウィンドウサイズを小さくしていくと、 通常それに伴い、ページの右側が欠けていきますが、 私が作成したhtmlのページ(css使用)では、ページの左側も 欠けていってしまいます。 そのようにしてサイズを小さくしたウィンドウにおいて、 水平スクロールバーを右端まで動かしたときは、ページの右端まで 表示されるのですが、左端まで動かしたときには、ページの左端まで 表示されません。 水平スクロールバーを左端まで動かしたときに、ページの左端まで 表示されるようにしたいと考えております。 そもそも、ウィンドウサイズを小さくしていくと、 ページの左側も欠けていってしまうことが、既におかしいのでは ないかと思います。ご教授いただきたく、お願い致します。

  • フレームを使わないで毎回メニューを出す方法は？

    こんばんわ。 現在、Webページを作成している途中です。 ヘッダ、メイン、フッタという上から３つのフレームをきっているんですが、ウィンドウのサイズを変えるとヘッダにあるメニューが隠れてしまうと言う指摘を受けました。 そこで、ヘッダとフッタ（せめてヘッダだけでも）をどのページでも表示して、かつウィンドウのサイズに左右されない（スクロールバーなどが出なくて）記述をするにはどうしたらいいのでしょうか？ よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • フレームのサイズ固定とスクロールバー

    初心者ですが、宜しくお願いいたします。 現在「上部にタイトル」「下左にメニュー」「下右に本文」のフレームで３分割されたｈｐを作成途中です。 1.表示サイズを狭くした場合、下右の本文が左によって来て左下のメニューの幅が狭くなってしまいます。左下のメニューの横サイズを固定したいのですがどうすれば宜しいのでしょうか？ 2.また、表示サイズを小さくして上部タイトルの幅よりも狭くなった時にタイトルの下ではなく、画面全体の一番下にスクロールバーを出したいのですが出来ますでしょうか？ 3.同じ事が縦でもあり、上下の表示を狭くした場合下左のメニューの下が隠れたときに、画面全体の右側（下右の本文の更に右）にスクロールバーを表示したいのですがいかがなものでしょう？ デザイン的にフレームとフレームの間にスクロールバーは避けたいのです。 何卒、宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • 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の中から同じものがないか調べる あればエラー表示、なければ続けて入力といった感じにしています

  • 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> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • ＦＬＡＳＨでのウインドウサイズ固定って可能ですか？

    ＦＬＡＳＨ５をＷｉｎ環境で使っています。 ＦＬＡＳＨでのリンクについて分からない点があります。 リンクボタンのあるページはＦＬＡＳＨで、飛ばし先のページは通常のＨＴＭＬページの場合、新しく出たウィンドウのサイズ固定やスクロールバー有無の設定ってできるんでしょうか？ ＨＴＭＬ同士だとＪａｖａＳｃｒｉｐｔで出来ますが、リンクボタンがあるページにスクリプトを書きますよね。ＦＬＡＳＨのページの場合はきっとアクションスクリプトでできるような気がするのですが．．． ご存知の方がいらっしゃったら是非教えてください。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する