Member Avatar for petrakid

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
  • 1K Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by Pnorq
Member Avatar for Pnorq

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).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.