Home › Forums › JavaScript › jQuery outerheight not correct. Help Please!!!
- This topic is empty.
-
AuthorPosts
-
June 24, 2010 at 10:44 am #29469Marc SandersMember
Hi all,
Tearing my hair out here.
I am trying to have a read more link which is meant to slide the containing div down and fade in the content. Except the jQuery outerheight function is not correctly outputting the correct height for the containing div but giving a height about 38px shorter than it should be. Example code below:
HTML
Code:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id velit eu est pulvinar suscipit non quis felis. Sed ac neque risus. Fusce metus velit.
CSS
Code:p {
margin-top: 12px;
}jQuery
Code:$(document).ready(function() {
$(“.more”).css(‘display’, ‘none’);
$(“.view”).toggle(
function(includeMargin) {
$(“.view”).html(‘Read Less’);
var h = $(“.more”).outerHeight();
$(“.more”).css(‘height’, h);
$(“.more p”).css(‘display’, ‘none’);
$(“.more”).slideDown(500,
function() {
$(“.more p”).fadeIn(500);
}
);
},
function() {
$(“.more p”).fadeOut(500,
function() {
$(“.more”).slideUp(500);
}
);
$(“.view”).html(‘Read More’);
}
);
});June 24, 2010 at 1:42 pm #78838jamygoldenMemberI checked out your demo and it seems to be working perfectly. I tested it in Firefox, Chrome and IE 8.
Btw, the secondCode:$(“.more p”).css(‘display’, ‘none’);is unnecessary.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.