jQuery: Expand element to fit content

Discussion in 'Web Design and Development' started by ppc_michael, May 30, 2010.

  1. ppc_michael Guest


    Apr 26, 2005
    Los Angeles, CA
    I'm building an ajax-y search form. As the user types, the results are displayed (Google Suggestions-ish). That part is working properly, so now I'm adding little animations with jQuery. This is where my question comes in:

    I would like to animate the <div> containing the search results to vertically expand to accomodate the incoming results, then fade in the results.

    So, is there a way to calculate the vertical height of the search results list (a <ul>) before displaying it, so that I know what height to animate the <div> to before the <ul> fades in?
  2. angelwatt Moderator emeritus


    Aug 16, 2005
    A partial thought on this. You can use the CSS property "visibility" or "opacity' to have the content there, but not visible, then fade in. The elements will still take up their same space in the layout, just not viewable.

    Then with jQuery you can use the height() function on it.

Share This Page