[rz] Fullsize Headers-Footers *** UPD 2014-Oct-14 ***

In this section you can announce self-made paid extensions.
*** THIS SECTION CONTAINS PAID EXTENSIONS ONLY ***
User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

[rz] Fullsize Headers-Footers *** UPD 2014-Oct-14 ***

Post by [RZ] » Thu Mar 29, 2012 9:21 am

[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.
Last edited by [RZ] on Fri Oct 17, 2014 1:43 am, edited 4 times in total.

User avatar
protectourlands
 
 
Posts: 449
Joined: Sat May 24, 2008 2:16 am
Contact:

Re: Full-sized headers and footers in centered pages.

Post by protectourlands » Sat Mar 31, 2012 4:24 am

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

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full-sized headers and footers in centered pages.

Post by [RZ] » Sat Mar 31, 2012 5:56 pm

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

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full-sized headers and footers in centered pages.

Post by [RZ] » Wed Jun 06, 2012 12:47 pm

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)

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full-sized headers and footers in centered pages.

Post by [RZ] » Wed Jun 06, 2012 2:27 pm

glad to know.
thanks for your feedback.

zotekW7
 
 
Posts: 76
Joined: Sat Oct 01, 2011 12:45 am
Location: san diego

Re: Full-sized headers and footers in centered pages.

Post by zotekW7 » Wed Feb 06, 2013 7:24 am

where do u usualy use this extension for?? thank you

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Full-sized headers and footers in centered pages.

Post by [RZ] » Wed Feb 06, 2013 7:30 am

please read the first post

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by [RZ] » Sun Nov 10, 2013 2:46 pm

* 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).

User avatar
bburgess
 
 
Posts: 201
Joined: Mon May 13, 2013 5:05 am
Location: Australia
Contact:

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by bburgess » Sun Nov 10, 2013 11:15 pm

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

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by [RZ] » Mon Nov 11, 2013 4:51 am

bburgess wrote:[RZ] outstanding stuff mate very nice, Thank you!!!
thank you for your feedback!

User avatar
milux
 
 
Posts: 9
Joined: Thu Mar 08, 2012 5:16 pm
Location: Italy
Contact:

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by milux » Fri Feb 07, 2014 11:20 am

Very great extension; thx to RZ

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

Michele

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by [RZ] » Fri Feb 07, 2014 11:34 am

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

User avatar
milux
 
 
Posts: 9
Joined: Thu Mar 08, 2012 5:16 pm
Location: Italy
Contact:

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by milux » Fri Feb 07, 2014 12:12 pm

[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

User avatar
[RZ]
 
 
Posts: 2104
Joined: Tue Nov 04, 2008 12:08 pm

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by [RZ] » Fri Feb 07, 2014 12:21 pm

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

User avatar
milux
 
 
Posts: 9
Joined: Thu Mar 08, 2012 5:16 pm
Location: Italy
Contact:

Re: Fullsize headers/footers in cntrd pages. *** UPD Nov 10

Post by milux » Fri Feb 07, 2014 12:31 pm

[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 ..

Post Reply