Jquery popup expand vertically to fit content? WordPress

• SOLVED

Hi All,

So far, I have had wonderful luck with questions on this site, so I am hoping that this yields the same results. I have a website that displays a truncated version of an artist statement in the left sidebar. When the user clicks the "more" link, the full statement appears in a popup window that centers in the middle of the screen. Trouble is, the window does not expand vertically to accomodate the content and instead displays a vertical scrollbar. An example of the popup in action can be found here:

http://mcnairevans.com/projects/in-search-of-great-men/

and the javascript


(function($){
$.fn.jTruncate = function(options) {

var defaults = {
length: 240,
minTrail: 20,
moreText: "more",
lessText: "less",
ellipsisText: "...",
moreAni: "",
lessAni: ""
};

var options = $.extend(defaults, options);

return this.each(function() {
obj = $(this);
var body = obj.html();

if(body.length > options.length + options.minTrail) {
var splitLocation = body.indexOf(' ', options.length);
if(splitLocation != -1) {
// truncate tip
var splitLocation = body.indexOf(' ', options.length);
var str1 = body.substring(0, splitLocation);
var str2 = body.substring(splitLocation, body.length - 1);
obj.html(str1 + '<span class="truncate_ellipsis">' + options.ellipsisText +
'</span>' + '<span class="truncate_more">' + str2 + '</span>');
obj.find('.truncate_more').css("display", "none");

// insert more link
obj.append(
'<div class="clearboth">' +
//'<a href="javascript:;" rel="postid" class="postpopup modal">' + options.moreText + '</a>' +
'<a href="#TB_inline?height=400&amp;width=50%&amp;inlineId=statement-full" title="Statement" class="thickbox">' + options.moreText + '</a>' +

'</div>'
);

// set onclick event for more/less link
var moreLink = $('.truncate_more_link', obj);
var moreContent = $('.truncate_more', obj);
var ellipsis = $('.truncate_ellipsis', obj);
moreLink.click(function() {
if(moreLink.text() == options.moreText) {
moreContent.show(options.moreAni);
moreLink.text(options.lessText);
ellipsis.css("display", "none");
} else {
moreContent.hide(options.lessAni);
moreLink.text(options.moreText);
ellipsis.css("display", "inline");
}
return false;
});
}
} // end if

});
};
})(jQuery);



thanks in advance

Answers (2)

2012-10-17

jazbek answers:

Try adding this to your stylesheet:

#TB_ajaxContent {
height: auto !important;
}

---

Adam comments:

worked perfectly, thanks! I knew it was a (height: auto) thing, I just kept applying the style to the wrong div's and, thus, no results. Thanks again: lingering issue, gone!

2012-10-17

Martin Pham answers:

please insert this into style.css

body #TB_ajaxContent {overflow: initial;}