Javascript resize problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Javascript resize problem

 
0
  #1
Aug 4th, 2008
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...
  1. <script type="text/javascript">
  2. parent.window.document.getElementById("WindowMain").height = document.body.offsetHeight ;
  3. </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.
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Javascript resize problem

 
0
  #2
Aug 7th, 2008
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)
  1. <script type="text/javascript">
  2.  
  3. function get_computed_style ( node, styleProperty ) {
  4. var computedStyle = null;
  5. if ( typeof window.getComputedStyle != "undefined" ) {
  6. computedStyle = window.getComputedStyle(node,null); // Moz
  7. } else if ( typeof node.currentStyle != 'undefined' ) {
  8. computedStyle = node.currentStyle; // IE
  9. }
  10. return computedStyle[styleProperty];
  11. }
  12.  
  13. window.onload = function () {
  14. var frame_height = 0;
  15. var html = document.getElementsByTagName('html').item(0); // Compliant browsers
  16. if ( ( frame_height = html.offsetHeight ) < document.body.offsetHeight ) {
  17. var body = document.getElementsByTagName('body').item(0); // IE browsers
  18. frame_height = document.body.offsetHeight;
  19. frame_height += parseInt( get_computed_style( body, 'marginTop' ).match( /\d+/ ) );
  20. frame_height += parseInt( get_computed_style( body, 'marginBottom' ).match( /\d+/ ) );
  21. frame_height += 20; // for god knows what value IE adds to its document
  22. }
  23. parent.window.document.getElementById("WindowMain").height = frame_height;
  24. };
  25. </script>

Hope it helps

...
Last edited by langsor; Aug 7th, 2008 at 12:41 am.
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Re: Javascript resize problem

 
0
  #3
Aug 7th, 2008
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 .
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Re: Javascript resize problem

 
0
  #4
Aug 7th, 2008
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.
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Javascript resize problem

 
0
  #5
Aug 7th, 2008
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)
  1. window.onload = function () {
  2. var links = document.getElementsByTagName('a');
  3. for ( var i = 0; i < links.length; i ++ ) {
  4. links.item(i).onclick = function () {
  5. window.scroll( 0, 0 );
  6. return false;
  7. };
  8. }
  9. };

Or using a global event capturing script -- I'm promoting this script today it seams :-)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. window.onload = function () {
  2. document.getElementsByTagName('html').item(0).onclick = function ( event ) {
  3. var action = ( typeof event == 'undefined' ) ? window.event : event;
  4. var target = ( typeof action.target == 'undefined' ) ? action.srcElement : action.target;
  5. if ( target.nodeName == '#text' ) { // Safari nodeType 3 work-around
  6. target = target.parentNode;
  7. }
  8. // ... targets your loading links only ...
  9. if ( /loader/.test( target.className ) ) {
  10. window.scroll( 0, 0 );
  11. return false;
  12. }
  13. // ... for testing purposes to click around and see how it works ...
  14. // alert( ( /^\s+$/.test( target.firstChild.nodeValue ) || target.firstChild.nodeValue == null ) ? '<' + target.nodeName.toLowerCase() + '> tag' : 'data: ' + target.firstChild.nodeValue );
  15. };
  16. };

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)
  1. <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
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 66
Reputation: PsychicTide is an unknown quantity at this point 
Solved Threads: 7
PsychicTide's Avatar
PsychicTide PsychicTide is offline Offline
Junior Poster in Training

Re: Javascript resize problem

 
0
  #6
Aug 7th, 2008
ah even simpler... I just took the
  1. 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 =).
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 381
Reputation: langsor is an unknown quantity at this point 
Solved Threads: 33
langsor langsor is offline Offline
Posting Whiz

Re: Javascript resize problem

 
0
  #7
Aug 7th, 2008
I'm glad to have been able to help ... and I must be getting tired -- simple is almost always better -- good work.

~langsor
Reply With Quote Quick reply to this message  
Reply

This thread has been marked solved.
Perhaps start a new thread instead?
Message:


Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC