Home/ Questions/Q 341241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T10:41:28+00:00

How do I dynamically change the height of a div. Why does this not

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are trying to set the height of the node before the DOM is ready. It’s sometimes tricky when dealing with an XHR, because you want to call that XHR right away, but sometimes the callback from it happens before the page is loaded. Initially, put the XHR function inside a window.onload function (or the Prototype DOM Ready equivalent). If that fixes the problem, you can try doing the XHR first and test if the DOM is ready or not – f it is, set it, if not, defer the function.

    • 0