
ポップアップウィンドウを開く時に、ウィンドウのサイズを「ヨコ幅固定、タテ幅自動調整」のような形にできないものか……と思っています。HTMLの知識は素人に毛が生えた程度なのですが、色々検索して現在は以下のようになっています。
<a href="#"
onClick="window.open('sample.html','window1',
'width=380,height=,menubar=no,toolbar=no,
location=no,directories=no,
status=no,scrollbars=no,resizable=no')">
heightのところを指定していないのですが、ある一定の(最大の?)高さに固定されてしまいます。コンテンツは高さがそんなにないので、下の方にかなり余白がある感じです。コンテンツに応じて、高さを自動調整することはできますでしょうか?
どうぞ宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
もし、画像をひとつ表示するだけならば、
私のこれ↓
<html>
<head>
<title></title>
<script language="JavaScript">
<!--
var img_x=3;//横一列の表示数//
var img_max=9;//表示総数//
var img_name=["0","1","2","3","4","5","6","7","8","9"];
//画像名(altでも使用、拡張子はいらない。.jpgになっているので変えたければ自分で変える//
var img_com=["0","1","2","3","4","5","6","7","8","9"];
//画像に対するコメント//
function put(w,h,x,y){
var a="";
var ram;
var all=0;
for(var j=0;j<img_max/img_x;j++){
for(var i=0;i<img_x;i++){
ram=all+'a.jpg';
a+='<a href="javascript:info('+all+')"><img src="'+ram+'"'+' onmouseover="this.src='+'imgc('+all+')" onmouseout='+'"this.src='+'imgb('+all+')';
//マウスが乗っている間だけsrcが「番号」+.jpgに、普段は「番号」+a.jpg//
a+='" '+'alt="'+img_name[all]+'"'+' style="position:absolute; width:'+w+'; height:'+h+'; top:'+j*y+'; left:'+i*x+';"></a><br>';
all++;
}
}
wri(a);
}
function info(num){
var win=window.open("",img_name[num],"");
win.document.open();
win.document.write('<b>'+img_name[num]+'</b><br><img src="'+num+'.jpg" name="img"><br>コメント:<br><font size="-1">'+img_com[num]+'</font><br><a href="javascript:window.close()">close</a>');
win.window.resizeTo(win.document.img.width+300,win.document.img.height+300);
//開いたウィンドウを画像の横+300px、縦+300pxでリサイズ//
win.document.close();
}
function imgb(n2){
return n2+"a.jpg";
}
function imgc(n){
return n+".jpg";
}
function wri(str){
document.open();
document.write(str);
document.close();
}
put(50,50,60,60);
//サムネイルの画像のwidth,height,一段ごとの間隔x,y//
//-->
</script>
</head>
<body>
</body>
</html>
を使う。サンプルは参考URL(1)に置いといたので参照。
それ以外はそれぞれのコンテンツに適したサイズをJavaScriptで変数に入れておき、ポップアップ後にresizeToするといいと思います。
余談ですが、画像表示だけなら参考URL(2)が使えると思います。
参考URL:http://www.geocities.jp/ram0kb/js/maetaImg.html, …
ご回答をいただいていたことに気付かず、
大変失礼してしまいました。
(メールで回答をいただいたことを通知する設定に
しておいたと思ったのですが、受信できていなかったようです)
大変参考になるご回答ありがとうございました。
まだ完全には理解していないのですが、
これから試してみます。
ありがとうございました!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- 日本語 「~する必要はないのではないでしょうか」はおかしい? 10 2022/08/21 20:15
- Visual Basic(VBA) マクロで設定時刻の入力がわかりません 2 2022/03/29 02:24
- 英語 不定代名詞"no..."の否定語noの及び範囲について 4 2022/08/04 11:11
- ルーター・ネットワーク機器 ひとつのスイッチでルーターの冗長化を複数させたい 1 2023/04/12 22:46
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- 日本語 問題: A:トイレにだれ___いませんか。その2 1 2023/03/12 22:01
- Visual Basic(VBA) エクセルのマクロについて教えてください。 1 2022/12/26 12:05
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・「これはヤバかったな」という遅刻エピソード
- ・初めて自分の家と他人の家が違う、と意識した時
- ・いちばん失敗した人決定戦
- ・思い出すきっかけは 音楽?におい?景色?
- ・あなたなりのストレス発散方法を教えてください!
- ・もし10億円当たったら何に使いますか?
- ・何回やってもうまくいかないことは?
- ・今年はじめたいことは?
- ・あなたの人生で一番ピンチに陥った瞬間は?
- ・初めて見た映画を教えてください!
- ・今の日本に期待することはなんですか?
- ・集中するためにやっていること
- ・テレビやラジオに出たことがある人、いますか?
- ・【お題】斜め上を行くスキー場にありがちなこと
- ・人生でいちばんスベッた瞬間
- ・コーピングについて教えてください
- ・あなたの「プチ贅沢」はなんですか?
- ・コンビニでおにぎりを買うときのスタメンはどの具?
- ・おすすめの美術館・博物館、教えてください!
- ・【お題】大変な警告
- ・洋服何着持ってますか?
- ・みんなの【マイ・ベスト積読2024】を教えてください。
- ・「これいらなくない?」という慣習、教えてください
- ・今から楽しみな予定はありますか?
- ・AIツールの活用方法を教えて
- ・最強の防寒、あったか術を教えてください!
- ・歳とったな〜〜と思ったことは?
- ・モテ期を経験した方いらっしゃいますか?
- ・好きな人を振り向かせるためにしたこと
- ・スマホに会話を聞かれているな!?と思ったことありますか?
- ・それもChatGPT!?と驚いた使用方法を教えてください
- ・見学に行くとしたら【天国】と【地獄】どっち?
- ・これまでで一番「情けなかったとき」はいつですか?
- ・この人頭いいなと思ったエピソード
- ・あなたの「必」の書き順を教えてください
- ・14歳の自分に衝撃の事実を告げてください
- ・人生最悪の忘れ物
- ・あなたの習慣について教えてください!!
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを選択したときの青い枠...
-
画像をクリックして同じページ...
-
inputタグでサーバにデータを送...
-
フォームのボタンをsubmitから...
-
レスポンシブ対応のHTML・CSS(...
-
【HTML/CSS】ボタンの枠が伸び...
-
プルダウンの選択リストの中に...
-
UDP通信を使うチャットプログラ...
-
<img src="00.gif" border="0">...
-
リンクを知らせる手のマークが...
-
auの携帯サイトで画像と画像の...
-
画像をリンクさせると紫の枠が...
-
機種依存文字、m2(平方メート...
-
チェックボックスの影
-
同一URLの連続アクセス方法
-
flex の各子要素を横幅 100% に...
-
htmlの文字が縦書きになる
-
htmlのolやulなどlistにtitleや...
-
画像イメージの上下左右、欲し...
-
ulタグやliタグの中でbrタグ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを知らせる手のマークが...
-
ボタンをセル内一杯に表示させ...
-
HTMLのIMAGEに。。
-
【HTML/CSS】ボタンの枠が伸び...
-
画像をクリックして同じページ...
-
画像をクリックして元に戻すには
-
ホームページで画像を横に並べ...
-
html+CSSのみで作るスライドショー
-
ホームページの一番下に配置し...
-
favicon.ico はもういらない?
-
htmlでキャラクター画像を、サ...
-
プルダウンの選択リストの中に...
-
ワードプレス max-width100%が...
-
アップロードするとレイアウト...
-
アイコンと文字を並べる時アイ...
-
3つの画像を中央に寄せて表示さ...
-
チェックボックスの影
-
画像の横に文字をうまく配置で...
-
imgタグは何で囲むのが良いか
-
HTMLタグのDL DT DDを使ってli...
おすすめ情報