how to increase and decrease the size of div using javascript and html
<p>I want to resize the position of the div using javascript function.
I was tried to solve that but this is not properly work. In thet div only dragged right side. i want to whener user drag cursor on div2 then change the style of the cursor and whenever user press the mouse left key and drag  the left side then size of the div1 should be decresed
and drag on right then side should be increse.
My code is here.</p>


            
        

<pre><code>    &lt;div onmousedown="dStarted(event);" onmousemove="dMoving(event,this);" onmouseup="dEnd(event,this);" style="float: left; height: 100%; border-right: solid 1px black; background-color:LightGrey" id="div1"&gt;
        &lt;a href="#" onclick="toggle();"&gt;
            &lt;img style="background-color:White;" id="imgToggle" /&gt;
        &lt;/a&gt;
    &lt;/div&gt;
    &lt;div style="float: left; height: 100%;" runat="server" id="div3"&gt;
        &lt;iframe frameborder="0" framespacing="0" id="frame2" runat="server" height="100%" width="100%" noresize="noresize" class="WZSplitterPanel"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
</code></pre>

<p></p>

<pre><code>        var dragged=false;
        function dStarted(event)
        {
            dragged =true;
        }


        function dMoving(event,ele)
        {
                ele.style.cursor = "e-resize";
                var div2 =document.getElementById("div2");
                div2.style.width = event.x;
                var frm1=document.getElementById("frame1");
                frm1.style.width=div2.style.width;
        }

        function dEnd(event, ele)
        {
            if(dragged)
            {
                ele.style.cursor = "default";
                dragged=false;
            }
            return;
        }
</code></pre>

<p>in that size only increse and cursor style not properly work. whener i move the cursor on div2 then cursor blink .</p>

<p>I have taken 3 div , In div2(id="div2") take one iframe id="frame1" and  in div1 id="div1" take one image and div3 id"div3" take one frame id="frame2".
i want to when drag the cursor right side then div2 and frame1 size should be decrese.</p>
