Ad:

JavaScript / DHTML / AJAX Discussion Thread
Marked Solved
Views: 3184

Aug 4th, 2008

Javascript resize problem

Expand Post »

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...

Javascript Syntax (Toggle Plain Text)
<script type="text/javascript">    
parent.window.document.getElementById("WindowMain").height = document.body.offsetHeight ;    
</script>
<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.

Last edited by PsychicTide; Aug 4th, 2008 at 12:56 pm.

Similar Threads

Dynamic iFrame height, not working in ie without refresh. in JavaScript / DHTML / AJAX
Using Hidden Variables in ASP.NET in ASP.NET
iframe Height adjustment to loaded content, help please? in JavaScript / DHTML / AJAX
Dynamicallu Resizeing IFRAME based on content in JavaScript / DHTML / AJAX
How to capture window events in javascript in JavaScript / DHTML / AJAX

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<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>
<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

...

Last edited by langsor; Aug 7th, 2008 at 12:41 am.

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

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

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

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?

Last edited by PsychicTide; Aug 7th, 2008 at 1:18 am.

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

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 ...

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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;
    };
  }
};
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 :-)

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
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 );
  };
};
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.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
<a href="#" class="loader my_class">load new content</a>
<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

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

ah even simpler... I just took the

javascript Syntax (Toggle Plain Text)
parent.window.scroll( 0, 0 );
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 =).

PsychicTide

Reputation Points: 54

Solved Threads: 15

Junior Poster

Offline

113 posts
since Aug 2008

Permalink

Aug 7th, 2008

Re: Javascript resize problem

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

~langsor

langsor

Reputation Points: 30

Solved Threads: 36

Posting Whiz

Offline

389 posts
since Aug 2008

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Radio input value

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Need Suggestion regarding Limiting text box size

DaniWeb Message

Cancel Changes

User Name
Password