Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Jquery animate to 100%

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #28623

    Hi guys,

    I am trying to make a div expand to the height of the text. I can set it to a set value but this is for a blog so I want to set it to the text height. The CSS looks like this:

    Code:
    .blogitem {
    position: relative;
    left: 40px;
    width: 800px;
    height: 140px;
    margin: 10px;
    border-left: 1px solid #C9C9C9;
    border-right: 1px solid #C9C9C9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    .blogitem h1 {
    position: absolute;
    top: 5px;
    left: 90px;
    padding: 0;
    margin: 0;
    font-size: 12pt;
    color: #505050;
    }

    .blogitem .user a {
    font-size: 10pt;
    color: #699310;
    text-decoration: none;
    }

    .blogitem .user a:hover {
    font-size: 10pt;
    color: #699310;
    text-decoration: none;
    }

    .blogitem p {
    position: absolute;
    top: 15px;
    right: 40px;
    bottom: 5px;
    width: 650px;
    height: 0 auto;
    border: 0px solid #000;
    overflow: hidden;
    font-size: 10pt;
    padding: 10px;
    background: #F5F5F5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    }

    & the jquery looks like this:

    Code:
    $(document).ready(function() {
    $(‘.blogitem’).hover(function() {
    $(this).stop().animate({‘height’: ‘100%’}, 500);
    }, function() {
    $(this).stop().animate({‘height’: ‘140px’}, 500);
    });
    });

    The html looks like this:

    Code:
    {
    echo “

    “;
    echo “

    ” . $row{‘#’} . ” by: ” . “” . $row{‘#’} . “” . “” . “

    “;
    echo “

    ” . $row{‘#’} . “

    “;
    echo “

    ” . date(“M”,strtotime($row[‘#’])) . “
    ” . “” . date(“d”,strtotime($row[‘#’])) . “” . “
    ” . date(“Y”,strtotime($row[‘#’])) . “

    “;
    echo “

    “;
    }

    Can anyone help with this please… it’s driving me nuts…

    #68566
    noahgelman
    Participant

    If you want it to animate to 100% height, the the div surrounding it needs to be position relative I believe. So the parent of .blogitem needs to be position relative.

    #76699
    Stackelberg
    Member

    Hi guys,
    Wondering if this problem was resolved. I’m having the exact same problem with very similar code, and setting a parent div to position:relative does not seem to be solving the problem. I’m worried this may not be a syntax error but a misunderstanding of how jQuery works. When I inspect my code I can see the height value changing from 0 to 100% gradually, yet the actual animation is just a jump. Thanks :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.