Javascript resize problem

[PsychicTide]

Hey, just kind of some background so you don't think I'm fishing. I've worked with ASP,PHP,JS, AJAX, HTML, XML, etc... as well as fundamental programming languages like C#, C++, VB.net, Python, etc. I don't know all these languages extensively, but psuedo code works for me. It seems I have the most trouble with simple scripts and have run into a problem working on one of my sites. Maybe you can help me?

I looked around for some sort of posting rules or guidlines, but found nothing. I hope this is in the right place.

I'm using a "Require" for the footer of all of my pages (thought I would save time because all my pages have the same footer). and I've got every page but the index inside of an Iframe. I used this javascript I found while trolling the forums...

<script type="text/javascript">    
parent.window.document.getElementById("WindowMain").height = document.body.offsetHeight ;    
</script>

90% of the time this script works perfectly resizing the Iframe, but about 10% of the time it fails to resize and leaves 2 scroll bars if the page being loaded is larger than the previous height. I was thinking maybe this was because I'm using a require footer and it might load a split second after the actual page is loaded. Either that or this script is just too klunky.

If you feel you need to see a temp site to evaluate the problem yourself let me know.
Let me know what you think... any help is much appreciated.

[langsor]

Hi,

I messed around with this for quite a while -- it seems to be easy in Firefox and Opera (latest versions for Windows) but IE is notoriously uncooperative.

This is what I came up with and it's working in all three I tested it in (FF 3.0.1, Op 0.51, IE 7.0.xxxx), with the test page I worked up like your description.

Give it a test and let me know if it works for you -- I'm curious

<script type="text/javascript">

function get_computed_style ( node, styleProperty ) {
  var computedStyle = null;
  if ( typeof window.getComputedStyle != "undefined" ) {
    computedStyle = window.getComputedStyle(node,null); // Moz
  } else if ( typeof node.currentStyle != 'undefined' ) {
    computedStyle = node.currentStyle; // IE
  }
  return computedStyle[styleProperty];
}

window.onload = function () {
  var frame_height = 0;
  var html = document.getElementsByTagName('html').item(0); // Compliant browsers
  if ( ( frame_height = html.offsetHeight ) < document.body.offsetHeight ) {
    var body = document.getElementsByTagName('body').item(0); // IE browsers
    frame_height = document.body.offsetHeight;
    frame_height += parseInt( get_computed_style( body, 'marginTop' ).match( /\d+/ ) );
    frame_height += parseInt( get_computed_style( body, 'marginBottom' ).match( /\d+/ ) );
    frame_height += 20; // for god knows what value IE adds to its document
  }
  parent.window.document.getElementById("WindowMain").height = frame_height;
};
</script>

Hope it helps

...

[PsychicTide]

wow, I had almost given up on this post. I tried out the script on the site and it fixed the double scrollbar problem!... it even fixed the stutter that was happening with the previouse script.

Your the man, I really appreciate the time you put into this... I owe you one ;).

[PsychicTide]

there is another small issue I have if your not too troubled with it.

If I scroll far down on one page then hit a link, the scroll stays down below in the portion with nothing there... I have to scroll up to see the new smaller page. maybe some way to resize it smaller after making it larger...any ideas?

[langsor]

I'm glad that it helped ...

About the scrolling problem -- I admit I don't entirely grok your exact page-loading paradigm but you might try to attach something to the links on your page since it seems you're loading the main iframe content out of sync with the main parent page ...

Off the top of my head ...

window.onload = function () {
  var links = document.getElementsByTagName('a');
  for ( var i = 0; i < links.length; i ++ ) {
   links.item(i).onclick = function () {
      window.scroll( 0, 0 );
      return false;
    };
  }
};

Or using a global event capturing script -- I'm promoting this script today it seams :-)

window.onload = function () {
  document.getElementsByTagName('html').item(0).onclick = function ( event ) {
    var action = ( typeof event == 'undefined' ) ? window.event : event;
    var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
    if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
      target = target.parentNode;
    }
    // ... targets your loading links only ...
    if ( /loader/.test( target.className ) ) {
      window.scroll( 0, 0 );
      return false;
    }
 // ... for testing purposes to click around and see how it works ...
 // alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ? '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );
  };
};

With the second code snippet you grab every click event that propagates down or bubbles up to the document html object and then grab some piece of useful data from desired elements to determine what action to take ... so here we need the links that load the iframe content to have a class name of "loader" (or change the detection script to suit). Remember that you can assign multiple class names to any element.

<a href="#" class="loader my_class">load new content</a>

I haven't actually tested the above code blocks but I'm pretty sure they're close to what you're looking for.

Ciao

[PsychicTide]

ah even simpler... I just took the

parent.window.scroll( 0, 0 );

and added it under the parent.window.document height size.

Once again thanks for the quick response. Saved me alot of searching and hair loss =).

[langsor]

I'm glad to have been able to help ... and I must be getting tired -- simple is almost always better -- good work.

~langsor