Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 242
  • Last Modified:

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>
0
hnEE
Asked:
hnEE
  • 3
  • 2
1 Solution
 
Cem TürkSenior Software EngineerCommented:
<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>
0
 
hnEEAuthor Commented:
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
0
 
Cem TürkSenior Software EngineerCommented:
replace

   var x = window; x.resizeTo( screen.availWidth, screen.availWidth );

with

   var x = window; // x.resizeTo( screen.availWidth, screen.availWidth );

so that popup wont resize to fullscreen before sizing according to the content
0
 
hnEEAuthor Commented:
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
0
 
Cem TürkSenior Software EngineerCommented:
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now