Development Web

Recently, I had the problem of creating a message inbox ajax-style, but have to add an expand/retract option if the message was too long to fit in the standard message.  Secondly, I did’nt want a shorter message in a giant box (ie a 1 line message, in a box that could accomodate 3 lines, leaving lots of redundant white space).

My solution was to create the div with a set height of 3 lines (which was 62 pixels in my case), with 3 lines being the predetermined maximum size for the unexpanded message box.  Once it was created with overflow hidden, I compared the scrollHeight of the div, to its offsetHeight.  If the scrollHeight was bigger, it would append a div with “expand” as the inner html, and an onclick event to expand it, and set the height of the messagebox to 62 pixels.  If the scrollHeight WASN’T bigger, I changed the height of the messages to blank (”"), and gave it a low minHeight.

In this way, messages less than 3 lines didn’t waste a bigger box than they needed.

No related posts.