Thursday, March 15, 2007

DHTML Auto Resizing List

I really had very tough time selecting a name for this post... Why? Because I am writing here about a very special type of dynamic lists.

This list increases/decreases the number of its rows to best fit the browser height. If the list has a small number of rows, they will all be visible within the browser view. But if you resized the browser until the list cannot fit anymore within the view, some rows from the list tail will disappear and a link of 3 dots (. . .) will appear in place of the last row to tell us that not all of the rows are shown.

Clicking on a row will fire a message box showing the content of that row, you may replace the javascript that shows the message box with any scripting you want. Also clicking the 3 dots indicator will fire another message box that you can replace with some script to show a new window with all the rows visible, or just disabling the resizing functionality.

The sample should work fine with IE7 and FireFox 2.0, let me know if you had any problems running it on your browser.

View it online
Download it:


Anonymous said...

nice work man :)

Saleh Samaneh said...

Hi Ahmad, Keefak ya man
Amazing as always :)

Ahmad Lafi said...

Thank you Saleh! It's good to hear from you.