magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Fix Header-Footer


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.

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


HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 2.1.0.1

Stack control: the fixed element (header/body/footer) can be placed in front of the page elements or behind them.

* 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.
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with