Question

I’m developing a custom theme, based on PageBuilder2 (csa2.theme) for WebSphere Portal 7. I’m using JQuery 1.7.1.
One of the requirements is to have a footer(id is div#footer) and a help bar(class is div.footer.flotante) that lies just at top of footer while footer is in viewport, but it needs to float at bottom of window while footer is not in viewport… kinda Facebook new timeline toolbar (add to friends, etc) or Mashable social widget, only that from bottom.

The following is a snippet of what I’ve done with JQuery to get this:

$(window).scroll(function (event) {
    var barra = $('div.footer.flotante');
    var offset = barra.offset();
    var bh = barra.height();
    var h =  offset.top;
    var wh = $(window).height();

    var dh = $(document).height();
    var y = $(this).scrollTop();
    var x = dh - y - wh;
    var hf = $("div#footer").height();

    if (x > hf) {
        barra.addClass('fixed');
    } else {
        barra.removeClass('fixed');
    }
});

These are CSS styles I’m using:

div.footer.flotante{
    background:url(../images/footerone.png) repeat-x;
    width:100%;
}
div.footer.flotante.fixed{
    position: fixed;
    bottom: 0px;
    z-index: 1;
}

With that code I got to float my toolbar in case of a html page with static content (therefore value of dh is constant). My problem is that being this a theme development, is expected to have content loaded dynamically to body of document, increasing dh value to an unknown amount of pixels. In this scenario the calculation for value of x is taking the initial value of dh, giving as a result a mispositioned floating toolbar.

1. How could I recalculate value of dh after render that content?
2. Given that there is no such a property called offset().bottom, is there a way to temporarily “flip upside-down” document in order to calculate offset().top value for my toolbar thus eliminating the need to know final value of dh?
3. Have you another suggestion to do what I’m trying?

Thanks in advance.

Answer 1

I found the cause of the problem: it was an absolute positioned image for a logo which had a negative bottom attribute, thus creating an extra vertical spacing below the footer and increasing dh value.