Databases
StackOverflow2013
Postsdbo
POHow to dynamically change the height of a div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to dynamically change the height of a div
    text
    copied!<p>How do I dynamically change the height of a div.</p> <p>Why does this not work:</p> <pre><code> var priceBarElement = $("priceBar"); priceBarElement.style.height = request.responseText+"px"; </code></pre> <p>Which I hope to use to change the priceBar div which is given by this line further down.</p> <pre><code> &lt;div id="priceBar" style="width:28px;margin-top:20px;background:#F00"&gt;&lt;/div&gt; </code></pre> <p>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.</p> <p>I am using Comets to send the "heights" hence there is no explicit action which requests a new "height".</p> <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;%@page import="com.astheymove.util.ApplicationPathUtils"%&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt; &lt;title&gt;Comet Weather&lt;/title&gt; &lt;script src="javascript/prototype.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="javascript/scriptaculous.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; function go(){ var url = '&lt;%= ApplicationPathUtils.getApplicationPath(pageContext) + "/prices" %&gt;'; 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); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Rapid Fire Weather&lt;/h1&gt; &lt;input type="button" onclick="go()" value="Go!"&gt;&lt;/input&gt; &lt;div id="forecasts" style="padding:10px; border:1px solid #ccc; background:#ffffff;"&gt; Weather forecasts! &lt;/div&gt; &lt;div id="pricesPanel" style="height:100px;"&gt; &lt;div id="priceBar" style="width:28px;margin-top:20px;background:#F00"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload