CODEWITHSUNDEEP
javascriptajaxstyles
Ankur
Ankur

Reputation: 51100

How to dynamically change the height of a div

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>

Upvotes: 1

Views: 3403

Answers (3)

mwilcox
mwilcox

Reputation: 4132

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.

Upvotes: 1

Sam Salisbury
Sam Salisbury

Reputation: 1106

Or even neater:

$('priceBar').setStyle({height: request.responseText+"px"});

Upvotes: 0

John Fisher
John Fisher

Reputation: 22719

Try this instead:

var priceBarElement = $("#priceBar")[0];
priceBarElement.style.height = request.responseText+"px";

Upvotes: 1

Related Questions