We Keep Coding

Unable to resize Rect with mouse events

I am trying to resize the rectangle inside the SVG by using mouse events. Currently, I am working on the right bottom edge, for that, I created another circle shape and I am applying events on that shape to resize the rectangle. I don't know why when I start resizing it first it gets small and then starts resizing.
const min = 54;
let initialWidth = 0, initialHeight = 0, mouseX = 0, mouseY = 0;
rightBottomCorner.addEventListener('mousedown', function(evt: any) {
getMousePositions(evt);
getElementDimensions();
evt.stopPropagation();
window.addEventListener('mousemove', scale);
window.addEventListener('mouseup', removeScale);
});
function getMousePositions(evt: any) {
mouseX = evt.pageX;
mouseY = evt.pageY;
}
function getElementDimensions() {
selectedRect = rect;
initialWidth = selectedRect.clientWidth;
initialHeight = selectedRect.clientHeight;
}
function scale(evt: any) {
selectedRect = rect;
const width = initialWidth + (evt.pageX - mouseX);
const height = initialHeight + (evt.pageY - mouseY);
if (width > min) {
selectedRect.setAttributeNS(null, 'width', width as unknown as string);
}
if (height > min) {
selectedRect.setAttributeNS(null, 'height', height as unknown as string);
}
}
function removeScale() {
window.removeEventListener('mousemove', scale);
}

You are passing the functions to addEventlistener before they are defined.You have to move the rightBottomCorner.addEventListener function below your removeScale function. Then the resizing works.

Need to set the minimum width for Click & drag column headers

I need to set the maximum width for the table header while click and drag.
I had tried the max-width and width in the css.
th {
position: relative;
max-width: 5px;
}
But no use on that. Here is the link for my code:
https://codepen.io/jasongardner/pen/QNOXym
I need to fix the width for drag the table for certain distance.

I have fixed your problem. Change your Javascript to this:
$(function() {
var startX,
startWidth,
$handle,
$table,
pressed = false;
$(document).on({
mousemove: function(event) {
if (pressed) {
var newWidth = startWidth + (event.pageX - startX);
if (newWidth > 300) {
$handle.width(300);
} else {
$handle.width(startWidth + (event.pageX - startX));
}
}
},
mouseup: function() {
if (pressed) {
$table.removeClass('resizing');
pressed = false;
}
}
}).on('mousedown', '.table-resizable th', function(event) {
$handle = $(this);
pressed = true;
startX = event.pageX;
startWidth = $handle.width();
$table = $handle.closest('.table-resizable').addClass('resizing');
}).on('dblclick', '.table-resizable thead', function() {
// Reset column sizes on double click
$(this).find('th[style]').css('width', '');
});
});
This is the code I changed:
if (pressed) {
var newWidth = startWidth + (event.pageX - startX);
if (newWidth > 300) {
$handle.width(300);
} else {
$handle.width(startWidth + (event.pageX - startX));
}
}
I created the variable "newWidth" and check if it's bigger than 300. Only when it's smaller, it sets the new width. So actually you can just replace the 300 with any number you want to define as the max-width.
Hope this helps

Moving a div when mouse near

I want that the div I created will move when the mouse is getting near to him.
Here is the fiddle link: http://jsfiddle.net/jLAq3/2/
Basic starting code (because I don't have a clue how to do it):
$('#leaf').();

Bind a function to the movement of the mouse. As the mouse moves:
Get the coordinates of the element.
Get the coordinates of the cursor.
Compare cursor coordinates with element coordinates.
If cursor is near element, move element - else do nothing.
Easy stuff.

This is a start. Every time the mouse is moving outside the leaf then a message appears.
$('body').mousemove(function(e){
var w = $('#leaf').outerWidth(),
h = $('#leaf').outerHeight(),
x = e.pageX,
y = e.pageY;
if(x > w && y > h)
{
console.log("The leaf is moving");
}
})
Furthermore you can apply some css with js to the leaf for movement etc. In a more complex example you have to spot more carefully the position and not simply rely on the width and the height of the image.

Here is a start.
http://jsfiddle.net/Lpg8x/80/
$( 'body' ).mousemove( function( event ) {
if( isNear( $( '#near' ), 20, event ) ) {
$( '#near' ).html( 'is near!' );
} else {
$( '#near' ).empty();
};
} );
function isNear( $element, distance, event ) {
var left = $element.offset().left - distance,
top = $element.offset().top - distance,
right = left + $element.width() + ( 2 * distance ),
bottom = top + $element.height() + ( 2 * distance ),
x = event.pageX,
y = event.pageY;
return ( x > left && x < right && y > top && y < bottom );
};
Have fun!

Here is a basic working example of how you actually would do all that
http://jsfiddle.net/jLAq3/10/
var leafX = 0, leafY = 0;
$('#leaf').css({position: 'relative'});
$(document).mousemove(function(e){
var offset = $('#leaf').offset()
,x1 = offset.left - 20
,x2 = offset.left + $('#leaf').width() + 20
,y1 = offset.top
,y2 = offset.top + $('#leaf').height() + 20
,center, mousePos
;
if(e.pageX > x1 && e.pageX < x2 && e.pageY > y1 && e.pageY < y2) {
center = (x2 - x1) / 2;
mousePos = e.pageX - x1;
if(mousePos < center) {
leafX += 20;
} else {
leafX -= 20;
}
center = (y2 - y1) / 2;
mousePos = e.pageY - y1;
if(mousePos < center) {
leafY += 20;
} else {
leafY -= 20;
}
}
$('#leaf').css({ top : leafY + 'px', left : leafX + 'px'});
});
But you should really learn the basics of DHTML before jumping into things, for example the difference between position absolute and relative, how to actually move HTML elements, layering, event binding etc.
Here are couple of good resources:
http://www.quirksmode.org/sitemap.html
http://www.w3schools.com/

Getting mouse coordinates relative to jQuery dialog window and not viewport?

I have the following bit of code which is responsible for displaying a tooltip. I am unhappy with this code for two reasons:
I use pageXOffset and pageYOffset 'magic numbers' to correct the visual state per-browser.
The dialog window must remain stationary for the numbers to be correct.
I have tried binding to the dialog window's mousemove event instead of the document. The results were identical to my current implementation which binds to document's mousemove.
var shouldDisplay = false;
$(document).mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
//msie e.page event should be standardizes, but seems to go awry when working inside of a modal window.
var pageYOffset = $.browser.msie ? 260 : 572; //-314
var pageXOffset = $.browser.msie ? 474 : 160; //+314
$('#CustomTooltip').css('top', e.pageY - pageYOffset + 'px');
var offsetLeft = e.pageX - pageXOffset;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - offsetLeft < 0;
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css('left', offsetLeft + 'px');
}
}
// Initialize the Historical Chart dialog.
$('#HistoricalChartDialog').dialog({
autoOpen: false,
buttons: {
'Close': function() {
$(this).dialog('close');
}
},
hide: 'fold',
modal: true,
draggable: false,
resizable: false,
position: 'center',
title: 'Historical Charts',
width: 700,
height: 475
});
I provide the jQuery dialog initializer just for the sake of it. The tooltip only displays inside of this dialog window -- but the coordinates are for the entire page. Is it possible to retrieve coordinates relative to the dialog window so that I can leverage the fact that jQuery's mousemove standardizes coordinates with the pageX and pageY properties?
EDIT solution:
//Seperate file because the offsets are different for the image under MVC.
var shouldDisplay = false;
$("#HistoricalChartDialog").mousemove(AdjustToolTipPosition);
function DisplayTooltip(tooltip_text) {
shouldDisplay = (tooltip_text != "") ? true : false;
if (shouldDisplay) {
$('#CustomTooltip').html(tooltip_text);
$('#CustomTooltip').show();
}
else {
//Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
$('#CustomTooltip').hide();
}
}
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).closest('.ui-dialog').offset().left + 15;
var widthDifference = $(this).width() - $("#CustomTooltip").width();
//Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
xPos = (widthDifference - xPos < 0) ? widthDifference : xPos;
$('#CustomTooltip').css('left', xPos + 'px');
var yPos = e.pageY - $(this).closest('.ui-dialog').offset().top - 10;
$('#CustomTooltip').css('top', yPos + 'px');
}
}

To get the position of the mouse relative to a specific div, not the viewport, you take the eventX/Y and subtract the left/top position of the div:
$("#example").mousemove(function(e) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
$("#pos").text("x: " + xPos + " / y: " + yPos);
});
Example fiddle
Given your example, this should work. You may need to look at your isOutsideViewport logic though.
function AdjustToolTipPosition(e) {
if (shouldDisplay) {
var xPos = e.pageX - $(this).position().left;
var yPos = e.pageY - $(this).position().top;
var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - xPos < 0;
if (isOutsideViewport) {
offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
}
$('#CustomTooltip').css({
'top': yPos + 'px',
'left': xPos + 'px'
});
}
}

jQuery drag and draw

I'm trying to build a jQuery plugin that allows you to drag and draw a rectangle (or a div with a border) but I'm not sure how to do it. I don't know of any that currently have this ability so I don't know where to look for an example of how to do this.
How can I implement drag and draw in jQuery?

The basics for something like this are quite simple, when you think about it:
Listen for mousedown events on some container (possible the entire document);
Place an absolutely positioned element at the position of the mouse, using the mouse coordinates from the event object (e.pageX and e.pageY);
Start listening to mousemove events to change the width and height object (based on the mouse coordinates);
Listen for the mouseup event to detach the mousemove event listener.
The aforementioned absolute placed element is, e.g., a <div> with a border and background: transparent.
Update: here is an example:
$(function() {
var $container = $('#container');
var $selection = $('<div>').addClass('selection-box');
$container.on('mousedown', function(e) {
var click_y = e.pageY;
var click_x = e.pageX;
$selection.css({
'top': click_y,
'left': click_x,
'width': 0,
'height': 0
});
$selection.appendTo($container);
$container.on('mousemove', function(e) {
var move_x = e.pageX,
move_y = e.pageY,
width = Math.abs(move_x - click_x),
height = Math.abs(move_y - click_y),
new_x, new_y;
new_x = (move_x < click_x) ? (click_x - width) : click_x;
new_y = (move_y < click_y) ? (click_y - height) : click_y;
$selection.css({
'width': width,
'height': height,
'top': new_y,
'left': new_x
});
}).on('mouseup', function(e) {
$container.off('mousemove');
$selection.remove();
});
});
});
Demo: http://jsbin.com/ireqix/226/

$("#YOUR_ELEMENT_ID").on("mousedown", function (e) {
var click_x = e.pageX;
var click_y = e.pageY;
/* Posição do objeto */
var x = parseFloat($(this).css("left").replace("px", "")),
y = parseFloat($(this).css("top").replace("px", ""));
/* Calcula distância no eixo x */
var distanc_x = Math.abs(x - click_x);
var distanc_y = Math.abs(y - click_y);
$("#YOUR_ELEMENT_ID")
.on("mousemove", function (e) {
var new_x = e.pageX - distanc_x;
var new_y = e.pageY - distanc_y;
$(this).css({
top: new_y,
left: new_x,
});
}).on("mouseup", function (e) {
$(this).off("mousemove");
});
});