How to keep div height fixed during changing its content?


Tags: jquery,html,css

Problem :

<div id='wrapT'>some stuff here</div>
<div id='btnsT'>
<img id='prev' src='btns/prev_01.png' alt='prev'>
<img id='next' src='btns/next_01.png' alt='next'>
</div>

js

    $('#btnsT #next').click(function(){
    var a = $('#divsT > div').eq(xdiv).html();
    $('#wrapT').html(a);
});

#wrapT changes its content correctly, but it firstly changes its height to 0 for a few seconds, then come back to original height.

How to keep the height fixed during this process?

IMPORTANT: both the old and the new content is 450px in height.

I tried in css:

#wrapT{
    height:450px;
}

But in this case there is a problem during re-sizing the window - it stays always 450px.

also tried to add in btn click event:

var x = $('#wrapT').height();
$('#wrapT').css('height', x + 'px');
$('#wrapT').html(a);
$("#wrapT").css('height', 'auto');

witout success. #wrapT keeps to change its height.



Solution :

I have done something similar before. What you can do is load the next item behind the current one with visibility:hidden; and possibly a lesser z-index. This means the shape of wrapT will stay.

You can then do something like:

$('#OldItem').fadeOut(400, function() {
   $(this).remove();
});
$('#NewItem').fadeIn(400)

    CSS Howto..

    How to use Materialize css Tabs in Meteor?

    How to style responsive table to make table like list?

    How to fix CSS background position

    How can I make height: “100%” work cross browser in CSS?

    How do I bind data to a CSS property without using the style attribute of the element in Dart web-ui?

    How to center align the text?CSS

    How To Display only First Word of H2 Heading With JavaScript or CSS

    CSS Less changes not showing. Compile or IIS error?

    How to apply CSS to my JQuery Plugin

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How can I turn off hardware acceleration for certain HTML elements via CSS?

    How to use absolute position relative to parent element

    How to have a table scroll only within a custom control on page? CSS help needed

    How to recognise when it is appropriate to code CSS [closed]

    How to set the last inner div to fill the rest of the wrapper height with CSS?

    How to set a menu hover delay

    How to make child div scrollable when it exceeds parent height?

    How to compile CSS into SCSS

    only show those div where i do mouse-over

    HTML/CSS | How to place different elements in a header div to different positions?

    How to fix roll link in IE11

    How to prevent the scroll of table when click to header on Chrome?

    html,css.php? help how output my form subissions into webpage instead of text file?

    How to move CSS inline with PreMailer.Net whilst using MvcMailer for sending HTML emails

    CSS - how to keep images within container during browser window resize?

    How to apply CSS to 2x2 classes?

    In emacs how do I add a second type of commenting to a css derived mode?

    How to create a CSS box link without using display: block

    CSS - how to fix the hover?

    HTML/CSS: How to resize checkboxes (without overlapping)