• 締切済み

ページの縦幅を取得する際の問題

ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 function getPageSize(){ var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer windowWidth = self.innerWidth; windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = windowWidth; } else { pageWidth = xScroll; } arrayPageSize = new Array(pageWidth,pageHeight) return arrayPageSize; } この関数を実行すると配列[0]に横幅、配列[1]に縦幅が返ってきます。しかしページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う(小さい)ものが返ってきてしまいます。これはどのようにして対応すればよいのでしょうか?

みんなの回答

回答No.2

全てのオブジェクトを調べて "position==absolute または position==relative"かつオブジェクトの上端 + オブジェクトの高さがドキュメントの高さ以上の位置にある場合は それに合わせて取得したドキュメントの高さを調整すればいいのでは? 私にはこれくらいしか思いつきません。

noname#30818
noname#30818
回答No.1

スクリプトの内容も読んでいませんし、そのスクリプトを使ったこともありませんが、参考程度に読んでください。 そして、気になることが見つかったら検討してみてください。 >これはどのようにして対応すればよいのでしょうか? 本当に対応する必要があるかを検討する必要があると思います。 >ページの縦幅は書き込まれる情報量によって動的に変わります。この縦幅を取得する良い方法がないか探していたところ、Lightboxの関数でまさしく探していたものがありました。 質問者さんがこのように言っていますからね。 >ページ内にCSSでposition: absoluteで位置を指定したオブジェクトがあると、それを認識できないのか求める数値とは違う(小さい)ものが返ってきてしまいます。 何に対して小さい数字なのかを書いて頂かないとなんとも言えませんが、求めているものがページの縦幅ならばCSSでposition: absoluteの要素に続く要素はposition: absoluteが指定された要素が無いものとして流し込まれると言うことが仕様書に書かれていたと記憶しております。 http://hp.vector.co.jp/authors/VA022006/css/visualren.html#positioning-schemes http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#choose-position この仕様書と同じように振舞うブラウザであれば、例えばA,B,C,Dと言う要素がありその中の1つがposition: absoluteであるならばposition: absoluteが指定されている要素の高さを除いたものがほぼページの高さになると解釈できるのではないでしょうか。 もし質問者さんがこの例でA,B,C,Dの全ての高さを足したものがほぼページの高さになると考えそれに対して関数が返す値が小さいと感じられているのであればそれは本当に対応すべきことか疑問に感じます。

関連するQ&A

  • jqfloat.jsを複数の画像に適用したい

    javascriptで7枚の画像をブラウザの中にランダム配置で表示させ、 さらにjQueryのjqfloat.jsで画像をふわふわ動かす、というものを作っています。 ランダム配置まではうまくいったのですが jqfloatが7枚のうち1枚にしか適用されず困っております。(最後のid='fuwa'のところ) jsの勉強を始めたばかりでスクリプトの書き方が変だったりするかもしれませんが… どなたか対処法を教えていただけませんでしょうか。 どうぞよろしくお願い致します! <script type="text/javascript"><!-- $(document).ready(function() { $('#fuwa').jqFloat({ width: 50, height: 50, speed: 2500 }); }); var images = [ {img : "1.png" , url : "http://1.com"}, {img : "2.png" , url : "http://2.com"}, {img : "3.png" , url : "http://3.com"}, {img : "4.png" , url : "http://4.com"}, {img : "5.png" , url : "http://5.com"}, {img : "6.png" , url : "http://6.com"}, {img : "7.png" , url : "http://7.com"} ]; images.sort(function(){return Math.random() - Math.random();}); function getBrowserWidth ( ) { if ( window.innerWidth ) { return window.innerWidth; } else if ( document.documentElement && document.documentElement.clientWidth != 0 ) { return document.documentElement.clientWidth; } else if ( document.body ) { return document.body.clientWidth; } return 0; } function getBrowserHeight ( ) { if ( window.inneHeight ) { return window.innerHeight; } else if ( document.documentElement && document.documentElement.clientHeight != 0 ) { return document.documentElement.clientHeight; } else if ( document.body ) { return document.body.clientHeight; } return 0; } Imgn=7; for (i=0; i < Imgn; i++){ xpx = 50+Math.floor(Math.random() * (window.innerWidth -280)) + 1; ypx = 30+Math.floor(Math.random() * (window.innerHeight -300)) + 1; thumbs="<div style='position:absolute;left:"+ xpx +"px;top:"+ ypx +"px;' id='fuwa'><a href='"+images[i].url+"'><img src='"+images[i].img+"'></a></div>"; document.write(thumbs); } </script>

  • XHTML(厳格)でJavaScriptが動かない

    ソースを書くと見ずらいので、 URLで提示しますと http://martin.p2b.jp/index.php?UID=1115484023 の部分ですが、 d.body.appendChild(imgPop); (d=document と宣言されているとする) で、エラーもなく、どのブラウザーでも何も動いてくれません。 ちなみに、XHTMLで奨励されている Content-type: application/xhtml+xml で出力するようにしています。 (metaでは一切宣言してません) これを普通に、text/html に出力させるだけで 動作するのはするのですが・・・ どなたか、mime type を変更せずに 解決できる方はいらっしゃいますでしょうか? よろしくお願いします。 p.s. d.body.innerHTML="hoge"; はできるようです。 ------------ 見ずらいですが、ソースはこちら var d=document; function getClientWidth(){ if(self.innerWidth){ return self.innerWidth; } else if(d.documentElement && d.documentElement.clientWidth){ return d.documentElement.clientWidth; } else if(d.body){ return d.body.clientWidth; } } function getClientHeight(){ if(self.innerHeight){ return self.innerHeight; } else if(d.documentElement && d.documentElement.clientHeight){ return d.documentElement.clientHeight; } else if(d.body){ return d.body.clientHeight; } } function getScrollY(){ if(typeof window.pageYOffset != "undefined"){ return window.pageYOffset; } else if(d.body && typeof d.body.scrollTop != "undefined"){ if(d.compatMode == 'CSS1Compat'){ return d.documentElement.scrollTop;; } return d.body.scrollTop; } else if(d.documentElement && typeof d.documentElement.scrollTop != "undefined"){ return d.documentElement.scrollTop; } return 0; } var imgPop = null; imagePop = function (e, path, w, h){ if(imgPop==null){ imgPop = d.createElement("IMG"); imgPop.src = path; with (imgPop.style){ position = "absolute"; left = Math.round((getClientWidth()-w) / 2) + "px"; top = Math.round((getClientHeight()-h) / 2 + getScrollY()) + "px"; margin = "0"; zIndex = 1000; border = "4px groove Teal"; display = "none"; } d.body.appendChild(imgPop); if(imgPop.complete){ imgPop.style.display = "block"; } else window.status = "画像読み込み中…"; imgPop.onload = function(){imgPop.style.display="block"; window.status="";} imgPop.onclick = function(){d.body.removeChild(imgPop);imgPop=null;} imgPop.title = "マウスクリックで閉じます"; } }

  • google マップ サイズ変更

    グーグルマップで、windowsのサイズ変更をしたら、地図の大きさも材レクトに変わるという処理をしたく、ウェブを参考に作ったのですが、 ローカルだと、firefox,opera,ie6でできるのですが、 HPにuploadすると、operaでしか実現できません。他のだと地図サイズが変化しません。 どなたかアドバイスいただけたら幸いです。 //<![CDATA[ //スクリプト定義 var map; var latLng = new GLatLng(43,14); // 初期位置設定 function load() { resize(); if (GBrowserIsCompatible()) { //Google Maps 利用可能? map = new GMap2(document.getElementById("map")); // マップ1 map.setCenter(latLng, 13); // 起動時初期位置 } } function resize(){ var map_obj=document.getElementById("map"); var disp=getDispSize(); map_obj.style.width=disp.width-100+"px"; map_obj.style.height=disp.height-100+"px"; } function getDispSize(){ if(document.all){ if(window.opera){ return {width:document.body.clientWidth,height:document.body.clientHeight}; } else { return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight}; } } // NN else if(document.layers || document.getElementById){ return {width:window.innerWidth,height:window.innerHeight}; } } //]]>

  • BOXがロールオーバーで開閉するインターフェース

    よろしくお願いします。 javascript初心者です。 今WEBサイトを構築してして BOXがロールオーバーで開閉するインターフェースを作りたくて 本を買って勉強しているのですがうまく動作しません。。 HTMLは ーーーーーーーーーーーーーーーーーーーーーーーーー <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> <link href="css/1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java/java.js"></script> </head> <body> <body onload="boxMove()"> <div id="mybox1"class="box" style="top:0px;left:0px;"></div> <div id="mybox2"class="box" style="top:0px;left:250px;"></div> <div id="mybox3"class="box" style="top:0px;left:500px;"></div> </body> </html> ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー CSS ----------- .box{ position:absolute; width:250px; height:200px; } #mybox1{ background-color:#FF9900; } #mybox2{ background-color:#BBEE55; } #mybox3{ background-color:#AAEEFF; } body{ color:#FFFFFF; margin:0; padding:0; overflow:hidden; } javascript --------------------------------- var myTarget=700; var speed=2; function myboxCmove(){ var myPos = eval(document.getElementById('mybox2').style. left.replace("px","")); myPos += (myTargetC-myPos)/speed; document.getElementById('mybox2').style.left = myPos+"px"; setTimeout("myboxCmove()",10); } function myboxRmove(){ var myPos = eval(document.getElementById('mybox3').style. left.replace("px","")); myPos += (myTargetR-myPos)/speed; document.getElementById('mybox3').style.left = myPos+"px"; setTimeout("myboxRmove()",10); } var pageWidth; var pageHeight; function setTarget1(){ myTargetC = pageWidth-100; mytargetR = pageWidth-50; } function setTarget2(){ myTargetC = 50; mytargetR = pageWidth-50; } function setTarget3(){ myTargetC = 50; mytargetR = 100; } function config(){ if(document.all){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = window.innerWidth; pageHeight = window.innerHeight; } myTargetC = pageWidth/3; myTargetR = pageWidth/3*2; document.getElementById('mybox1').style.width = (pageWidth-100)+"px"; document.getElementById('mybox1').style.height = (pageHeight-100)+"px"; document.getElementById('mybox2').style.width = (pageWidth-100)+"px"; document.getElementById('mybox2').style.height = (pageHeight-100)+"px"; document.getElementById('mybox3').style.width = (pageWidth-100)+"px"; document.getElementById('mybox3').style.height = (pageHeight-100)+"px"; } <body onload="config();myboxCmove();myboxRmove();"onresize="config()"> <div id="mybox1" class="box" style="top:0px; left:0px;" onmouseover="setTarget1()"></div> <div id="mybox2" class="box" style="top:0px; left:250px;" onmouseover="setTarget2()"></div> <div id="mybox3" class="box" style="top:0px; left:500px;" onmouseover="setTarget3()"></div> -------------------------------------------------- テストとして本を参考にやってみたのですがなにがいけないのかまったくわかりません。どなたかご教授お願い致します。

  • Android端末実表示ピクセル数の取得方法

    Android端末の液晶解像度を取得しJavaScriptを使ったHTMLでの参照方法がわからないのでお教え願えないでしょうか Windows機でのブラウザ表示域をHTML内にJavaScriptを用いて取得するには以下の方法で可能になったのですが、 var wobj = new Object(); wobj.x = document.documentElement.clientWidth || document.body.clientWidth || document.body.scrollWidth; wobj.y = document.documentElement.clientHeight || document.body.clientHeight || document.body.scrollHeight; wobj.x = ブラウザの表示横ピクセル数 wobj.y = ブラウザの表示縦ピクセル数 上の関数を使ってAndroid端末から値を得るとViewportの値の1280、800が帰ってきます。 Viewportの値ではなく液晶画面での表示域(ピクセル数)を取得したいのですが可能でしょうか 御存知の方、よろしくお願いします。

  • javascriptで画像サイズをウィンドウのサイズに合わせて表示する方法

    javascriptを最近はじめてみました。 しかしどうも慣れないためか、最後の一歩で思うように動いてくれません。 基本的にやりたい事はウインドウサイズに合わせて画像サイズを変更できるようにしたいと思ってます。 何とかいろいろ調べて、下記のスクリプトまで来たんですが (確かこのサイトの他の方への回答からほぼ活用) これでは画面が表示されるときにスクリプトが適用されません。 その後ウィンドウのサイズ変更をすると適用してくれるのですが。 なにやらとても簡単な事で上手く動いてくれないのかもしれませんが、 どうしてもできそうにありません。 どなたかお分かりの方がいましたらご教授願えると大変助かります。 よろしくお願いします。 以下、javascript↓ <body style="overflow:hidden" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <img src="test.JPG" id="backgroundID" style="position:absolute;top:0px;left:0px;z-index:0;" onload="setSize()"> <div style=" color: black; font-size: medium; font-family: serif; visibility: visible; display: block; position: absolute; z-index: 1; top: -1px; left: 0"> <script type="text/javascript"> var imgObj = document.getElementById('backgroundID'); var imgSize = {w:0, h:0} window.onresize = setImg; window.onscroll = function() { var t, l; if (document.documentElement.scrollTop) { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (document.body.scrollTop) { t = document.body.scrollTop; l = document.body.scrollLeft; } else { return; } imgObj.style.top = t + 'px'; imgObj.style.left = l + 'px'; } function setSize() { imgSize.w = imgObj.width; imgSize.h = imgObj.height; } function setImg() { var wh, pW, pH, c; wh = getWindowSize(); pW = wh.w / imgSize.w; pH = wh.h / imgSize.h; if (pW > 0 || pH > 0) { c = (pW > pH) ? pW : pH; imgObj.style.width = parseInt(imgSize.w * c + 1) + 'px'; imgObj.style.height = parseInt(imgSize.h * c + 1) + 'px'; } else { imgObj.style.width = imgSize.w + 'px'; imgObj.style.height = imgSize.h + 'px'; } } function getWindowSize() { var wh = {w:0, h:0}; if (document.body.clientWidth) { wh.w = document.body.clientWidth wh.h = document.body.clientHeight; } else if(document.documentElement.clientWidth) { wh.w = document.documentElement.clientWidth; wh.h = document.documentElement.clientHeight; } else if(window.innerWidth) { wh.w = window.innerWidth; wh.h = window.innerHeight; } return wh; } </script> </body>

  • Javascriptの質問です。

    Javascriptの質問です。 昨日からjavascriptを始めた初心者なのですが、すみませんが、以下のコードの不具合の訂正をお願いしたいのです。自分なりにあれこれやっては見ましたが、結論が見出せません。 昨日は、id="BOX" の部分を、windowをリサイズしたときに、縦横常に中央に表示させるといったものです。 問題点: (1)windowをリサイズたときに、動かない点 (2)DOCTYPE宣言すると、まったく機能しない。(DOCTYOE宣言とJAVASCRIPTの対応が理解できていないので。。とりあえず、DOCTYPE宣言無しでも機能すればいいかな?と思っております。IE8とfirefox3での表示を目指しています。) 恐れ入りますがよろしくお願いいたします。 ■HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="css/test1.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- function changeStyle(y,x) { /*変数トレース*/ document.write("関数CALL\n"); document.write(y+"/"); document.write(x); /*CSSの書き換え(CSS)を書き換えると位置をへんこうできるものと思っています。*/ document.getElementById("box").style.marginTop = y; document.getElementById("box").style.marginLeft = x; } // --> </script> <script type="text/javascript"> <!-- function relocate() { window.focus(); /*firefoxのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerHeight && window.innerHeight > 960){ y=((window.innerHeight - 960)/2); }else{y=0;} /*IEのwindowサイズとboxの大きさによりマージンを計算*/ if( 0 != window.innerWidth && window.innerHeight >1100){ x=((window.innerWidth - 1100)/2); }else{x=0;} /**/ if( 0 != document.body.clientHeight && document.body.clientHeight > 960){ y=((document.body.clientHeight - 960)/2); }else{y=0;} if(0 != document.body.clientWidth && document.body.clientWidth > 1100){ x=((document.body.clientWidth - 1100)/2); }else{x=0;} /*CSSの変更*/ changeStyle(y,x); } //--> </script> </head> <body onResize="relocate()"> <!-- イベントハンドラセット(リサイズ時にCSS変更)こちらが問題のようです。 --> <div id="box">123456</div> <!-- 目的のボックス--> <script type="text/javascript"> <!-- /*オンロード時に1度CSSを変更する。もちらは動作します。*/ relocate(); // --> </script> </body> </html> ■CSS @charset "utf-8"; /* CSS Document */ *{ margin: 0px; padding: 0px; } #box { background-color: #FF3300; height: 960px; width: 1100px; border: 100px none #999999; margin-top:0px; margin-left:0px; } よろしくお願いします。

  • SafariのIframeで高さが取得できません

    <script language="JavaScript"> <!-- function frame_check(){ if(main.document.body){ if(navigator.userAgent.indexOf("Opera") != -1){ // 文字列に「Opera」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("MSIE") != -1){ // 文字列に「MSIE」が含まれている場合 var f = main.document.body.scrollHeight; } else if(navigator.userAgent.indexOf("Firefox") != -1){ // 文字列に「Firefox」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Netscape") != -1){ // 文字列に「Netscape」が含まれている場合 var f = main.document.body.offsetHeight; } else if(navigator.userAgent.indexOf("Safari") != -1){ // 文字列に「Safari」が含まれている場合 var f = main.documentElement.offsetHeight; } if(f) document.getElementById("frame_set").height=f+20; setTimeout("frame_check()",100); }else{ setTimeout("frame_check()",100); } } setTimeout("frame_check()",10); --></script> <iframe name="main" id="frame_set" src="mainf.html" width="800" height="4000" frameborder="0" scrolling="no"></iframe> 上記のスクリプトを作成しましたが、IE7、 Firefoxではうまくいきますが、SafariではIframeに表示するページの高さが取得できません。 どこが問題なのかご教授お願いいたします。

  • onResize を Win と Mac で動作させたい

    現在、JavaScriptを組み込んでHPを作成しています。 Win版IE6.0,NN7.1,Mac版NNでは動作の確認ができているのですが、 Mac版IE(すみません、バージョンが不明です)では動作せず頭を悩ませています。 もし原因がおわかりの方がいらっしゃいましたら、ご教示下さい。宜しくお願い致します。 JavaScriptで行いことは以下の二つです。 ・ページにアクセスした際に、画面の大きさを固定する。 ・画面(ブラウザ自体)の大きさが変更された際に、もとの大きさにリサイズする。 MacのIEのみ上記二つが動作しません。 HPの仕様は以下の通りです。 ・ Frameを使用し、上・中・下と3つに画面を分けています。このFrameは全てリサイズ禁止です。及びスクロールバーも表示しません。 ・ フレーム上の中でJavaScriptを使用しています。 ・ JavaScriptは外部ファイルで保持しています。 以下に、JavaScriptを記載いたします。 <外部ファイル> function winResize(width, height) { if ( navigator.appName == "Netscape" ) { window.parent.innerWidth = width; window.parent.innerHeight = height; } else { // IE var innerWidth = window.parent.document.body.clientWidth; var innerHeight = window.parent.document.body.clientHeight; // まず横 if( innerWidth == 760 ) { // 特に何もしない } else { var temp = 760 - innerWidth; window.parent.resizeBy( temp, 0 ); } // そして縦 if( innerHeight == 500 ) { // 特に何もしない } else { var temp = 500 - innerHeight; window.parent.resizeBy( 0, temp ); } } <フレーム上内の記述/ HEAD 内に記述> <script language="JavaScript"> <!-- function changeSize() { winResize(760,500); } window.onresize=changeSize; window.onload=changeSize; //--> </script>

  • Operaで文書の高さを取得

    Internet Explorer 4以降、Mozilla、Netscapeでは以下のコードで文書の高さを取得できます。 Operaで文書の高さを取得するにはどうしたらいいでしょうか? 無理であれば<div id="hoge">aaa<br>bbb</div>と書かれている部分の高さを求めるコードでもいいです。 if (document.height) { h=document.height; } else { h=document.body.scrollHeight; }

専門家に質問してみよう