How do I dynamically change the height of a div.
Why does this not work:
var priceBarElement = $("priceBar");
priceBarElement.style.height = request.responseText+"px";
Which I hope to use to change the priceBar div which is given by this line further down.
<div id="priceBar" style="width:28px;margin-top:20px;background:#F00"></div>
I am getting a correct value for the height being sent to the page, which I can see since I print it out. However I can't seem to use the value to change the height of the priceBar div.
I am using Comets to send the "heights" hence there is no explicit action which requests a new "height".
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@page import="com.astheymove.util.ApplicationPathUtils"%><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Comet Weather</title>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>
<script type="text/javascript">
function go(){
var url = '<%= ApplicationPathUtils.getApplicationPath(pageContext) + "/prices" %>';
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.setRequestHeader("Content-Type","application/x-javascript;");
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200){
if (request.responseText) {
var forecastsElement = $("forecasts");
forecastsElement.innerHTML = request.responseText;
var priceBarElement = $("priceBar");
priceBarElement.style.height = request.responseText+"px";
// highlight it
//new Effect.Highlight(forecastsElement, { startcolor: '#C0C0C0',
// endcolor: '#ffffff' });
}
}
// not to highlight too often
//setTimeout("go();",1000);
go();
}
};
request.send(null);
}
</script>
</head>
<body>
<h1>Rapid Fire Weather</h1>
<input type="button" onclick="go()" value="Go!"></input>
<div id="forecasts" style="padding:10px; border:1px solid #ccc; background:#ffffff;">
Weather forecasts!
</div>
<div id="pricesPanel" style="height:100px;">
<div id="priceBar" style="width:28px;margin-top:20px;background:#F00"></div>
</div>
</body>
</html>