| | |
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 |
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...
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.
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>
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.
•
•
Join Date: Aug 2008
Posts: 381
Reputation:
Solved Threads: 33
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
Hope it helps
...
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>
Hope it helps
...
Last edited by langsor; Aug 7th, 2008 at 12:41 am.
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?
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.
•
•
Join Date: Aug 2008
Posts: 381
Reputation:
Solved Threads: 33
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 ...
Or using a global event capturing script -- I'm promoting this script today it seams :-)
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.
I haven't actually tested the above code blocks but I'm pretty sure they're close to what you're looking for.
Ciao
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; }; } };
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 ); }; };
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>
I haven't actually tested the above code blocks but I'm pretty sure they're close to what you're looking for.
Ciao
ah even simpler... I just took the 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 =).
javascript Syntax (Toggle Plain Text)
parent.window.scroll( 0, 0 );
Once again thanks for the quick response. Saved me alot of searching and hair loss =).
![]() |
Similar Threads
- Using Hidden Variables in ASP.NET (ASP.NET)
- Dynamicallu Resizeing IFRAME based on content (JavaScript / DHTML / AJAX)
- How to capture window events in javascript (JavaScript / DHTML / AJAX)
- iframe Height adjustment to loaded content, help please? (JavaScript / DHTML / AJAX)
- applet wont refresh (Java)
- Dynamic iFrame height, not working in ie without refresh. (JavaScript / DHTML / AJAX)
- Having problem in retrieveing values from pop-up window to main window (JSP)
- Microsoft - sort it out (rant) (IT Professionals' Lounge)
- iframe help - Height (HTML and CSS)
- IFRAMES as a buffer (JavaScript / DHTML / AJAX)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: Radio input value
- Next Thread: Need Suggestion regarding Limiting text box size
| Thread Tools | Search this Thread |
ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem checkbox child class close column cookies createrange() css cursor dependent disablefirebug dom download dropdown editor element engine error events explorer ext file form forms google gwt gxt hiddenvalue highlightedword html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl math matrixcaptcha microsoft mimic object onerror onmouseoutdivproblem onreadystatechange parent pdf php player post problem progressbar rated rating regex runtime scroll search security select session shopping size software sql star stars synchronous text textarea unicode validation w3c web website window windowofwords windowsxp wysiwyg xml \n





. 