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 make elements appear one by one using css animation

    How to add animated gif to an image sprite?

    how can I set the opacity of the background of a span, but not the text? [duplicate]

    How to split the image using Javascript + CSS?

    How to get the navigation bar to align to the center

    How to change the style of the arrow in a select box using css

    How to Make Glossy Colors in CSS. [closed]

    jQuery select- How to change the css style select?

    How do I make a div top to be the bottom of other div

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    how to textalign in middle with css?

    how can I use the CSS selector to solve this [duplicate]

    How to reorder controls of WYSIWYG editor

    How to put the faded hover effect on the button?

    How to make a content property in css use php

    How do i cover the image on navbar as well?

    How to make background color extend all the way to bottom of page / content?

    Explaining how to use classes with SASS to a Python thinker

    How come my