width of div is not increasing

Question

Here is my code:

<script>
var change = function(){
    alert("sam");
    for(var i; i >=200; i++){
         var z = String(i);
        var x=  document.getElementById("div1");
       x.style.width = z;   
    } 

};
</script>
<style type="text/css">
    #div1{
        width:100px;
        height: 100px;
        background-color:#ccc;
    }
</style>
<div id="div1"></div>
<button onclick="change();"> click</button>

what actually this code does, it will increase the width. like in jquery we increase the width, as its width is sliding,.. i am trying to do like this width javascript.

and when i tested this out in google chrome, it dosen't showed any mistake or error, but the width of that div dosen't change and it should be noted that, it alerted sam!

please tell me my mistake...Thanks!

Answer 1

Everything is going to be a little more complex:

var change = function() {

    var div = document.getElementById("div1"),
        startWidth = div.offsetWidth;

    for (var i = 0; i <= 100; i++) {
        (function(i) {
            setTimeout(function() {
                div.style.width = startWidth + i + 'px';
            }, i * 10)
        })(i) // wrap setTimeout in a closure
    }
};

A couple notes.

1). You need to calculate an initial width. You can use offsetWidth property for that.

2). Make sure you don't reselect div element in the loop.

3). You need a closure and setTimeout for sliding effect. Closure is used to bind a setTimeout with a snapshot (current in a loop) value of the i variable.

4). In the loop i >= 200 should be i <= 200.

Demo: http://jsfiddle.net/z58p6/1/

Answer 2

From your question, I guess you want to perform smooth transition by increasing width.

If you can use CSS3, try the following code. Demo

<script>
var change = function(){
    alert("sam");
    var x=  document.getElementById("div1");
    x.style.width = "500px";
};
</script>
<style type="text/css">
    #div1{
        width:100px;
        height: 100px;
        background-color:#ccc;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }
</style>
<div id="div1"></div>
<button onclick="change();"> click</button>

Answer 3

There are quite a few errors.

<script>
var change = function(){
alert("sam");
for(var i=0; i <=200; i++){
     var z = i;


} 
        var x = document.getElementById("div1");
       x.style.width = z+'px'; 

};
</script>
<style type="text/css">
#div1{
    width:100px;
    height: 100px;
    background-color:#ccc;
}
</style>
<div id="div1"></div>
<button onclick="change();"> click</button>

http://jsfiddle.net/6WsCR/

BTW you do not need the loop and could just do this:

<script>
 var change = function(z){
        var x = document.getElementById("div1").style.width = z+'px';
};
</script>
    <button onclick="change(500);"> click</button>

EDIT: what you want is this

<script>
var changeAnimate = function(){
$('#div1').animate({
width: '200px',
  }, 5000, function() {
  });
    }
</script>
<style type="text/css">
#div1{
    width:100px;
    height: 100px;
    background-color:#ccc;
}
</style>
<div id="div1"></div>
<button onclick="changeAnimate();"> click</button>

http://jsfiddle.net/pfP37/

Answer 4

Try this,

  <script type="text/javascript">
    function resizeDiv(id,ud) {
       var Div=document.getElementById(id);
       var width=parseInt(Div.style.width)+ud;
       if (width>=1){
          Div.style.width = width + "em"; 
       }
    }
  </script>
  <div id="div_test" style="height: 1em; width: 1em; border:1px solid;">You div</div>
  <input type="button" value="increase" onclick="resizeDiv('div_test', 1);">
  <p></p> 
  <input type="button" value="decrease" onclick="resizeDiv('div_test', -1);">

Answer 5

You need to add "px" as follows

var z = String(i)+"px";

var change = function(){
    alert("sam");
    for(var i; i >=200; i++){
        var z = String(i);
        var x=  document.getElementById("div1");
        x.style.width = z + "px";   
    } 

};