CODEWITHSUNDEEP
javascripthtmlposition
Zac.Ledyard
Zac.Ledyard

Reputation: 162

My footer will not remain at the bottom of the browser window when it is resized

I have a footer element on the bottom of my page that can be removed/brought back by clicking on two arrows. A problem arises when I re-size the browser window, the footer does not always stick to the bottom of the page and can end up off page, inaccessible, or in the middle of the page. I have put together a fiddle here, but the javascript doesn't seem to work in it...

http://jsfiddle.net/Za7Lq/

JS:

$(document).ready(function(){
  $("#darrow").click(function(){
    $("#footer").animate({"top": "+=100px"}, "slow");
    $("#uarrow").animate({"top": "-=50px"}, "slow");
    $("#darrow").animate({"top": "+=100px"}, "slow");
  });
});

$(document).ready(function(){
  $("#uarrow").click(function(){
    $("#footer").animate({"top": "-=100px"}, "slow");
    $("#uarrow").animate({"top": "+=50px"}, "slow");
    $("#darrow").animate({"top": "-=100px"}, "slow");
  });
});

Upvotes: 0

Views: 68

Answers (2)

kevincrab
kevincrab

Reputation: 74

I am not sure but if you want to have it at the bottom of your document or the bottom of the window.

Bottom of window

use absolute positioning but it may be messed up by your other elements which I think is your problem

Bottom of window

.class {
position:fixed;
bottom: 0px;
}

if none of them work

use javascript to find the bottom of your page when subtract that by the height of your footer and position it with javascript.

Upvotes: 0

relic
relic

Reputation: 1704

SEE MY EDIT BELOW. You probably don't need my alt-version.

So, rather than animating your top value to show/hide the footer, I would instead put your footer inside of a wrapper and animate the height value for that wrapper. Something kinda like this:

HTML:

<div class="footer-wrapper">
  <div class="footer">
    <p>Stuff in here</p>
  </div>
</div>

CSS:

.footer-wrapper {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
}

.footer {
  height: 100px;
  width: 100%;
}

JS:

$("#darrow").click(function(){
  $("#footer-wrapper").animate({"height": "+=100px"}, "slow");
});

Then, you can absolute position your arrows off of the footer-wrapper container, based off of a negative top value (if you want them above the footer) and they'll track along with the height of the container.

That should stick pretty solid to the bottom of any browser (no promises with older IE though).

EDIT:

After seeing your working fiddle, I think the problem is that you're setting the starting position of the footer using 'bottom', but you're trying to move it using 'top'. If you want to stick with your solution, animate the bottom value instead, and invert the +/- operators.

Upvotes: 1

Related Questions