Page 1 of 4

Dynamic Web Page Lengths

Posted: Tue May 08, 2007 7:38 am
by rockman
A standard format for a website is a header section, body section, and footer section. Since WWB excels in creating Fixed Page Layout HTML, designers usually have to manually adjust their body section and footer section based on the amount of content contained on a particular page. The following code performs dynamic (automatic) placement of the footer and stretching of the body based on the height of a main inline frame.

Here are screenshots of an example:
Image
The footers and body automatically adjust depending on the amount of content contained on the page.

The key is placing the following HTML code in the inline frame's "Inside Tag":

Code: Select all

onLoad="this.style.height=0; this.style.height=Content.document.documentElement.scrollHeight; Layer2.style.height=parseInt(this.style.height) + (parseInt(this.style.top) - parseInt(Layer2.style.top)) * 2; Layer3.style.top= parseInt(Layer2.style.top) + parseInt(Layer2.style.height)"

To see an example website using this technique (based on Pablo's Inline Frame sample), click on this link:
http://www.cardiackids.com/wysiwyg/dynamicpagelength/
To have a copy of the .wbs file that created the website, download it here**:
http://www.cardiackids.com/wysiwyg/dyna ... length.zip

Special notes:
1. There are three layers on the page (Header, Body, and Footer) and a main inline frame (Content).
2. In the code above, replace "Content" with the name of your inline frame.
3. In the code above, replace "Layer2" and "Layer3" with the id's that WWB assigns your body and footer layers, respectively. To find the id's, refer to the Quick Properties window or the Object Manager window.
4. The inline frame cannot be a member of a layer and must be a higher z-order (on top) than the layers. Therefore, when designing, make your body layer rather short (it will stretch automatically later) and make your inline frame taller than the body layer. In this way the inline frame does not become a member of the layer.
5. When designing the page, place the inline frame down from the top of the body layer as to make a "top margin". The code listed above uses this same distance to create a "bottom margin" - distance between the bottom of the inline frame and footer.
6. The code has been tested in Internet Explorer. It has not yet been tested in Firefox and Opera.

**P.S. I have since changed the file download to a .zip file to include the graphics. If you have problems downloading or working with the demo, please let me know.

Posted: Sun May 25, 2008 7:08 pm
by haakoo
Hi,

Don't know for sure,it seems FF3 is more strict then FF2.
Tested something in 2 and it worked,didn't get a warning or error.
tested exactly the same thing in 3 and threw me an error as the function could not be executed.
When testing it online,FF3 didn't throw me errors anymore.

But this dynamic iframe didn't make it offline nor online,think it needs some tweaking or it's history

Hans

Posted: Sun May 25, 2008 7:17 pm
by kees
Does it work with FF3 with this url: <...link removed...>

EDIT
See my message at viewtopic.php?p=43231#43231

Posted: Sun May 25, 2008 7:37 pm
by haakoo
Hi Kees,

Everything but mijn kind online.
Think it's an html issue, since you're using little html with xml and php

Hans

Posted: Sun May 25, 2008 7:46 pm
by kees
But does the Iframe height change on every new choise? That's the point in this discussion.

The JavaScript code used to work in IE6/7 and FF2, but not in Opera.

The JavaScript in the url above has some improvements, to make it work in Opera. But does it work in FF3 as well?

Does the Iframe resize in both directions (larger and smaller)?

Posted: Sun May 25, 2008 7:57 pm
by haakoo
Only the height changes and it's static to the left(ne centering)

Hans

Posted: Sun May 25, 2008 8:01 pm
by kees
Do you mean that this solution can fix the problem?

Posted: Sun May 25, 2008 8:14 pm
by haakoo
Hi Kees,

Tried(the example download) on the server and works now
(maybe FF3 had to install some updates??)
Gives warnings about the scrollbar thingies(no issue)
Only other warning is the use of name/id usage in the global scope and to use getElementById instead

Hans

Posted: Sun May 25, 2008 10:13 pm
by kees
To test my solution, you can download the fixed *.wbs file from here.

It was tested in IE6/7, FF2 and Opera9 (all latest versions at the moment).

Comments are appreciated.

Posted: Sun May 25, 2008 10:25 pm
by haakoo
This is the warning i get,it works.

Code: Select all

Waarschuwing: Door ID/NAME in de globale scope gerefereerd element. Gebruik in plaats daarvan document.getElementById(), volgens de W3C-standaard.
Bronbestand: http://www.splitmedia.nl/loadingdock/testsizingiframe/
Regel: 1

Hans

Posted: Sun May 25, 2008 11:02 pm
by kees
Just to clearify: a warning isn't an error. A warning is an advice, a recommendation.

For WebBuilder users I try to avoid getElementById(), because it's far beyond the WebBuilder concept.

Thanks for your feedback anyway.

Posted: Mon May 26, 2008 10:17 pm
by kees
Fabry67 wrote:... what's wrong with using a GetElementByID ?
If we can avoid 'GetElementById' (or other references to object names or id's) we have a generic script, that works on any Iframe. Otherwise the script has to be adjusted to each specific Iframe. Agree?

That's why I replaced 'IframeName.document.body.scrollHeight' with 'this.contentWindow.document.body.scrollHeight'.
Fabry67 wrote:Anyway, the only annoying thing with this solution is the "flicker" effect.
Yes, but I'm happy with this trick anyway.
Fabry67 wrote:I also have the doubt that on slow connections or on much more complex pages, a fixed delay (150ms) wouldn't be enough.
The 150ms was found by experiment. Do you suggest a higher value?

Posted: Thu Jun 19, 2008 9:55 pm
by kees
A few days ago there were new updates of FireFox (3.0) and Opera (9.50).

I tested the original example from rockman's message ( viewtopic.php?p=16739#16739 ) with these latest versions and found that it works fine.

That means that my 'fix' ( viewtopic.php?p=43231#43231 ) has become redundant.

Can anyone confirm that rockman's example is working on all mayor browsers (FF6/7, FF3, Opera9.50, ???).

Thank you.

Posted: Fri Jul 04, 2008 5:42 am
by kees
dangermouse wrote:Is it possible for this concept to work with php and can i instead of calling an inline frame call a html box with some php code in it will that work ?
This concept is based on an Iframe and only works with an Iframe.

PHP is not involved in this concept, but can be added (as in any page).