Search jQuery

jQuery Forum

keydown/keyup toggle functionality

in Using jQuery • 8 years ago

I'm trying to understand how I might toggle on/off functionality while a key is pressed. I've been working on an example but I'm struggling with how to select the element I'm currently interacting with so I can revert functionality once the key is released.

Below is the code I'm currently working on. On lines 6, 16 and 17 I would really like to select the specific element that was being resized, not all items in that class. How can I reference that specific item to toggle it's settings?

$(document).keydown(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 18){
$(".onpage").resizable({
alsoResize: false,
aspectRatio: false
});
}
});
$(document).keyup(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 18){
$(".onpage").resizable({
alsoResize: $(".onpage").find('img'),
aspectRatio: true
});
}
});

Thanks,

Dave

Replies(10)

kbwood.au

Re: keydown/keyup toggle functionality

8 years ago

Since your events operate at the document level, you should use e.target to determine where they actually occurred. Something like this perhaps:

$(document).keydown(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 18 && $(e.target).hasClass('onpage')) {
$(e.target).resizable({
alsoResize: false,
aspectRatio: false
});
}
}).keyup(function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 18 && $(e.target).hasClass('onpage')) {
$(e.target).resizable({
alsoResize: $('img', e.target),
aspectRatio: true
});
}
});

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

Thanks for your response kbwood, but doing that seems to remove the toggle functionality all together. The issue I'm running into (prior to making your suggested change) is that the toggle starts to affect image 1 while working on image 2.

What I'm trying to achieve is the ability to scale the div that contains the image and have it scale the child image with it. Once the modifier key is pressed and held, i want it to allow the user to reshape the box over the image (visually cropping the image). It's possible I'm going about this all wrong, if so, please feel free to correct my ignorance.

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

Here is an example of what I'm trying to work on.

http://jsfiddle.net/bYP7V/1/

The toggle (holding down the alt key) doesn't seem to be working here for some reason but does on my local machine. Again, what I'm trying to create is a way for the user to scale the div (including the image inside) then toggle (by holding down the alt key) to allow them to adjust the box size.

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

Here is an update to my current state...

http://jsfiddle.net/bYP7V/8/

I'm still having some unexpected behavior. I've noticed I have to click off the image before holding down the "alt" key, or it won't adjust the box. Also, after adjusting the bottom box, I've noticed that when I go back to scaling the image, it scales the first image, which is what made me post my question in the first place. I'm really struggling with this and I would love a little guidance from someone with more jQuery experience.

Thanks,

Dave

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

Ok, I'm very close. I really only have one issue left. My toggle is supposed to change the aspectRatio from true to false, but it doesn't seem to be having any affect.

Here is a live demo

http://jsfiddle.net/bYP7V/11/

If anyone (with far more jQuery experience) can see what I'm doing wrong, I would really appreciate the heads up.

Thanks in advance,

Dave

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

I figured it out. I needed to loop through the elements in order for it to work. Final working version is available here (if anyone else is trying to attempt a similar thing)

http://jsfiddle.net/bYP7V/12/

popnoodles

Re: keydown/keyup toggle functionality

8 years ago

Wouldn't it make more sense to have the keypress/release outside of that resize so you don't have to write things twice?

var altHold=false;

$(document).keydown(function(e) {
// don't need to check this - jQuery does var keyCode = e.keyCode || e.which;
if (e.which == 18) altHold=true;

}).keyup(function(e) {

if (e.which == 18) altHold=false;

});

Ah but you're setting what to do instantly so alt won't be held. There must be a way to not have to write everything twice tho. Correction: three times.

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

There must be a way to not have to write everything twice tho. Correction: three times.

I'm pretty new to jQuery so if you think of a way to make it work with only doing it once, I would love to see an example.

Dave

popnoodles

Re: keydown/keyup toggle functionality

8 years ago

http://jsfiddle.net/popnoodles/bYP7V/14/

Slight problem with the destroy ... one sec

Fixed your keypress (by using the event altKey)

Destroy didn't seem to do anything on your original one, are you sure you need it?

http://jsfiddle.net/popnoodles/bYP7V/15/

Second edit: if the user pressed or lets go of Alt while dragging change its behaviour

http://jsfiddle.net/popnoodles/bYP7V/16/

I'm not convinced it works properly on Chrome but I wasn't from the beginning. So if it does the job for you.

djmoffat

Re: keydown/keyup toggle functionality

8 years ago

Destroy didn't seem to do anything on your original one, are you sure you need it?

Without the "destroy" I couldn't get it to allow me to toggle the aspectRatio parameter. It was "sticking" on true.

Second edit: if the user pressed or lets go of Alt while dragging change its behaviour
http://jsfiddle.net/popnoodles/bYP7V/16/

I'm not able to get your demo to work as I would expect on either Chrome or Safari. Once I trigger the alt key on the first image, I can't seem to turn it off. Meaning, I can no longer change the size of the image and I can only move the image within the box, not the entire box.

EDIT: I take that back, it will allow me to scale the image, but I can't move the box, only the image within the box after using the alt key.

Top Reply

Response title

Attachments

jQuery Forum

keydown/keyup toggle functionality

Replies(10)

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Re: keydown/keyup toggle functionality

Statistics

Tags

Actions