We Keep Coding

Adding resize handles to a node

I have an element I would like to show resize handles on. My current code:
const cursorMove = (e) => {
if (!curData.doAnimate) {
mouse.x = e.clientX;
mouse.y = e.clientY;
resize = {
top: mouse.y < curPos.y + settings.resizeMargin,
right: mouse.x > curPos.x + curPos.w - settings.resizeMargin,
bottom: mouse.y > curPos.y + curPos.h - settings.resizeMargin,
left: mouse.x < curPos.x + settings.resizeMargin,
};
const {top, right, bottom, left} = resize;
if (top || left || right || bottom) {
// mouse over border
if ((top && left) || (bottom && right)) {
wrap.style.cursor = 'nwse-resize';
} else if ((top && right) || (bottom && left)) {
wrap.style.cursor = 'nesw-resize';
} else if (top || bottom) {
wrap.style.cursor = 'ns-resize';
} else if (left || right) {
wrap.style.cursor = 'ew-resize';
}
} else {
wrap.style.cursor = 'default';
}
}
};
wrap.addEventListener('mousemove', cursorMove);
as you can see I use javascript to add an eventlistener for mouse movments, and every time the mouse moves I check weather it is on a border of the element. I can turn the eventlistener off if I do something with the node using curData.doAnimate. I could remove the eventlistener if I move out of the element, but I dont think this would improve the performence.
Ideal would be a solution using Css or a solution without an eventlistener permanently listening to move events.
Thank you in advance :)
Edit: I am only interested in the changed cursor - I already have a function to resize the node (unless you know a super slick way of doing so using some magic).

Luckily, CSS already has a property for handling this: resize

greensock draggable / triggering click and drag

I have an issue which is related to greensock animation but also may be a more general js issue in that I need to transfer a mousedown event to a second draggable instance after killing the first draggable instance.
the codepen hopefully will illustrate what i am trying to do.. code is underneath.
Codepen URL: http://codepen.io/anon/pen/ypdGn
var detachdraggable;
var rotatedraggable;
function makeRotateDraggable() {
// create rotate draggable for the cards..
rotatedraggable = Draggable.create(".dragclone", {
type:"rotation",
throwProps:true,
dragResistance : 0,
edgeResistance : 1,
bounds:{minRotation:-60, maxRotation:60},
onDragStart : function() {
var $el = $(this.target);
var cardStartAngle = $el.data('startangle');
},
onDrag: function() {
currentCardAngle = this.rotation;
var $el = $(this.target);
var cardStartAngle = $el.data('startangle');
cardDirection = ( currentCardAngle > cardStartAngle ) ? "up":"down";
cardTravelDegrees = Math.abs(currentCardAngle - cardStartAngle);
this.vars.type = "x";
},
onDragEnd: function() {
},
onClick: function() {
return false;
}
});
$('.dragclone').mousedown(function() {
$('.dragclone').css('z-index','10');
rotatedraggable[0].enable();
});
$('.dragclone').mouseout(function() {
detachdraggable[0].disable();
$('.dragclone').trigger('mousedown');
});
$('.dragclone').trigger('mouseout');
}
// first setup the x,y draggable..
detachdraggable = Draggable.create('.dragclone', {
type: "x,y",
edgeResistance:1,
throwProps:true,
onPress:function() {
startX = this.x;
startY = this.y;
},
onDrag:function() {
var xChange = this.x - startX,
yChange = this.y - startY,
ratio = Math.abs(xChange / yChange),
direction = [];
// NB:: you can adjust these ratio thresholds to make things
// more or less sensitive to diagonal movement.
if (ratio > 0.25) {
direction.push((xChange < 0) ? "left" : "right");
}
if (ratio < 4) {
direction.push((yChange < 0) ? "up" : "down");
}
if(direction[0] == "left") {
// TweenMax.to( $('.cloned'), .0001, {right:-xChange + 135});
}
// moving up so lets switch cards !!
if(direction[0] == "up") {
if(Math.abs(yChange) > 20) {
makeRotateDraggable();
}
}
},
onDragEnd:function() {
// driftDragCardBack();
// if(!cardPopping) { driftClonedCardBack(); }
},
onThrowComplete: function() {
}
});
I am battling to switch between 2 draggables setup on same element, am wondering if this is possible at all. basically the codepen has an example of what I want to do, but it isnt seamless. draggable is setup for element of type x,y, what i want to do is when the drag direction is up kill the type x,y draggable and switch to a type: rotation draggable so that the card moves around on an axis. you can see mine does that, but only if you release and then click again - is there any way to make this seamless, so it just switches mid-drag ?
thanks,
Justin

See http://codepen.io/anon/pen/klanu
I've never used greensock but just had a look at their document:
https://greensock.com/docs/#/HTML5/Drag/Draggable/startDrag/
First of all you had a couple of issues within your code. You don't need to create rotatedraggable inside a function, just create it, it's not enabled anyways. I also moved
$('.dragclone').mousedown(function() {
$('.dragclone').css('z-index','10');
detachdraggable[0].enable();
});
outside the function.
In your 2nd draggable, you were calling createRotation to create the rotation but like I said you can create it at the start. When the div is moved to the top, I just disabled the current drag and enabled the 1st one and called dragStart on it. e is what's passed to drag of the 2nd.
if(Math.abs(yChange) > 20) {
detachdraggable[0].disable();
rotatedraggable[0].enable();
rotatedraggable[0].startDrag(e);
}

chrome div randomly go to height 0px

I'm encountering a strange bug in chrome (also happen in chromium) but not under firefox.
I'm coding something to be able to resize some divs.
Sometimes in chrome a sibling div is displaying as 0px height when I'm resizing. For example, in this fiddle, if you drag the resizing line between the red and the blue div, the green div disappear.
I put a breakpoint on the code of the mousemove handler in order to inspect the div, but the css is exactly the same as the div displaying correctly.
To try it put a breakpoint here :
$("*").mouseup(function(event) {
if (downV) {
downV = false;
Is this a webkit related bug or am I doing something wrong? How can I fix this?

The problem seems to be, that it – for whatever reason – doesn't like the mixed units (percent and pixel values) while moving. Check out this fiddle, I've changed the code in $(".area").mousemove(function(event) to use percent values and commented out the conversion px => % in the $("*").mouseup(function(event) method and it seems to works correctly:
mouseup:
$("*").mouseup(function(event) {
if (downV) {
downV = false;
$("body").css("cursor","initial");
//upchild.css("height", upchild.height()*100/sizeTot+"%");
//downchild.css("height", downchild.height()*100/sizeTot+"%");
event.stopPropagation();
} else if (downH) {
downH = false;
$("body").css("cursor","initial");
upchild.css("width", upchild.width()*100/sizeTot+"%");
downchild.css("width", downchild.width()*100/sizeTot+"%");
event.stopPropagation();
}
});
mousemove:
$(".area").mousemove(function(event) {
if (downV){
var y = event.pageY - $(this).offset().top - upperSize;
if (y < 0) {
y = 0;
}
if (y > sizePart) {
y = sizePart;
}
upchild.css("height", (Math.floor(y)+1)*100/sizeTot+"%");
downchild.css("height", Math.floor(sizePart-y)*100/sizeTot+"%");
event.preventDefault();
} else if (downH) {
var x = event.pageX - $(this).offset().left - upperSize;
if (x < 0) {
x = 0;
}
if (x > sizePart) {
x = sizePart;
}
upchild.css("width", Math.floor(x)+1);
downchild.css("width", Math.floor(sizePart-x));
event.preventDefault();
}
});

Draggable pop up - scroll issue

All I m using the below code snippet to make a pop draggable. the issue im facing is scroll bar is not being detected, the pop up moves instead of scroll. I did see some similar questions, but the implementation seems to be different in their case, Can you help?
$('#Div1').mousedown(function(ev) {
divToMove = document.getElementById('Div1');
var divName = '#Div1';
dragHandler(ev,divName);
});
function dragHandler(e,divName){
var offSet = $(divName).position();
dragOK = true;
dragXoffset = e.clientX - offSet.left;
dragYoffset = e.clientY - offSet.top;
$(divName).mousemove(function(ev){ moveHandler(ev) });
$(divName).mouseup(function(ev){ cleanup(ev, divName) });
return false;
}
function cleanup(e, divName) {
$(divName).mousemove = null;
$(divName).mouseup = null;
dragOK = false;
}
function moveHandler(e) {
if (e == null) { e = window.event }
if (e.button <= 1 && dragOK) {
divToMove.style.left = e.clientX - dragXoffset + 'px';
divToMove.style.top = e.clientY - dragYoffset + 'px';
return false;
}
}
Please see this example in js fiddle. The issue doesnt happen in chrome, happens only in IE and ff.
http://jsfiddle.net/6g6Xr/74/

I was wanting to comment but do not have enough points. I see you have included jQuery UI in the jsfiddle, is it possible to use its draggable component if you are using UI already? If so you could use the handle property shown here in the second part of this answer:
https://stackoverflow.com/a/8793280/2603735
jQuery UI handle reference

parallax scrolling issue - div element jerking when scrolling in webkit browsers

I have created a parallax scroll, which seem to be working fine in firefox however in the chrome browser there's a slight jump on the body text when scrolling. click here scroll to the about section. I am not sure if t this is a css or JS issue.. below is a snippet i have incorporated into my parallax function
Does anyone know how i an fix this issue?
$(document).ready(function(){
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
$('[data-type="scroll-text"]', $self).each(function() {
var $text= $(this);
var pos = ($window.scrollTop()/10) * $text.data('speed');
var curP = $text.css('margin-top');
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(is_chrome) {
$text.animate({
paddingTop: pos,
}, 200, 'linear', function() {
// Animation complete.
});
} else {
$text.css('padding-top', pos);
}
});
}; // in view
}); // window scroll
}); // each data-type
}); // document ready

Some suggestions:
1.) Use position: fixed to avoid any jitter, as you'll be taking the element out of the document flow. You can then position it using z-index.
2.) Cache as much as you can to ease processing time.
3.) Math.round may not be necessary, but try adding this CSS to your moving areas: -webkit-transform: translate3d(0,0,0); This will force hardware acceleration in Chrome, which may ease some of the jittering. (It looked smoother on my screen when I added this with Inspector, but it didn't get rid of the jumpiness with the scroll wheel.) Note: Don't do this on your entire document (e.g. body tag), as it might cause some issues with your current layout. (Your navigation bar didn't stick to the top of the window, for instance.)
4.) If you have any animations running as part of your parallax logic (tweening the margin into place or something along those lines), remove it - that would probably cause the jump you see.
Hope this helps. Best of luck.

I see the same jittering in FireFox and Chrome (Mac). Looking at your containers, one thing that's glaring at me is the pixel position that's being calculated/used.
Chrome: <div id="about-title" style="margin-top: 1562.3999999999999px;">
FireFox: <div id="about-title" style="margin-top: 1562.4px;">
Browsers aren't going to allow content to sit at 1/2 pixel, let alone 0.3999999 of a pixel. I think it's moving it, and trying to calculate whether to round up or round down. It jitters because it's calculating with every click of your mouse wheel.
Thus, I'd try adding Math.round() to your positions so that the containers are never being left in limbo.
Take a look at the code here: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
Firebug some of the elements, and you'll see that their only fraction of a pixel is '0.5'. Most of them (the bulk) go to round number values.

You are going to have to change the way that the scrolling works (i.e. change how the spacing is computed), but this can be fixed by adding the position:fixed CSS element to the page elements that are scrolling. The problem is coming from the time that it takes for the JavaScript to process and then render.
For example, on your page you would set each of the <div> tags containing text to have a fixed position and then use the JavaScript/JQuery function to update the top: CSS element. This should make the page scroll smoothly.

Have you tried adding the preventdefault inside the scroll function?
$(window).scroll(function(e) {
e.preventDefault();
// rest of your code
}

In a previous question I created a fairly good parallax scrolling implementation. Jquery Parallax Scrolling effect - Multi directional You might find it useful.
Here's the JSFiddle http://jsfiddle.net/9R4hZ/40/ use the up/down arrows or scroll wheel.
Using padding and margin for the positioning are probably why you're experiencing rendering issues. While my code uses scroll or keyboard input for the effect you can loop the relavent portion and check the $moving variable until you reach the desired element on screen.
function parallaxScroll(scroll) {
// current moving object
var ml = $moving.position().left;
var mt = $moving.position().top;
var mw = $moving.width();
var mh = $moving.height();
// calc velocity
var fromTop = false;
var fromBottom = false;
var fromLeft = false;
var fromRight = false;
var vLeft = 0;
var vTop = 0;
if($moving.hasClass('from-top')) {
vTop = scroll;
fromTop = true;
} else if($moving.hasClass('from-bottom')) {
vTop = -scroll;
fromBottom = true;
} else if($moving.hasClass('from-left')) {
vLeft = scroll;
fromLeft = true;
} else if($moving.hasClass('from-right')) {
vLeft = -scroll;
fromRight = true;
}
// calc new position
var newLeft = ml + vLeft;
var newTop = mt + vTop;
// check bounds
var finished = false;
if(fromTop && (newTop > t || newTop + mh < t)) {
finished = true;
newTop = (scroll > 0 ? t : t - mh);
} else if(fromBottom && (newTop < t || newTop > h)) {
finished = true;
newTop = (scroll > 0 ? t : t + h);
} else if(fromLeft && (newLeft > l || newLeft + mw < l)) {
finished = true;
newLeft = (scroll > 0 ? l : l - mw);
} else if(fromRight && (newLeft < l || newLeft > w)) {
finished = true;
newLeft = (scroll > 0 ? l : l + w);
}
// set new position
$moving.css('left', newLeft);
$moving.css('top', newTop);
// if finished change moving object
if(finished) {
// get the next moving
if(scroll > 0) {
$moving = $moving.next('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:last');
} else {
$moving = $moving.prev('.parallax');
if($moving.length == 0)
$moving = $view.find('.parallax:first');
}
}
// for debug
$('#direction').text(scroll + " " + l + "/" + t + " " + ml + "/" + mt + " " + finished + " " + $moving.text());
}

May not be related to your specifics, but I had a jumpy parallax scrolling problem, I was able to solve it adding the following CSS for the fixed portions of the page:
#supports (background-attachment: fixed)
{
.fixed-background
{
background-attachment: fixed;
}
}
Not sure of all the specifics, but found at Alternate Fixed & Scroll Backgrounds