Develop Reference

DIV with CSS resize attribute detectable in Java Script

A DIV can be resize using CSS like this
resize: both;
overflow: auto;
So, when you mouse over the DIV , you will get the resize cursor on the lower right corner.
I tried to detect the cursor change to "resize" in Java Script with no luck so far. I tried to log the cursor style with this code on a "click event" when the cursor change to "resize" like this:
console.log(document.body.style.cursor);
console.log(e.target.style.cursor);
The log result id always a " " (empty) instead of a "resize" value.
Thanks in advance for your help.

Yes, I checked, string is empty for e.target.style.cursor. So I propose to solve the issue with a hack. We know, that an area where cursor changes is about 18×18 pixels, so we should detect cursor at this zone.
const textarea = document.querySelector('textarea');
const deltaX = 18;
const deltaY = 18;
const detectionOfCursorInLowerRightCorner = (e) => {
const rect = e.target.getBoundingClientRect();
const x = e.clientX; // Position X of cursor relative to the document.
const y = e.clientY; // Position Y of cursor relative to the document.
// Calculate lower and high edges of the area where cursor changes.
const lowEdgeX = rect.width - deltaX;
const highEdgeX = rect.width;
const lowEdgeY = rect.height - deltaY;
const highEdgeY = rect.height;
const elementCursorX = x - rect.x; // Position X of cursor relative to the element.
const elementCursorY = y - rect.y; // Position Y of cursor relative to the element.
console.log(' ');
console.log(elementCursorX, elementCursorY);
if (elementCursorX > lowEdgeX && elementCursorX <= highEdgeX && elementCursorY > lowEdgeY && elementCursorY <= highEdgeY) {
console.log('here'); // Cursor is in the area.
}
};
textarea.addEventListener('mousemove', detectionOfCursorInLowerRightCorner);
Do not forget do textarea.removeEventListener('mousemove', detectionOfCursorInLowerRightCorner) on element destroy. And define your own CSS class to detect when textarea has properties resize: both; and overflow: auto;.

Thanks for your answer. Indeed, I did something approximative (I skipped the Y axis logic) similar to your solution. On mousemove in the DIV, I consider that resize will occurs if my mouse X position is between the offetWidth-15px and offsetx. If not, I can drag my DIV.
I considered also the resize observer feature, but it was getting too complicated for multiple DIV elements.
The idea is to be add drag/resize events to my DIV elements for editing purpose over a canvas using absolute positioning.
Congratulation for your concise and well formatted answer and the time spent you spent on it.

How to make a draggable element stay at the new position when dropped (HTML5 not jQuery)?

I have just learned the basics of HTML5 draggable and droppable API. I do not know how to retain the dragged position at its dropped position. On dropping it changes its position.
Here is the basic HTML (relevant elements only):
onDragStart = function(ev) {
//...
}
drop_handler = function(ev) {
ev.preventDefault();
ev.target.appendChild(document.getElementById("id1"));
}
dragover_handler = function(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
}
<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>
<div id="id2" style="position:absolute;left:100px;top:200px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>
I want the dragged element to remain at its final position where it it is dropped. Any pointers will be appreciated.

As mentioned in my comment, <div id="id1" ...> still has the default positioning which is static. Once you append it to the dropDiv, it assumes normal document flow behavior. Because it's a block element, it goes underneath the text that is already there and fills the width of the block.
If you want it to stay exactly where it is when you drop it, you need to give it position: absolute and take into account how the mouse moved while dragging it on the screen. In the dragStart event, we capture the original coordinates of the dragDiv and account for where the mouse was inside relative to the top-left corner. When we drop the dragDiv into the dropDiv, we set the absolute positioning and account for how much the mouse moved during the drag.
Since dragDiv is now a child of dropDiv, we need our new top and left values to be relative to dropDiv's coordinates rather than the entire screen, so we subtract out dropDiv's top and left values. Note well that some of these methods may not take into account the borders around the elements which may make it look like it's a pixel or two off -- to fix that you can either subtract a one or two pixels in the calculation or give them box-sizing: border-box.
let offsetX;
let offsetY;
onDragStart = function(ev) {
const rect = ev.target.getBoundingClientRect();
offsetX = ev.clientX - rect.x;
offsetY = ev.clientY - rect.y;
};
drop_handler = function(ev) {
ev.preventDefault();
const left = parseInt(id2.style.left);
const top = parseInt(id2.style.top);
id1.style.position = 'absolute';
id1.style.left = ev.clientX - left - offsetX + 'px';
id1.style.top = ev.clientY - top - offsetY + 'px';
id2.appendChild(document.getElementById("id1"));
};
dragover_handler = function(ev) {
ev.preventDefault();
ev.dataTransfer.dropEffect = "move";
};
<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>
<div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>

Canvas with mousemove blocking links in div underneath

I'm having problems with using the canvas/mousemove. I want to be able to draw on the entire page whenever the mouse moves with a mousemove draw/paint tool but also still click text links that appear in various other divs. The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
What do I need to add or change to make this work? I basically just want to have a functioning webpage with a mouseover effect that will draw over the page whenever it moves.
Below is the script I'm using. And here's an example http://jsfiddle.net/zAF4d/1/
$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
theCanvas.width = window.innerWidth;
theCanvas.height = window.innerHeight;
var canvasOffset = $('#paint').offset();
$('#paint').mousemove(function(e) {
if (letsdraw === true) {
ctx.lineTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
ctx.stroke();
}
});
$('#paint').mousemove(function(e) {
$('.v').css('left', e.clientX + 'px');
$('.h').css('top', e.clientY + 'px');
letsdraw = true;
ctx.strokeStyle = 'blue';
ctx.lineWidth = 0.5;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(e.pageX - canvasOffset.left, e.pageY - canvasOffset.top);
});
$(window).mouseout(function(e) {
// bind to the window mouse up, that way if you mouse up and you're not over
// the canvas you'll still get the release of the drawing.
letsdraw = true;
});
});

You say:
The issue I have is that the canvas which is currently fixed, has a transparent background color and is set to 100% width and height blocks the div underneath with a lower z-index, meaning the links can't be clicked. Using pointer-events:none on the canvas isn't the solution as it disables the mousemove effect. If I make the canvas z-index lower than the div's with the links I want to click, the drawing will just appear outside of the div.
I think you need to either do everything on canvas or use DOM and some sort of CSS tricks/animations.

$(function() {
var letsdraw = false;
var theCanvas = document.getElementById('paint');
var ctx = theCanvas.getContext('2d');
.
.
.
//if your div's are not same every time, determine similar prop so u can pull it here on to a canvas...by'ID' || 'Class' ...etc.
var div = document.getElementByID('div01');
dix.x;
div.y;
div.h;
.
.
.
**etc. or if u cannot for any reason pull actual div, just pass on it parameters here....
then u can use them here...*
like making collision model for drawing line over the top of it...
if (mouse.x > div.x && mouse.x < div.x + div.width && mouse.y > div.y && mouse.y < div.height) {
letsdraw = false;
}
....**within draw function
**'onclick' event listener try **
$(div)onclick function();
if whole div was pulled here then it will open links...but even if u pulled just div's parameters u just pass click coordinates on to div if link coordinates match
$(div)onclick function(){
load.page(url: <link>your link</>
}
sorry if mistaken something, didn't run it all together
But give it a go hope it helps;

Determine whether mouse is always on the bottom of the page

How can I determine whether mouse is always on the bottom of the viewport? Let us assume that by bottom we mean the bottom 100 pixels of a given page (on a long scrolling page).
this is an example, check the arrow
http://discover.store.sony.com/tablet/#design/weight-distribution

Easy!
Calculate how much of that "bottom" area is showing in the current window with window.screen.height and document.height.
Then use onmousemove event to calculate if the mouse is stepping over that area.

Create a blank div with the dimensions that you want, use CSS to position:absolute; it on the bottom and z-index it above the other elements, then create a onHover to detect if the mouse is there
EDIT
This might work as a solution to avoid using CSS method above (untested)
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var yMouse = e.pageY;
if(yMouse > (wHeight - 100)) {
// Do something
}
});
});

I think i solved myself based on Pastor Bones code:
you have to calculate the window scrolltop
var scrollT = $(window).scrollTop() + wHeight;
so:
$(function(){
$.mousemove(function(e){
var wHeight = $(window).height();
var scrollT = $(window).scrollTop() + wHeight;
var yMouse = e.pageY;
if(yMouse > (scrollT - 100)) {
// Do something
}
});
});

How do I flick a DIV and have it move in the right direction?

If I have a div that is a 5x5 square or something. I want to be able to click on it, then while holding down the mouse, move it in a direction, and upon release of the mouse, have the div fly towards the direction i "flicked". How can I accomplish this with jquery or javascript? Not sure if an algorithm or logic is behind this.

From a conceptual perspective (I'll be beaten with actual code no doubt shortly) I would register the mouse coordinates on MouseDown, and compare them against the mouse coordinates on MouseUp to determine the angle at which to move the div (this would allow the DIV to continue moving in the correct direction, even when the MouseUp was close to the DIV).
The easier way would be to just move the square towards the MouseUp coordinates (i.e. mouse down coordinates don't really matter in a small DIV), but this doesn't work as well if the MouseUp is very close to the MouseDown.
Either way, use something like this answer (How to make a div or object gradually move to point of mouseclick with javascript?), except on MouseUp/MouseRelease instead of click, ideally towards a projected point (along the line between MouseDown and MouseUp at a specified distance).
Edit
I've included a Prototype example below (it's very rushed and could use plenty of optimisations + clearer concept on the differences between Page/Graph y-axis, as well as some better handling of steep slopes, as well as calculating distance to fling based on distance between mousedown/mouseup as fauxtrot mentions in comments, as well as perhaps disabling fling after the first fling as you can keep "flinging it around" at the moment, as well as "out of bounds" checks and perhaps reverse bouncing off the edges).
Running Example: http://jsfiddle.net/9B9sA/
HTML
<div id="bluebox"
style="width:100px;
height:100px;
background-color:blue;
position:absolute;
left:300px;
top:300px;"> </div>
jQuery (including jQuery UI for animate)
var startDownX, startDownY;
$(document).ready(function() {
/* Stop default Firefox etc. drag */
$(document).bind("dragstart", function() {
return false;
});
/* Capture start of flings */
$('#bluebox').mousedown(function (event) {
startDownX = event.pageX;
startDownY = event.pageY;
});
/* Work out fling direction on end of fling */
$(document).mouseup(function(event){
/* Page y-axis is different from graph */
var rise = -(event.pageY - startDownY);
var run = event.pageX - startDownX;
var newX = $('#bluebox').position().left;
var newY = $('#bluebox').position().top;
var distanceToFling = 100;
if (run == 0 || Math.abs(rise/run) > 3) {
if (rise > 0) {
newY -= distanceToFling;
} else if (rise < 0) {
newY += distanceToFling;
}
}
else {
if (run > 0) {
newX += distanceToFling;
newY -= (rise/run) * distanceToFling;
}
else {
newX -= distanceToFling;
newY += (rise/run) * distanceToFling;
}
}
$('#bluebox').animate({
left: newX,
top: newY
}, 1000);
}); });

Jquery is your friend, here is a good plugin, check it out