jQuery: Expand element to fit content

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

Most Liked Posts
  1. ppc_michael, May 30, 2010

    ppc_michael Guest

    ppc_michael

    Joined:
    Apr 26, 2005
    Location:
    Los Angeles, CA
    #1
    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?
     
    share
    + Quote Reply
  2. angelwatt, May 30, 2010

    angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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
    + Quote Reply
(You must log in or sign up to post here.)

Share This Page