Issue with jQuery's slideDown()

Question

Check this code: http://jsfiddle.net/ZXN4S/1/

HTML:

<div class="input">
    <input type="text" size="50" id="test_input">
    <input type="submit" value="send" id="test_submit">
</div>

<ul>
    <li class="clear">
        <div class="comment">
           <div class="image">
            <img src="http://www.chooseby.info/materiale/Alcantara-Black_granito_nero_naturale_lucido_3754.jpg">
           </div>
           <div class="info">
             <div class="name">Name</div>
             <div class="text">text</div>
             <div class="timestamp">timestamp</div>
           </div>
        </div>
    </li>
</ul>

jQuery:

$(document).ready(function() {
    $("#test_submit").click(function() {
        $.post('/echo/json/', function(data) {
            last = $("ul li:first-child");
            new_line = last.clone();
            new_line.hide();
            last.before(new_line);
            new_line.slideDown('slow');
        });

        return false;
    });
});

If you try to insert some text in the input field and click on the submit you can see the issue I'm talking about. When it slides down the height of slide is wrong and the effect is ugly. But if you remove the div info it works well. How can I fix?

:S I have to go eat... this is what I would do http://jsfiddle.net/xTFHt/ — Joseph Marikle, Nov 20 '11 at 01:30

score 1 · Answer 1 · answered Nov 20 '11 at 01:19

1

Setting:

ul li .info {
    float: left;
}

did it for me (tested in chrome)

answered Nov 20 '11 at 01:19

realshadow

2,599
1
20
38

Nice but if the text's height is heigher than image's height, the text goes to the bottom of image. Fortunately it seems that I've found a trick, check my new reply. – Fred Collins Nov 20 '11 at 01:29

score 1 · Accepted Answer · answered Nov 20 '11 at 01:30

1

This trick seems to solve the issue:

ul li .info {
    float: right;
    width: 485px; // fixed width to the div
}

answered Nov 20 '11 at 01:30

Fred Collins

5,004
14
62
111

score 1 · Answer 3 · answered Nov 20 '11 at 03:46

1

The problem is simply the layout model. You can add overflow:hidden to give layout to an element in most browsers:

ul li .info {
  overflow: hidden;
}

Will also solve it. You could fix your width optionally as well, but it's not required.

Bonus pedantic help that you didn't actually ask for:

You're using "return false" to prevent the default event. There's a function for that, which is more efficient in terms of how events bubble. Simply pass the event into the function (you can use any name you want, but I call it "event" for clarity) and then call preventDefault() on it:

$("#test_submit").click(function(event) {
  event.preventDefault()
// ... the rest of your code ... //
});

answered Nov 20 '11 at 03:46

Greg Pettit

10,749
5
53
72

Thank you for the `event.preventDefault()`. But for the first answer it doesn't works with `overflow: hidden;`. – Fred Collins Nov 20 '11 at 14:18
I tested it against your fiddle; it worked exactly the same as the float plus width code you posted to an answer. Maybe a browser compatibility thing? What browser/OS? – Greg Pettit Nov 20 '11 at 17:17
Firefox and OS X Lion. Btw, probably my way is best for browser compatibility. – Fred Collins Nov 22 '11 at 00:48

score 0 · Answer 4 · answered Nov 20 '11 at 01:08

0

After playing in JS Fiddle, this seems to have done the trick:

In your CSS, ul li .info { }

Add: height: 50px;

answered Nov 20 '11 at 01:08

djdy

6,779
6
38
62

Yep I've done it too. The problem is the text is variable, so I can't fix `li` height. – Fred Collins Nov 20 '11 at 01:10

Issue with jQuery's slideDown()

4 Answers4