Home › Forums › JavaScript › Jquery animate to 100%
- This topic is empty.
-
AuthorPosts
-
April 4, 2010 at 8:19 pm #28623
smilinmonki666
MemberHi 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…
April 6, 2010 at 5:06 am #68566noahgelman
ParticipantIf 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.
May 28, 2010 at 10:35 am #76699Stackelberg
MemberHi 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 :) -
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.