I'm drawing a div on the document, but it only works when width and height are positives:

var div;

function onMouseMove (e) {
    div.height(parseInt(e.pageY) - parseInt(div.css("top")) );
    div.width( parseInt(e.pageX) - parseInt(div.css("left")));
    console.log(div.width());
    console.log(div.height());
};

$(document).on("mousedown", function(e){
    div = $("<div></div>").prependTo("body");
    div.css({
        "top": e.pageY,
        "left": e.pageX
    });
    $(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function(){
    setTimeout(function(){
        div.remove();
    }, 1000);
    $(this).off("mousemove", onMouseMove);
});

fiddle here

How can I do it work when the width and height bees negative?

Thanks in advance.

I'm drawing a div on the document, but it only works when width and height are positives:

var div;

function onMouseMove (e) {
    div.height(parseInt(e.pageY) - parseInt(div.css("top")) );
    div.width( parseInt(e.pageX) - parseInt(div.css("left")));
    console.log(div.width());
    console.log(div.height());
};

$(document).on("mousedown", function(e){
    div = $("<div></div>").prependTo("body");
    div.css({
        "top": e.pageY,
        "left": e.pageX
    });
    $(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function(){
    setTimeout(function(){
        div.remove();
    }, 1000);
    $(this).off("mousemove", onMouseMove);
});

fiddle here

How can I do it work when the width and height bees negative?

Thanks in advance.

• javascript
• jquery
• html

Share Improve this question Follow asked Jun 22, 2015 at 14:47 user4227915user4227915 5

• What do you want it to do when the dimensions are negative? – Pointy Commented Jun 22, 2015 at 14:48
• @Pointy I want to be able to continue drawing the div – user4227915 Commented Jun 22, 2015 at 14:50
• Right, but what do you expect it to look like? If the puted width is -10 pixels, what do you want to see on the screen? (What would you do if you were drawing the elements by hand on graph paper?) – Pointy Commented Jun 22, 2015 at 14:55
• 1 That's not very hard, just save the origin and fake the negative width by moving the whole div: jsfiddle/yxdcg6f8 – blex Commented Jun 22, 2015 at 15:15
• Good! However I have to agree with @Pointy, the width is never "negative", as it's always 0 or more. The only difference from "positive" width/height is that instead of just resizing the div, you actually move the whole thing while resizing it, so that the origin stays in place. – blex Commented Jun 22, 2015 at 16:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

You need to add Math.abs and do something like this:

var div;
var startX = 0 / 1;
var startY = 0 / 1;

function onMouseMove(e) {
  div.height(Math.abs(parseInt(e.pageY)-parseInt(div.css("top"))));
  div.width(Math.abs(parseInt(e.pageX) - parseInt(div.css("left"))));


  if (parseInt(e.pageY) < startY) {
    div.css({
        "top": e.pageY
    });
   div.height(Math.abs(parseInt(e.pageY)-startY));
  }
 if (parseInt(e.pageX) < startX) {
    div.css({
        "left": e.pageX
    });
        div.width(Math.abs(parseInt(e.pageX) - startX));
}

  console.log(div.width());
  console.log(div.height());
  console.log(e.pageX + '<--x y--> ' + e.pageY)
};

$(document).on("mousedown", function (e) {
div = $("<div></div>").prependTo("body");
startX = parseInt(e.pageX);
startY = parseInt(e.pageY);
div.css({
    "top": e.pageY,
        "left": e.pageX
});
$(this).on("mousemove", onMouseMove);
});

$(document).on("mouseup", function () {
setTimeout(function () {
    div.remove();
}, 1000);
$(this).off("mousemove", onMouseMove);
});

fiddle example

Negative height and width are not accepted values by CSS/HTML standards. Most web browsers will ignore the value pletely if it's less than 0. It doesn't really make sense to have a negative height/width.

If you're trying to "inverse" a div or translate it up, I would remend using the CSS3 transform property, or maybe even negative margins (though these are discouraged).

You can specify things like:

transform: translateY(-50px);

or

transform: rotateY(30deg);

or

margin: -50px 0 0 0; /* this acts the same as the first transform */

To move things around on your page after size and location have been calculated. So, for example, to "inverse" the div upwards, you can rotate the div around its x-axis, causing the entire div to look flipped.

Note that while this will work on its own, if you want a more 3D look to these transformations, you need to have a wrapping div that has the viewport: [amount]px; property.

Hopefully this helps!