I've got a link which triggers a hidden div which is supposed to show in a fancybox. The content in each hidden div is of different heights. Right now, when the fancybox opens, the div content extends beyond the borders of the fancybox. It's not resizing for some reason.
Here is a sample of the html:
<div class="faqWrapper">
<a class="faqLink" href="#faqContent1132116">How Do I Join?</a>
<div id="faqContent1132116" class="faqBox">
<div class="fancybox_wrapper_content"><p>How Do I Join?</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum
sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis.
Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam
erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere
sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc
ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu
dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim,
accumsan eu, blandit sed, blandit a, eros.<br></p>
</div>
</div>
Here is the trigger code for the fancybox:
$("a.faqLink").fancybox({
type : 'inline',
autoScale : false,
autoDimensions : true
Any idea how to get the box to resize. I've tried the resize function but it breaks the code. I must be implementing wrong. Here's what I've tried.
$("a.faqLink").fancybox.resize();