Dynamic Web Page Lengths

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
rockman

Dynamic Web Page Lengths

Post 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.
Last edited by rockman on Sun Jan 02, 2011 6:26 am, edited 6 times in total.
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post 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
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees »

Does it work with FF3 with this url: <...link removed...>

EDIT
See my message at viewtopic.php?p=43231#43231
Last edited by kees on Sun May 25, 2008 10:18 pm, edited 1 time in total.
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post 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
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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)?
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo »

Only the height changes and it's static to the left(ne centering)

Hans
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees »

Do you mean that this solution can fix the problem?
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post 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
Last edited by haakoo on Sun May 25, 2008 10:07 pm, edited 1 time in total.
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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.
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post 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
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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.
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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?
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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.
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post 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).
User avatar
star57
 
 
Posts: 129
Joined: Fri Mar 02, 2007 10:45 am

Nice

Post by star57 »

Finally had time to try this, and the first instructions was to the point and very easy to follow. Works great... Thanks for the example...
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Post by Patr100 »

Ok I haven't tried any of the above yet, and I suspect this is a non starter - We all know WB5 is a fixed design html builder but is there any way of using a similar principle and adding some manual code tweaks etc to make a page made for say 800 pixels wide , stretch a little more HORIZONTALLY to fill a widescreen so there at least isn't such an obvious gap either side of a centred in browser page?
User avatar
Navaldesign
 
 
Posts: 862
Joined: Sat Mar 01, 2008 8:08 pm
Location: Italy
Contact:

Post by Navaldesign »

If you mean if there is a way of automatically increasing the page width to cover the entire screen width, whatever the sceen size/resolution is, the answer is no. But you can make a WB page wider, and set it to whatever width you like, not only 800.
www.dbtechnosystems.com
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Post by Patr100 »

Navaldesign wrote:If you mean if there is a way of automatically increasing the page width to cover the entire screen width, whatever the sceen size/resolution is, the answer is no. But you can make a WB page wider, and set it to whatever width you like, not only 800.
Yes but that would cause scrolling on a smaller screen res of course. Guess there no way of avoiding a compromise with fixed positioning & WB5.
User avatar
Navaldesign
 
 
Posts: 862
Joined: Sat Mar 01, 2008 8:08 pm
Location: Italy
Contact:

Post by Navaldesign »

Did you place the footer page content on the very top? If you have placed it low (where you expect it to appear) and on the same time the masterpage object is placed at the bottom of your page, the white space is doubled.
www.dbtechnosystems.com
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

this part is in one page in layer2 and in the other page in layer3 if I see it right. :? maybe you check this.

Code: Select all

<iframe name="Content" id="InlineFrame1" style="position:absolute;left:207px;top:151px;width:548px;height:120px;z-index:11;" src="http://www.menkom.com/dump/test6/home.php" scrolling="no" frameborder="0" onLoad="this.style.height=0;this.style.height=this.contentWindow.document.body.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)">Your browser does not support inline frames or is currently configured not to display inline frames.</iframe>
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

How do i point the iframe to an exteral site ?

This question was the problem you asked ,to link to an externel site and I was also searching how todo this,you found not a solution to this problem you stil link internal because its on your server and that was never a problem.

Maybe somebody els nows how to open an external site in the dynamic iframe?
User avatar
kees
 
Posts: 48
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees »

dangermouse wrote:You cannot link your iframe to WWW.GOOGLE.COM or WWW.MICROSOFT.COM because the rest of your website is not hosted on the microsoft.com servers.
I didn't follow the recent discussion between Eddy and dangermouse, so maybe this is an irrelevant comment.

Links to external pages must have the http:// prefix.
So http://www.google.com will work, www.google.com doesn't work.
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo »

Hi,

Something like this?Take look at page 4;
http://www.splitmedia.nl/loadingdock/dynamicpages/

Hans
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

haakoo wrote:Hi,

Something like this?Take look at page 4;
http://www.splitmedia.nl/loadingdock/dynamicpages/

Hans
U did put on page 4 an iframe and link external to the forum,this works also but you have not the dynamic vieuw in the indexpage ,If we can link external without an extra iframe so that the indexpage expands to the site lenght.
For me is the trick with the extra iframe a good solution. :wink:
haakoo
 
 
Posts: 189
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo »

Hi Eddy,

Depends on how the size of your IFrame is,
Then you can load anything.
The only downside,you cannot control the width or height of the site that loads into the IFrame
Nor can you control,if the developer of the site used a break-out-of-frame script.
But the extra IFrame is a good swift solution

Hans
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

You have to rebuild your menu to open all your pages in the iframe on your index page.
Look with the site manager to the structure from the files.
And look to where the buttons link in the example.
Pleasy read this topic,almost all questions are asked.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Here's how you can create an inline frame with a transparent background.
This will allow you to create scrollable text with the background of your main page showing through.

viewtopic.php?t=576
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

metatron, this dynamic ifame das not work with external pages/websites.

chris_saturn,maybe you are looking for this,but I dont know if u can use this together with the dynamic iframe code:

Sub-pages should open in an Inline Frame
viewtopic.php?t=1445

Or you disable the subpages to get listed in google with robots.txt / metatags dont follow.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Can u not use:
$new_height = 100%;

Why do u use this,for faster loading times?
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

The first page from your website is at te most servers index, the page extension can html,php,asp etc .

With the php code I cannot help you,but I think you need something like new height is iframe height in the code.

An easy solution is to use the same bg color as the bottom from you bg image than you dont have to expand the height from your image.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

chris_saturn,

Al menu links what I try dont work on your page with dynamic frame?
Testen in IE and FF.

Only on gallery photos das work.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

On firefox all pages are opening,in IE6 al links do nothing only photos shows up.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

I dont know if its possible to make it work in xhtml.

You can try with this html doctype:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Empty the doctype in page properties and insert the doctype above in: Page html-->between head tag.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Page properties-->Document type: None
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Sorry ,than I dont know how to make it work with the dynamic iframes.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Please read this topic back ,rsomat did ask the same question about xhtml and html with dynamic iframes.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

Its the same if you use another extension what not works in FF or safari and your extension das not work in google chrome with doctype XHTML

A script what is build for doctype XHTML wil not work in doctype HTML what you can try is to give the doctype an url.

You can try with this html doctype:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


Empty the doctype in page properties (Document type: None) and insert the doctype above in: Page html-->between head tag.
User avatar
Eddy
 
 
Posts: 473
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Post by Eddy »

link an external website into the dynamic iframe does not work.

Read from here.
viewtopic.php?t=4060&postdays=0&postorder=asc&start=45
User avatar
iamafireman
 
 
Posts: 84
Joined: Mon May 26, 2008 2:41 am
Location: Tennessee

Post by iamafireman »

I have tried both as well and they dont work. Any way to get an example that works with 6.5
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Post by Patr100 »

The new "content place holder" & "master frame" option in WB 6 and above does add some built in dynamic capacity to pages.

but as the original option in this thread no longer works I think this thread really should not be a "sticky" any more or an updated thread with options for dynamic pages replaces it asap.
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Post by Pablo »

Master pages and content place holders cannot be used together.
Content Placer Holders can only be used in combination with Master Frames.
http://www.wysiwygwebbuilder.com/master_frame.html

Also please do not use this topic for support question which are not related to the original article. It's getting a little confusing this way :?
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Post by Patr100 »

Could support please respond to my post above about this thread. The original example appears not to work any more. so why is this still a sticky?
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Post by Pablo »

The problem is not WYSIWYG Web Builder 7.
The code doesn't work because it's not W3C compliant.
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Post by Patr100 »

support wrote:The problem is not WYSIWYG Web Builder 7.
The code doesn't work because it's not W3C compliant.
Ok but it either needs updating or not a sticky any more as presently it doesn't work.
User avatar
Pablo
 
Posts: 21569
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Dynamic Web Page Lengths

Post by Pablo »

What you are asking is not possible in a What-You-See-Is-What-You-Get web site editor.
Since all objects are positioned absolute, they cannot be repositioned dynamically based on the content of another object. This can only be done with table based layouts.
rockman

Re: Dynamic Web Page Lengths

Post by rockman »

From the author:

My apologies to those who have had difficulties getting this code to work more recently. Indeed, the original code and sample .wbs file, written in 2007, was no longer compatible with later versions of WWB and/or the HTML language. I have found a solution and have replaced the initial zip file with an updated one. The link is repeated here for convenience: http://www.cardiackids.com/wysiwyg/dyna ... length.zip

As before, it has been tested with Internet Explorer.

Good luck on all your projects.
User avatar
[RZ]
 
 
Posts: 1914
Joined: Tue Nov 04, 2008 12:08 pm

Re: Dynamic Web Page Lengths

Post by [RZ] »

this is because the scrollheight function is not fully supported by all browsers.
i.e. it was introduced later in IE in version 8.
in some browsers you can access it via .contentWindow.document in others via .contentDocument in other browsers is not supported at all and so on....
regards.
Patr100
 
 
Posts: 115
Joined: Tue Dec 25, 2007 10:52 pm

Re: Dynamic Web Page Lengths

Post by Patr100 »

I think you will be told again by support that is simply not possible with the way WB works - as you know similar questions get asked frequently.
Post Reply