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 » Tue May 08, 2007 7:38 am

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.

navarro
 
 
Posts: 13
Joined: Tue May 08, 2007 2:29 pm

Dynamic Web Page Lengths

Post by navarro » Thu May 10, 2007 10:33 am

I am new to WYSIWSIG Web Builder 4 and with no previous experience in web page making, so be patient if my question is too simple.

I am in the process of creating my first web page and I have tried rockman savvy advise on how to create Dynamic Web Page Lengths. All seemed to work fine, till I tried to add text to my pages (page 0 throught4) outside the established page boundaries.

In a word, my pages (page 0 through 4) behaved as if I where creating pages with Static Web Page lengths.

The page properties that I used are:

Page width: 1024 Page heigth: 768

Character set: ISO 8859-1

Center in Browser

What shall I do to be able to add text outside the established page boundaries?

Thanks

rockman

Post by rockman » Thu May 10, 2007 4:25 pm

Hi navarro!

I'm not sure that I quite understand the question but here's a go:

The inline frame has a certain width (614 px in my example file). The content pages (Page 0 - Page 4) should have the same width. Larger widths on your content pages will invoke right-to-left scrollbars or unviewable content.

It shouldn't matter the height of the content pages because the index page will adjust.

If you want text or graphics "outside" of the inline frame. You can certainly place them on the index page -- knowing however that this content will be seen on every page.

HTH,
Jeff
Last edited by rockman on Sat May 12, 2007 5:19 am, edited 1 time in total.

navarro
 
 
Posts: 13
Joined: Tue May 08, 2007 2:29 pm

Dynamicpagelength and a lot of text to fit per page

Post by navarro » Thu May 10, 2007 5:06 pm

Rockman

I have worded the same question in the General Topics forum, because I realized that no questions should be asked in this forum.

The questions posted has been:

My apologies to the moderator for having posted this question before in the wrong place (WYSIWYG Web Builder Tips, Tricks and Code Examples).

Each one of the pages of the web site that I am developing with WYSIWYG WEB BUILDER 4 have a lot of text and I can't put it inside the boundaries of a page. Certainly I don't want to split one page content in zillions of subsidiary pages.

How can I do it with WYSIWYG WEB BUILDER 4.2? [/i]

The reply that I have got is to modify the Page properties. My understanding is that the page dimensions (width and height) should be equal to the resolution that you want your page to be viewed at.


I have read all comments, tutorials and help provided with WYSWYG Web Builder 4 program, but I have not been able to find a single example of how to create a web page with resolution 800 x 600 or 1024 x768 and be able to put into it let's say the text that fits into for example 4 DIN A4 pages.

Bear this one with me.

In your excellent example "dynamicpagelength", how do you do to fit into page 1, four times as much text as you provide in your example?

I guess the answer is a very silly one, but I can't figure it out.

Thanks for your time.

Navarro

haakoo
 
 
Posts: 230
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo » Sun May 25, 2008 7:08 pm

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: 49
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees » Sun May 25, 2008 7:17 pm

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: 230
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo » Sun May 25, 2008 7:37 pm

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: 49
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees » Sun May 25, 2008 7:46 pm

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: 230
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo » Sun May 25, 2008 7:57 pm

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

Hans

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

Post by kees » Sun May 25, 2008 8:01 pm

Do you mean that this solution can fix the problem?

haakoo
 
 
Posts: 230
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo » Sun May 25, 2008 8:14 pm

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: 49
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees » Sun May 25, 2008 10:13 pm

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: 230
Joined: Fri Apr 25, 2008 8:02 am
Location: Groningen/NL

Post by haakoo » Sun May 25, 2008 10:25 pm

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: 49
Joined: Mon May 23, 2005 7:36 pm
Location: Soest - NL

Post by kees » Sun May 25, 2008 11:02 pm

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.

Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests