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 get css hover values on click?

    How to Apply css class on runTime

    How float divs inside a td

    Jquery Show Hide with attribute

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    How to highlight anchor link when target div comes in view - jQuery

    How do I create a class hierarcy in CSS for MVC4 Razor?

    How do I keep parentheses of SASS / SCSS mixin?

    How to get `:after` to work in extjs iconCls?

    How can I make a fix positioned menu bar?

    How do you hide an HTML element based on a series of parent elements

    How does one override the JQuery UI styles?

    How do customize option box that pops up when selectbox is clicked (iOS, HTML, CSS)

    How to Make 4 cells in each line by only css & html

    How to adjust the height of a Bootstrap accordion

    How to maintain table row height in scrolling window - Firefox?

    How does localStorage act in Javascript? [closed]

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How to make my two sections vertically align, even when scaled, with different amounts of content?

    How to use CSS in LWUIT framework?

    How to remove simple text from HTML/HAML

    HTML, CSS: How to override settings from *{}(!important is not working) [closed]

    WebPack how to put all css files into one css file

    How to make accessible h1 with logo

    How to make div disappear when image is placed over it?

    How can I display links in 2 rows?

    How to remove the bottom border of a box with CSS

    How to make my first-child in css work properly?

    How to traverse and click on Next & Cancel Button (On PopUp) using selenium webdriver

    How to give slide down effect when hover?