asked on

Resize Window Based on DIV Tag

Hi Experts

The following script resizes a popup to the size of a particular div. Is it possible to have it check the size of the div/window relationship first and then see if the script needs to be invoked? The main reason for wanting this is that when paging through the popup items the windows jumps to full size then back to div size each time. When it really needs to happen when the popup loads and then when the content changes that it no longer fits in the window.

function getRefToDivMod( divID, oDoc ) {
      if( !oDoc ) { oDoc = document; }
      if( document.layers ) {
            if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
                  for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
                        y = getRefToDivNest(divID,oDoc.layers[x].document); }
                  return y; } }
      if( document.getElementById ) { return oDoc.getElementById(divID); }
      if( document.all ) { return oDoc.all[divID]; }
      return oDoc[divID];
}

function resizeWinTo( idOfDiv ) {
      var oH = getRefToDivMod( idOfDiv ); if( !oH ) { return false; }
      var x = window; x.resizeTo( screen.availWidth, screen.availWidth );
      var oW = oH.clip ? oH.clip.width : oH.offsetWidth;
      var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }
      x.resizeTo( oW + 200, oH + 200 );
      var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;
      if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }
      else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }
      else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }
      if( window.opera && !document.childNodes ) { myW += 16; }
      //second sample, as the table may have resized
      var oH2 = getRefToDivMod( idOfDiv );
      var oW2 = oH2.clip ? oH2.clip.width : oH2.offsetWidth;
      var oH2 = oH2.clip ? oH2.clip.height : oH2.offsetHeight;
      x.resizeTo( oW2 + ( ( oW + 200 ) - myW ), oH2 + ( (oH + 200 ) - myH ) );
}

<body onLoad="resizeWinTo('contentDiv');" style="padding:0;margin:0;">

<div style="position:absolute; left:0px; top:0px; padding: 5;" id="contentDiv">
lots of content that pages through and can have different size elements in it - but not always
</div>

Cem Türk

<html>
<head>
<script>
function getRefToDivMod( divID, oDoc ) {
if( !oDoc ) { oDoc = document; }
if( document.layers ) {
if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {
for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {
y = getRefToDivNest(divID,oDoc.layers[x].document); }
return y; } }
if( document.getElementById ) { return oDoc.getElementById(divID); }
if( document.all ) { return oDoc.all[divID]; }
return oDoc[divID];
}

function resizeWinTo( idOfDiv ) {
var oH = getRefToDivMod( idOfDiv ); if( !oH ) { return false; }
var x = window; //x.resizeTo( screen.availWidth, screen.availWidth );
var oW = oH.clip ? oH.clip.width : oH.offsetWidth;
var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }
if(!((oW>= document.body.offsetWidth-30) && ( oW<=document.body.offsetWidth+30) && (oH>= document.body.offsetHeight-30) && ( oH<=document.body.offsetHeight+30))) {
x.resizeTo( oW + 200, oH + 200 );
}

var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;
if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }
else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }
else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }
if( window.opera && !document.childNodes ) { myW += 16; }
//second sample, as the table may have resized
var oH2 = getRefToDivMod( idOfDiv );
var oW2 = oH2.clip ? oH2.clip.width : oH2.offsetWidth;
var oH2 = oH2.clip ? oH2.clip.height : oH2.offsetHeight;
if(!((oW>= document.body.offsetWidth-30) && ( oW<=document.body.offsetWidth+30) && (oH>= document.body.offsetHeight-30) && ( oH<=document.body.offsetHeight+30))) {
x.resizeTo( oW2 + ( ( oW + 200 ) - myW ), oH2 + ( (oH + 200 ) - myH ) ); }
}

</script>
<body onLoad="resizeWinTo('contentDiv');" style="padding:0;margin:0;">

<div style="position:absolute; left:0px; top:0px; padding: 5;" id="contentDiv">
lots of content that pages through and can have different size elements in it - but not always<br>
<br>
<input type="button" onclick="alert(document.body.offsetWidth);alert(document.body.offsetHeight);" value="click me">
</div>

</body>
</html>

hnEE

ASKER

hi

not sure if i have explaned myself correctly. my original example works fine. on the parent page you click a link and the popup appears and resizes to the first page of content...then the user clicks the paging arrows and the page reloads and the resize script executes again becasue of the body onload. I would prefer it to check to see if the popup can alreay fit the new content, then if it can't do the resize. at the moment every time you click the paging arrows the popup scales to full screen then scales back to size of the content.

thanks

ASKER CERTIFIED SOLUTION

Cem Türk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

hnEE

ASKER

hi cen_turk

thanks for that. that did help to partly fix the problem. i made som eother changes on the x.resizeTo lines and it would appear it does everything needed now:

function resizeWinTo( idOfDiv ) {
      var oH = getRefToDivMod( idOfDiv ); if( !oH ) { return false; }
      var x = window; //x.resizeTo( screen.availWidth, screen.availWidth );
      var oW = oH.clip ? oH.clip.width : oH.offsetWidth;
      var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }
      x.resizeTo( oW, oH ); <<-----ON THIS LINE
      var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;
      if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }
      else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }
      else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }
      if( window.opera && !document.childNodes ) { myW += 16; }
      //second sample, as the table may have resized
      var oH2 = getRefToDivMod( idOfDiv );
      var oW2 = oH2.clip ? oH2.clip.width : oH2.offsetWidth;
      var oH2 = oH2.clip ? oH2.clip.height : oH2.offsetHeight;
      x.resizeTo( oW2 + ( ( oW ) - myW ), oH2 + ( (oH ) - myH ) ); <<-----ON THIS LINE
}

So I'm not sure about the points thing in this case...Do I accept your post as being the answer?

Thanks

Cem Türk

https://www.experts-exchange.com/help.jsp#hi70