BullGuard Antivirus Sale - 60% Off with openElement !
openElement Website Homepage
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to place footer always at bottom of page view
  FAQ FAQ  Forum Search   Register Register  Login Login

How to place footer always at bottom of page view

 Post Reply Post Reply
Author
Message
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 52
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Topic: How to place footer always at bottom of page view
    Posted: 21 Juil 2021 at 23:34
Hi,

I would like to know how to set footer properties such that it is always visible at the bottom of the browser.

On my page, I inserted a group of elements container inside its footer. This container has some text (e.g. notices) and background color. I would like to have this displayed at the bottom of the browser so viewers can always see it instead of having to scroll down to the end of the page.

If the above is not easily done by setting properties and requires some advanced coding, then is there a way to auto attach this footer to the end of the page contents?. Right now my footer is either far below the last content of the page (i.e. large white space in between the two); or it is above the bottom of the browser when the page has less contents/ short (i.e. all contents displayed in less a page view).

At the moment, I manually adjust the position of this footer by moving it up or down at the bottom according to the page contents. This does not seem like the right way of doing it and also it is not WYSIWYG in browser view.

Thank you.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5688
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 22 Juil 2021 at 00:57
Try this one:

  1. Create a new blank project
  2. Open the base layer
    1. Page tab, responsive, 100% width
    2. Page tab, responsive, Page Sections
      1. Main
        1. Position... Relative (like...
        2. Size auto checked
      2. Bottom
        1. Position... Relative (like...
        2. Size auto checked
    3. Fill the footer section with some stuff
  3. Open home page
    1. Make sure that base layer is attached
    2. Fill the content section with some info, you will see that the footer follows the content.
That is good as long as your page fills any type of screen.

If you want your footer to be placed at the bottom of screen unless the page is longer than the screen, go back to the base layer.

  1. Add a new javascript source code block at bottom of page
  2. Fill it with the following code:
function fullScreenMinimum(){
$('.OESZ_XBodyContent').css({'min-height':$(window).height()-$('.OESZ_XBodyFooter').height()});
}

$(document).ready(
function(){
fullScreenMinimum();
}
);

$(window).resize(
function(){
fullScreenMinimum();
}
);





Edited by Hobby001 - 23 Juil 2021 at 17:18
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 52
Post Options Post Options   Thanks (1) Thanks(1)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 22 Juil 2021 at 19:33
With step 1,2 and 3 only, the footer follows the page but not at the bottom when the page is short. With Javascript added, the footer is at the bottom with the same page length.

This works for me and I will apply this to my pages.

It's great to have a teacher around and thanks.

Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5688
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 22 Juil 2021 at 19:52
I guess that I should make a training video and add it to my play list.
Back to Top
TC2020 View Drop Down
Groupie
Groupie
Avatar

Joined: 26 Mar 2020
Location: Canada
Status: Offline
Points: 52
Post Options Post Options   Thanks (0) Thanks(0)   Quote TC2020 Quote  Post ReplyReply Direct Link To This Post Posted: 22 Juil 2021 at 21:19
Training videos on various topics/features would greatly help, especially someone like me using OE for the first time. I had gone through your videos and others but not many out there.

The challenges I have so far in using OE deal with setting properties for elements and placement (which relates to absolute and relative modes).

For properties, there seem to be many places that make you think you can set them but the outcome may not be what you want. An example of this is text properties. The outcome depends on what being clicked on and where the changes are made. A short tutorial showing a general concept of how OE works to get consistent outcome would be great.

For placement, I guess it is case/design specific but a video on general concept on how to place elements at specific locations and relative to each other would be great. In this case, think of a dashboard design having various shapes and sizes but elements need to be at their suitable places, such as logical groupings.

Again, thanks a lot for your time.


Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 5688
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 31 Juil 2021 at 01:21
I just finish the french version of the tutorial 


Note that there is a change to the js code in order to take the header and the footer size.


English version to follow soon





Edited by Hobby001 - 31 Juil 2021 at 01:23
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.