Print Page | Close Window

How to place footer always at bottom of page view

Printed From: openElement Website
Category:

openElement


Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: http://forum.openelement.com/en/forum_posts.asp?TID=1856
Printed Date: Sep 29 2021 at 3:23am
Software Version: Web Wiz Forums 10.11 - http://www.webwizforums.com


Topic: How to place footer always at bottom of page view
Posted By: TC2020
Subject: How to place footer always at bottom of page view
Date Posted: Jul 21 2021 at 10:34pm
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.





Replies:
Posted By: Hobby001
Date Posted: Jul 21 2021 at 11:57pm
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();
}
);





-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: TC2020
Date Posted: Jul 22 2021 at 6:33pm
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.



Posted By: Hobby001
Date Posted: Jul 22 2021 at 6:52pm
I guess that I should make a training video and add it to my play list.

-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big


Posted By: TC2020
Date Posted: Jul 22 2021 at 8:19pm
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.




Posted By: Hobby001
Date Posted: Jul 31 2021 at 12:21am
I just finish the french version of the tutorial 

https://forum.openelement.com/fr/forum_posts.asp?TID=24106&PID=164523&title=crer-un-bas-de-page-standard#164523" rel="nofollow - https://forum.openelement.com/fr/forum_posts.asp?TID=24106&PID=164523&title=crer-un-bas-de-page-standard#164523

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





-------------
https://denislafrance.net/index.en-us.htm" rel="nofollow - Anyone who wants to put something on line gets hooked by something big



Print Page | Close Window

Forum Software by Web Wiz Forums® version 10.11 - http://www.webwizforums.com
Copyright ©2001-2012 Web Wiz Ltd. - http://www.webwiz.co.uk