Question

I am using Easy Pagination plugin to paginate some content. The problem is that after clicking ‘next’, the browser jumps up do to the height of the element loading data for Pagination.

I am trying to fetch the height of the element, example .recent, and give it to .recent before clicking .next (Before the pagination happens), then set it after.

So I am wondering how can I set the height of .recent, and then take off?

Here is what I tried so far:

  var recentH = $('.recent').height();

 $('.next').click(function(){
      $('.recent').css( 'height', recentH );
 });

Answer 1

I am trying to fetch the height of the element

$.height() or $.css('height') is what you´re looking for, they both get and set values. See height() and css().

“The difference between .css(‘height’) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px)”

before clicking .next (Before the pagination happens), then set it after.

Are you using some plugin for the pagination and does it have it´s own click event handler for the .next element?

Notice that your selectors matches elements by their CSS class and that there might be multiple elements. You should therefore specify the element to read the height of.

Short example;

$('.next').click(function(){
  var height = $('#firstElement').height();
  // Pagination actions here (toggling elements)
  $('#secondElement').css(height + 'px');
});