0

Hi.

I have a div which contains dynamic content populated with AJAX (user has two select boxes to filter query results)

However when filtered results extend past the initial height of the div in question, the div remains the same size and the results overflow out of my content area.

I tried jquery:

<script type="text/javascript">
$("#limit").animate({
     height:$("#resultsdiv").height()
},600);
</script>

I added a surrounding div with id of "limit" around the div that needs to grow and shrink ("resultsdiv"), but this didn't work; it ended up cutting off search results instead of growing the div (I also added position: relative; and overflow: hidden to my stylesheet, as suggested on the jquery website).

The animation is not important, this would work fine with .css({...}), but I thought it would be cool.

At any rate, if this is supposed to work, my first question is: WHERE do I put this script? I've placed it outside of the query and outside of both divs (no luck). I've put it IN the div/query loop, but no go. I've even (just for kicks) put it in my ajax query file, but nothing.

Any help would be appreciated, or if there's a better way than with jquery...that's great too.

2
Contributors
1
Reply
2
Views
6 Years
Discussion Span
Last Post by Pnorq
0

If I understand you, the div is populated by an AJAX call and you want the size of the div to respond to the size of the text response (from AJAX).

If this is correct, you would want to place the code that changes the div sizing in the AJAX "success" callback function (or call your sizing code from the AJAX callback function via a function call).

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.