Question

ok ,i dynamically increase the width of an empty div with css property of opacity 0.5,
when the mouse is dragged to the right side.i also want to increase the width of the same div element when it is dragged to the left side(i.e) the width reaches below zero,i can absolute the value of width but i want the ui to be increasing in the same direction as well? Any ideas would be appreciated ,thanks in advance!

 #thing {
 position: absolute;
 border: 2px dashed #000;
 background-color: #fff;
 opacity: .2;
 z-index: 999999;
}    

–

var t = document.getElementById("thing");
//this is performed on mouse drag
t.style.width  = Math.abs(x - oldX) + "px"
t.style.height = Math.abs(y - oldY) + "px"

//also the html part
<div id="thing"></div>

when x value is less than oldx value that is the mouse drag is performed to the left side ,i want the ui change(change in width and height) to be reflected to the left side.

Answer 1

Here’s a working, commented solution you can learn from, for the x-axis only, tested in Firefox but probably cross-browser.

http://jsfiddle.net/steve/QV6PV/

To answer your question directly, you need to move the left side and increase width simultaneously (indicated in the code).

You can put in some conditional statements to deal with problems of min/max width. Also an event handler to fire this on a click will probably be required.