"dynamic" resizing
Date: 01/15/07
(Javascript Community) Keywords: php, html, xml
i have a div that's populated ("ajax-ey") with search results.
more text and stuff here
blah blah
if few results are returned, i want the div to expand vertically to accomodate them, and push the "more text and stuff" down a little. which is how it works by default. however, if the div ends up with a ton of data in it, i'd like to shrink it down and allow the user to scroll through the results. i don't want to shove the "more text and stuff" 8,000,000 pixels down.
i tried this (the alerts are for trouble shooting):
function search(search_val) {
xml_http = ajax();
if (xml_http) {
document.getElementById('search_results').style.display = "block";
url = encodeURI("./search.php?search="+search_val);
xml_http.open("GET",url,true);
xml_http.onreadystatechange=function() {
if (xml_http.readyState!=4) {
document.getElementById('search_results').innerHTML="Searching...";
}
else if (xml_http.readyState==4) {
document.getElementById('search_results').innerHTML=xml_http.responseText;
}
}
xml_http.send(null);
resize_element('search_results',300);
}
}
function resize_element(elem,size) {
alert("checking...");
if (document.getElementById(elem).clientHeight > size) {
alert("resizing");
document.getElementById(elem).style.height = size;
}
}
no matter where i call the resize_element function, it keeps firing before the search_results element is fully populated, and oftentimes doesn't resize the thing at all. so, is there a better way to implement this? is there a way to say, "ok, the client has displayed all of the data, now check the size... ?
Source: http://community.livejournal.com/javascript/124459.html