www.wysiwygwebbuilder.com

[rz] Fix Header-Footer v2.1

This extension/patch allows you to have full-sized headers and footers placed in masterpages to be used in horizontally centered pages.
Sample project included.


HTML 4.01 Transitional
W3C compliant

(Fully tested in all major browsers: FireFox, Chrome, Safari, Opera, Maxthon, including the mega-annoying IE in all of its versions and tastes from quirks, 7, 8, 9 and 10.)


* New in version 2.1.0

Added support for RWD.
Added compatibility with [rz] Advertisement extension.
Improved code for better cross-browser and backward compatibility.

Function added:
MyObject.checkpos();
It applies only to footers, and due to their nature, sometimes they should be updated/recalculated in advanced designs; i.e: when opening a [rz] Advertisement instance. MyObject must be replaced with the actual extension instance id.

* New in version 2.0.0

The extension was completely redesigned and rewritten; now the "core" is not needed anymore, just one extension does all the work and supports all major browsers, even the (very) older ones such as IEquirks, IE7, IE8, among others.
The header and footer can have margins, depending where these objects are placed in the main page; advanced calculations were added to fit the most complex designs.
Many variants are available: Header, Body, Footer (move to bottom) and Footer (fill to bottom).


How to use?

** Header:

1. New page.
2. Drag and drop a layer covering the page width (the head and width of the layer, header-masterpage and main-page should be the same; however, it is up to the design scheme).
3. Design your header's content as you usually do.
4. Open the layer's properties dialog and setup the following:

Location and size:

Mode -> Default

[ ] Relative horizontal position
[ ] Relative vertical position
[√] Relative horizontal sizing (<- see the recommended setting in the extension workspace)
[ ] Relative vertical sizing

Alignment -> Left / Center (this is the most used) / Right

5. Add the [rz] Fix Header-Footer extension on top; in the extension properties dialog, enter the unique name of the Master Page object, the same to be used in all pages for the header (i.e. mpHeader).

** Footer:

1. New page.
2. Drag and drop a layer covering the page width (the height and width of the layer, footer-masterpage and main-page should be the same; however, it is up to the design scheme).
3. Design your footer's content as you usually do.
4. Open the layer's properties dialog and setup the following:

Location and size:

Mode -> Default

[ ] Relative horizontal position
[ ] Relative vertical position
[√] Relative horizontal sizing (<- see the recommended setting in the extension workspace)
[√] Relative vertical sizing (<- depends on the footer type, see the recommended setting in the extension workspace)

Alignment -> Left / Center (this is the most used) / Right

5. Add the [rz] Fix Header-Footer extension on top; in the extension properties dialog, enter the unique name of the Master Page object, the same to be used in all pages for the footer (i.e. mpFooter).

** Main Page(s):

1. New page, and design your page's content as you usually do.
2. Add a masterpage object: Tools / Advanced -> Master Page.
3. Select the header page.
4. In the same Master Page Properties dialog:

[√] Master Page is a layer

5. Go to the Object Manager and name the masterpage object with the same unique name in all pages (i.e. mpHeader).

Repeat the same steps 1 to 5, just be sure that you are adding the footer in step 3, and in step 5 you name the object with the same unique name in all of the pages (i.e. mpFooter).


Preview/publish your site and now you can have full-sized headers and footers in your horizontally centered pages.
Enjoy!



** Notes:

- Why I need to name with the same ID in all my pages the masterpage object?
Because this way you have totally centralized the header and footer layers.
Instead of add and setup an extension in all of your pages, you just drag and drop the object only once in the header/footer pages.
In the case you change something, let's say, the header background, you simply do it and republish your site, that's all. You don't need to do any other change!
Anyhow, you can have the patch repeated in each page, but this defeats the purpose of the masterpage...

- This exension works only in horizontally centered pages.

- You can have virtual margins, this means that your main page can be wider than the header and footer; however, in IEquirks mode, these footers and headers are always fully-expanded.

- Footers behave in two modes:
a) the footer can be placed always at the bottom of the screen; however, if the content is large enough, the footer will be relocated after the content at the end of the page.
b) the footer will always be placed immediately after the content; if there is not enough content, the footer will fill the physical space up to the bottom of the available space.

Very cool RZ. Addresses a long standing problem trying to apply relative sizing in masterpages. Excellent!

thank you protectourlands, your feedback is appreciated and is encouraging as well.

hagepat (a forum member) reported this:
If I put slideshow on masterpage with your extension, the slideshow is not working. I only shows the first picture. I tried it with new masterpage and remove your extension and then the slideshow is working. Is this a known issue with your extension? Do you have an solution for it?

first of all, thanks for the report.
fortunately, the solution is as follows:

in the sample project file you will find in the header page an html box with a description: "Fix Header (optional)"'; and in the footer page: "Fix Footer (optional)".

go to the header page
open the html box and you will find this:
<script type="text/javascript">
FixLayer('wb_mpHeader','top');
</script>

lets say your masterpage in your site is called MyNiceHeader (in all pages, please read the attached info file).
replace mpHeader with MyNiceHeader.
so, the final code in the html box will be:
<script type="text/javascript">
FixLayer('wb_MyNiceHeader','top');
</script>

do the same for the footer.
now remove the [rz] Fix Header-Footer extension(s) you have.
leave the [rz] Fix Header-Footer (core) extension, don't remove it.

if you don't have the optional html box in your own site, of course copy and paste it making the proper changes, as mentioned.

that's all.
anyhow, i will think how to improve this for the next update.
thank you all again.

(ps: if it seems overcomplicated for you, you can put the jquery based object (like the slideshow) in an inlineframe until the next update)

glad to know.
thanks for your feedback.

* New in version 2.0.0

The extension was completely redesigned and rewritten; now the "core" is not needed anymore, just one extension does all the work and supports all major browsers, even the (very) older ones such as IEquirks, IE7, IE8, among others.
The header and footer can have margins, depending where these objects are placed in the main page; advanced calculations were added to fit the most complex designs.
Many variants are available: Header, Body, Footer (move to bottom) and Footer (fill to bottom).

[RZ] outstanding stuff mate very nice, Thank you!!!

bburgess wrote:[RZ] outstanding stuff mate very nice, Thank you!!!

thank you for your feedback!

Very great extension; thx to RZ

now I can use the new template with header and footer that fill page width..

Michele

thank you for your feedback
(show us your work!)

[RZ] wrote:thank you for your feedback
(show us your work!)

It's a test in development : http://test.3md.it/tvt-test/index.html

you have a two pixels width gap
carousel 942
page width 940
this causes a permanent horizontal scrollbar, no matters how you resize your browser
you should fix this
besides this, it is a good example of a good use of tools

[RZ] wrote:you have a two pixels width gap
carousel 942
page width 940
this causes a permanent horizontal scrollbar, no matters how you resize your browser
you should fix this
besides this, it is a good example of a good use of tools

Great, thx for your feedback, I will fix ..

you don't need to strictly put the extension within the layer you want to expand
i did the following test:
open the demo
open and go to the header1 page
cut the extension
now open go to sample1 page
paste there the extension
open and go to the footer1 page
cut the extension
go to sample1 page
paste there the extension, the same as you did for the header
run the preview

the results are as expected, so this means that you don't need to put the extension into the layer
the main point is that the extension need to be after the masterpage you want to expand BUT, for even better/faster/smoother results the extension *can also* be within the layer (on top of all of their contained objects)
this method also resolves an old opera annoying html rendering

@protectourlands
the previous post was my answer to your question, but seems you removed your post!
(may i ask why?)

I'm so sorry RZ

I did not see your answer and while I went to edit the post with new info, I accidentally erased it. I meat no harm.

For reference for others, I was inquiring about the fix object and placing it in a layer object. My layer object is too small for the fix object to fit into. I mistakenly thought the fix object had to be placed into the layer. Thank you for advising me that it does not.

I was going to edit the post by including more details. The issue is, my master page contains more objects than the layer and it's objects. So when i add the fix object to the master page, while the layer functions properly in the other pages with the applied master objects, the objects outside the layer do not center on the other pages when previewed. All pages have center horizontal selected.

Am I explaining this well enough?

so put the other objects within another layer and in the layer properties dialog set 'alignment: center'
and in the extension, instead of point to the masterpage, just point to the layer that you need to expand
if this does not resolve your question, please post a sample project so i can see what you are trying to do

anyhow, you can have many masterpages in the same page, just point to the one you need to expand

Yes this worked. Thank you so much RZ. I use this extension often and so appreciate it. This was the first time I had additional objects outside the layer. I see now I needto isolate the outside objects.

Thank you again for taking the time to help me.

glad to know it works!

hi
rz download link doesnt work

says its set to private

for additional info, please follow this link: www.magnawebstudio.com/developer
for other details, please follow this link: www.magnawebstudio.com/shop
with regards,

hi rz

i m looking to buy your extensions

so i wanna know your terms

apart not for resale ....

[rz] Parallax Objects

[rz] Gold Pack

[rz] Full Screen Inline Frame

will i get discount hehe

hello;
the prices are incredible low
i have no margin for extra discounts
however, you can see that many products have rebates with the purchase of other products; also other packs also have bonus extensions
with kind regards

hi i wanna know your terms

like i can use for my self for multiple sites

multiples times

that means i can use for my unlimited sites(personal purpose)

right ??

this is a wb forum
for questions related to magnaeshop, please follow the link and contact there
thank you for your understanding

alright thanx

i did

you are welcome

UPGRADE AVAILABLE

* New in version 2.1.0

Added support for RWD.
Added compatibility with [rz] Advertisement extension.
Improved code for better cross-browser and backward compatibility.

Function added:
MyObject.checkpos();
It applies only to footers, and due to their nature, sometimes they should be updated/recalculated in advanced designs; i.e: when opening a [rz] Advertisement instance. MyObject must be replaced with the actual extension instance id.

I will buy this extensions anyway, but I want to know the following.
So, [rz] Fix Header-Footers works only on horizontally centered page?
I ask because I do a page that looks like it is centered but the objects are actually aligned with [rz] Align Object,
so I wonder whether [rz] Fix Header-Footer work on it?!
This is the site where I want to use extension: http://remix.com.hr/t1/

Sorry if the answer is already in the thread, but for my programming knowledge and my english, there are too many strange words.

this extension becomes very useful for horizontally centered pages, when you need masterobjects instead of masterframes
for the design you presented, you can do the same with [rz] Align Object
however, if you need an advanced/variable footer regardless of the page alignment, you still need this extension

Actualy I want to use one header/foother for all pages?
This site is not finished.

with this extension you can have centralized your headers and footers in masterobjects and manipulate them as you want

[RZ] wrote:with this extension you can have centralized your headers and footers in masterobjects and manipulate them as you want

... even if main page are not centered?

yes

I just tried and does exactly what I needed!
This is very useful tool.

Thanks, RZ

thank you for your feedback!

Header does not want to stand in front of other objects?
And why the name of extension in the project is [rz] Scroll?

1. use stack property to change this
2. i'm human, will fix this in the next update, however dont worry at all, it is just a caption
with regards

I use stack option but header wont go in front relative (100% width) sized layers.

it works
use the extension 'stack' property, not the wb object manager panel
if still not working you are using the extension in a wrong way
check the provided sample project and change the stack property to front and you will see it working

[RZ] wrote: check the provided sample project and change the stack property to front and you will see it working

So, what I did.

In sample1.html I expand size of lyrBody to 400px and changed properties to relative horizontal sizeing/center
In header.html I set extension properties stack to front
I also aligned mpHeader to front but wont work.

it has been quad-tested and it works

To me wont go in front 100% sized layers :/
Am I did something wrong in these steps?

so you are doing something wrong and i have no way to know what is wrong at your end
i can ensure that the sample is working

Sample is working by default, but I will like to see sample where works what I try to do, that header goes in front of 100% width layers.
I'll sent you my sample on email.

even when i do the back/front changes it works
also i changed the body layer and it also works

I send you my sample project. Please take a look and try to find what I did wrong.

nothing wrong in your sample! all is working pretty fine
the header is in front of the contents