Help needed in modifying following JavaScript to not append if height is smaller or equal to 75px
I have a JavaScript function that adds a "more" button to a div that is hi开发者_如何学JAVAgher than 75px, so if the reader wants to read more he can click on the "more" button and the div will expand to its full size. The issue I'm facing is that it adds a "more" button even if the div is equal to or smaller than 75px in height.
So now I need help in modifying this script to not append <p class="continued">[…]</p><a href="#" class="adjust"></a>
when the div is smaller or equal to 75px, but if it is higher than that than add the "more" button.
Any ideas? Thnx ))
$(function(){var adjustheight=75;
var moreText="↓ More";
var lessText="↑ Less";
$(".more-less .more-block").css('height',adjustheight).css('overflow','hidden');
$(".more-less").append('<p class="continued">[…]</p><a href="#" class="adjust"></a>');
$("a.adjust").text(moreText);
$(".adjust").toggle(function(){$(this).parents("div:first").find(".more-block").css('height','auto').css('overflow','visible').slideDown("slow");
$(this).parents("div:first").find("p.continued").css('display','none');
$(this).text(lessText)},function(){$(this).parents("div:first").find(".more-block").css('height',adjustheight).css('overflow','hidden');$(this).parents("div:first").find("p.continued").css('display','block');$(this).text(moreText)})
});
Try this: http://jsfiddle.net/mv7RU/2/
$(function() {
var adjustheight = 75;
var moreText = "↓ More";
var lessText = "↑ Less";
$(".more-less").each(function() {
if ($(this).height() > adjustheight ) {
$(this).append('<p class="continued">[…]</p><a href="#" class="adjust"></a>');
}
});
$(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
$("a.adjust").text(moreText);
$(".adjust").toggle(function() {
$(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible').slideDown("slow");
$(this).parents("div:first").find("p.continued").css('display', 'none');
$(this).text(lessText)
}, function() {
$(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
$(this).parents("div:first").find("p.continued").css('display', 'block');
$(this).text(moreText)
})
});
精彩评论