CSS - jQuery hiding/showing div changing height

Question

This may be a noob question but I want to hide the content within the P tag (.feedback-text), without the height of the div (.feedback-box) changing.

<div class="feedback-box">
    <p class="feedback-text"></p>
</div>

The p tag will have different lengths of text within it, but I do not want the div it from sliding up/down with it. The div must stay the same size unless the text it larger or smaller than before.

The reason why the text is changing is because ajax is getting different feedback entrys from a database. See this question for more information.

I hope I have made this clear. Thanks.

EDIT:

Please see this website, where I'm doing my tests. As you can see the feedback-box div is jumping around when the p tag is hidden and shown again.

After viewing http://molossi.co.uk/new102/feedback/, you have some bugs. Don't change the text until the animate is done. Update the text and reanimate. — Levi Morrison, Apr 16 '11 at 21:55
Thanks, what bugs are they? What are they causing? I cannot see any issues with it atm. — ryryan, Apr 16 '11 at 22:05
Levi, could you please take a look now, it seems to be playing up after I have tried to do what you said :/ — ryryan, Apr 16 '11 at 22:15
Hmm... it's working for me... what problems are you seeing? Also, what browser are you using? — Levi Morrison, Apr 16 '11 at 22:23
Actually, move your code to success. You don't want to animate unless you got a successful response, right? — Levi Morrison, Apr 16 '11 at 22:25

Blender · Accepted Answer · 2011-04-16T22:26:13.697

4

Just animate the opacity. This makes the element invisible, but still there:

$('.feedback-text').animate({opacity: 0}, 500);

Your JS code seems a bit fishy. Try replacing it with this:

function get_feedbackb() {
   $.post({url: 'feedback.php', function(data) {
     $('.feedback-text').stop().animate({opacity: 0}, 1000, function() {
       $(this).html(data);
       $(this).stop().animate({opacity: 1}, 3000);
     });
   });

   setTimeout(get_feedback(), 4000);
 });

$(document).ready(function(){
   get_feedback();
 });

edited Apr 16 '11 at 22:26

answered Apr 16 '11 at 21:43

Blender

289,723
53
439
496

1

No problem. After you fiddle with jQuery for a while, you remember little things like this ;) – Blender Apr 16 '11 at 21:52
It's playing up now, it messes up the opacity and shows the next feedback to early :/ lol – ryryan Apr 16 '11 at 22:15
Hmm, how are you displaying the feedback? Also, I'd use `$('.feedback-text').stop().animate({opacity: 0}, 500);`, as it stops the previous animation when called. Maybe that'll fix at least something. – Blender Apr 16 '11 at 22:18

score 1 · Answer 2 · answered Apr 16 '11 at 21:40

1

You could set the css property:

visibility:hidden;

Is this what you want?

answered Apr 16 '11 at 21:40

ninjagecko

88,546
24
137
145

Nope, this just completely hides it and it's contents inside :/ – ryryan Apr 16 '11 at 21:41
2

Alternatively set "opacity:0;" – o01 Apr 16 '11 at 21:41

score 0 · Answer 3 · answered Apr 16 '11 at 21:43

As I see it (and understand it, which I'm not sure I do), you have three options:

Set a fixed height on your parent div, and use the css overflow-y:auto to scroll if it gets too big.
use visibility:hidden; on the child
animate the opacity. It'll still be there.

CSS - jQuery hiding/showing div changing height

3 Answers3