1

I'm building a Wordpress theme and I have a problem with footer position. Index page is fine, I defined in style.css margin-top of "footer", witch holds bckimage to 900px and margin-top of "foot_sadrzaj" to 918px, because "foot_sadrzaj" holds text and images. Here's link: http://casabianca.ba/test/

Well, if I go to page, content of the page is in or, when displaying posts, in . I wrote some JS code to change position of a footer and foot_sadrzaj depending on position and height of sadrzaj or sadrzaj_single, elements containing content, but it doesn't work (like here: http://casabianca.ba/test/novosti/).... Can you help me figure out why?

Here,s the code:

var div = getElementById('sadrzaj');
var div2 = getElementById('sadrzaj_single');


if (div) {
    var z = div.style.offsetTop+div.style.offsetHeight;
    getElementById('footer').setAttribute(
            "style", "marginTop:" + z.toString() + "px");
    getElementById('foot_sadrzaj').setAttribute(
            "style", "marginTop:" + (z+18).toString() + "px");
}
else if (div2) {
    var z = div2.style.offsetTop+div2.style.offsetHeight;
    getElementById('footer').setAttribute(
            "style", "marginTop:" + z.toString() + "px");
    getElementById('foot_sadrzaj').setAttribute(
            "style", "marginTop:" + (z+18).toString() + "px");
}

Please, all I know is some JS and zero JQuery so answering something like "Try Jquery, I think that..." will not be helpfull at all....

3
  • Is there any reason why you are using absolute positioning on every element instead of floats? Feb 24, 2013 at 10:42
  • just a note, you don't need the .toString() here, it'll cast it to a string automatically.
    – kennypu
    Feb 24, 2013 at 10:45
  • I converted existing static HTML page to Wordpress theme, so we can say that I "inherited" absolute positioning and now I just want to patch it up... Feb 24, 2013 at 10:51

3 Answers 3

1

few fixes in your code

window.onload = function ()
    {
        var div=document.getElementById('sadrzaj');
        var div2=document.getElementById('sadrzaj_single');

        if(div) {
            var z=div.offsetTop+div.offsetHeight;
            var footer = document.getElementById('footer');
            footer.setAttribute("style","margin-top:" + z.toString() + "px");

            var foot_sadrzaj = document.getElementById('foot_sadrzaj');
            foot_sadrzaj.setAttribute("style","margin-top:" + (z+18) + "px");
        }
        else if (div2) {
            var z=div2offsetTop+div2.offsetHeight;
            document.getElementById('footer').setAttribute("style","margin-top:" + z + "px");
            document.getElementById('foot_sadrzaj').setAttribute("style","margin-top:" + (z+18) + "px");
        }
    }
  1. you should use window.onload, to run your script only after the document is ready
  2. you dont need style in div.style.offsetTop+div.style.offsetHeight.
  3. you write margin-top in the .setAttribute function, and not marginTop.
  4. you dont have to add toString(), JS knows how to handle this
  5. this line document.getElementById('footer').setAttribute("style","margin-top:" + z + "px"); is disabling the inline background-image attribute you wrote there, I assume you can handle this yourself from here
2
  • 5. I did by putting it in style.css Thnx a lot for the inputs, thanks to you, I managed to make it work. I had to reorganize a bit my HTML and make few changes in CSS, but basically, you solved the problem :) Now code looks like this: Feb 24, 2013 at 19:13
  • window.onload = function () { var div=document.getElementById('sadrzaj'); if(div) { var z=div.offsetTop+div.offsetHeight; var z2=div.offsetTop+div.offsetHeight+18; var footer = document.getElementById('footer'); footer.setAttribute("style","margin-top:" + z.toString() + "px"); var foot_sadrzaj = document.getElementById('foot_sadrzaj'); foot_sadrzaj.setAttribute("style","margin-top:" + z2 + "px"); } }</code> Feb 24, 2013 at 19:16
0

Instead of margin-top use "bottom : 0" for aligning things to the bottom of your container div. Then stop using the Javascript to define position and instead just use CSS.

it might even be fun to set "z-index:100000" and "position:fixed"

2
  • I tried "bottom: 0" and all I get was footer who was at the bottom of the window, not the page... Don't know why, honestly, I don't have the time to play around with it. "position: fixed" helped me even less... I tried it all before I wrote the code above ;) Feb 24, 2013 at 19:38
  • One more thing: My footer is outside of wrapper div because wrapper is in the middle of the page, width:1000px, but footer div must be width:100%, at the bottom and spread trough the whole page ;) Feb 25, 2013 at 17:09
0

Even tough code worked, I missed one angle: what if content is smaller than browser window. or there is no content yet? Then my footer is hanging somewhere in the middle, not at the bottom. Here is the solution, thanks to @Mitz and James Padolsey

Final solution:

function getDocHeight() {
var D = document;
return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}

window.onload = function (){
    var div=document.getElementById('sadrzaj');
    if(div) {
        var z=div.offsetTop+div.offsetHeight;
    var z2=div.offsetTop+div.offsetHeight+18;
    var windowHeight= getDocHeight();
if(z>windowHeight) {
        var footer = document.getElementById('footer');
        footer.setAttribute("style","margin-top:" + z + "px");

        var foot_sadrzaj = document.getElementById('foot_sadrzaj');
        foot_sadrzaj.setAttribute("style","margin-top:" + z2 + "px");
}
else {
    var footer = document.getElementById('footer');
        footer.setAttribute("style","margin-top:" + windowHeight + "px");

        var foot_sadrzaj = document.getElementById('foot_sadrzaj');
        foot_sadrzaj.setAttribute("style","margin-top:" + (windowHeight+18) + "px");
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.