how to dynamically (re)position an element according to the bottom of the page using JS / Jquery?

Question

Hi All,

the back story: i have a tab section on a page which when navigated through displays sections (divs) of varying height.

the result, is that certain inputs (which are strangely positioned for reasons i can't change) on this page reposition themselves problematically.

the proposed solution: as the page height changes, have these problem inputs repositioned according to the page bottom (from which their appropriate distances are always a constant).

what i'm thinking is that i need some js that does something like,

page height change triggers input position from bottom to = x.

there are two inputs if that's at all relevant. :)

if only there was css for this (i know there is under normal circumstances, but trust me -- not in this case).

thanks for your time & help i've been struggling with this for weeks!

Answer 1

It sounds like you just need to position the inputs absolutely to the bottom of a relatively positioned div. Like -

#form {
position: relative;
}

#inputs {
position: absolute;
bottom: 0;
    }

<div id="form">
<div id="inputs">
<input id="weirdinput" />
</div>
</div>

If thats not enough to get you pointed in the right direction you will need to provide some sample code for the crowd to look over.

Answer 2

You could try something like this using the jQuery event for the resizing of a window:

$(window).resize(function() {
  var windowHeight = $(window).height();//get new height of window
  var desiredHight = windowHeight - 50;
  $('input.myclass').css('top', desiredHeight.toString() );
});