Page 1 of 1

Responsive Webhelp Footer

Posted: Thu Nov 03, 2016 11:51 pm
by dgallo
I am having an issue with the footer where, if there is not a lot of content on a page, the footer appears to be floating in the middle of the screen. Ideally I would prefer it to be pushed to the very bottom of the page.

Do you know how to fix this?

Re: Responsive Webhelp Footer

Posted: Fri Nov 04, 2016 5:23 pm
by bogdan_cercelaru
Hello,

To have the footer locked to the bottom of the page when the content doesn't fill the entire page you could set the "webhelp.fragment.after.body" parameter to point to an XML file with the following content:

Code: Select all


<span id="hidden">
<style>
#hidden {
display: none;
}
.wh_content_area {
min-height: inherit;
}
.wh_footer {
position: fixed;
}
</style>

<script>
<!--
function footerPosition() {
var $whContentArea = $(".wh_content_area");
var $whFooter = $(".wh_footer");

var contentAreaHeight = $whContentArea.height();
var contentAreaTop = $whContentArea.offset().top;
var pageHeight = $(window).height();
var footerHeight = $whFooter.height() + parseInt($whFooter.css("margin-top")) + parseInt($whFooter.css("margin-bottom"));

if (pageHeight < contentAreaHeight + contentAreaTop + footerHeight) {
$whFooter.css("position", "relative");
} else {
$whFooter.css("position", "fixed");
}
}

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

$(window).resize(function() {
footerPosition();
});
-->
</script>
</span>
You can find more information about the "webhelp.fragment.after.body" parameter usage here: WebHelp Responsive Customization Methods

Regards,
Bogdan

Re: Responsive Webhelp Footer

Posted: Wed Nov 23, 2016 5:05 pm
by dgallo
That does not seem to work. Instead it shrinks the footer horizontally on the page.

Re: Responsive Webhelp Footer

Posted: Thu Nov 24, 2016 12:00 pm
by B-E-N
Don't have a solution, but am also very interested in finding one. The suggested solution didn't work for me.

Re: Responsive Webhelp Footer

Posted: Thu Nov 24, 2016 1:29 pm
by alin
Hello,

I have tested Bogdan's solution and it worked for me.
Please make sure that the end marker of the comment that wraps the JS code ("-->") is placed on a new line (like in Bogdan's example) or it is preceded by //.

Code: Select all

<!-- JS code //-->

Re: Responsive Webhelp Footer

Posted: Fri Nov 25, 2016 4:14 pm
by B-E-N
I think I used it correctly, but instead of being pushed to the bottom of the page, the footer is even more in the middle of the page than before.

We are using a customized WebHelp Responsive. Can I give any more input?

Re: Responsive Webhelp Footer

Posted: Fri Nov 25, 2016 5:06 pm
by alin
Please try to use the above solution with an unaltered WebHelp Plugin (without customizations).
Does it work this way?

Re: Responsive Webhelp Footer

Posted: Mon Nov 28, 2016 11:45 am
by B-E-N
You are right, with a standard WebHelp plug-in the solution works. I'll try to figure out why.