[jQuery] Re: how to differentiate between "click" and "dragend" events?
Thank you peter, that's very helpful. Thank u nic as well.
On Feb 12, 2:54 am, Peter Edwards wrote:
> the event order is mousedown->mouseup->click
> the 'dragend' event is triggered by mouseup, which happens before the
> click event, so if you put logic in your function dragged() to prevent
> clicked() from doing whatever it does, then the click event which is
> triggered at the end of a drag should be neutralised. The following
> approach uses a global boolean variable as a switch.
>
> var afterDrag = false
> function draggged() { afterDrag = true; }
> function clicked(){
> if (afterDrag) {
> afterDrag = false;
> return;
> }
>
> }
>
> Another approach would be to cancel events in the dragged() function
> somehow, but my knowledge of the event model doesn't extend that far
> (can a mouseup event cancel the click event which follows it?)
>
> on 12/02/2009 00:43 legofish said::
>
> > no takers?
>
> > On Feb 11, 1:54 pm, legofish wrote:
>
> >> Hi,
>
> >> I am using the "drag" plugin (http://blog.threedubmedia.com/2008/08/
> >> eventspecialdrag.html) to design some interactions for a UI element.
>
> >> The element foo, needs to respond to a click, as well as to a drag
> >> (different responses for each). The plugin gives you handy drag events
> >> to work with.
>
> >> So I have:
> >> $("#foo").bind('dragend', function(e){ dragged() });
> >> $("#foo").bind('click', function(e){ clicked() });
>
> >> When foo is simply clicked on, then clicked() is executed and all is
> >> well.
> >> However, when foo is dragged, dragged() is called and right after that
> >> clicked() is called as well.
> >> I don't want clicked() to be called when foo is dragged, but I can't
> >> seem to figure out how to avoid that. Help is much appreciated.
[jQuery] Re: how to differentiate between "click" and "dragend" events?
no takers?
On Feb 11, 1:54 pm, legofish wrote:
> Hi,
>
> I am using the "drag" plugin (http://blog.threedubmedia.com/2008/08/
> eventspecialdrag.html) to design some interactions for a UI element.
>
> The element foo, needs to respond to a click, as well as to a drag
> (different responses for each). The plugin gives you handy drag events
> to work with.
>
> So I have:
> $("#foo").bind('dragend', function(e){ dragged() });
> $("#foo").bind('click', function(e){ clicked() });
>
> When foo is simply clicked on, then clicked() is executed and all is
> well.
> However, when foo is dragged, dragged() is called and right after that
> clicked() is called as well.
> I don't want clicked() to be called when foo is dragged, but I can't
> seem to figure out how to avoid that. Help is much appreciated.
[jQuery] how to differentiate between "click" and "dragend" events?
Hi,
I am using the "drag" plugin (http://blog.threedubmedia.com/2008/08/
eventspecialdrag.html) to design some interactions for a UI element.
The element foo, needs to respond to a click, as well as to a drag
(different responses for each). The plugin gives you handy drag events
to work with.
So I have:
$("#foo").bind('dragend', function(e){ dragged() });
$("#foo").bind('click', function(e){ clicked() });
When foo is simply clicked on, then clicked() is executed and all is
well.
However, when foo is dragged, dragged() is called and right after that
clicked() is called as well.
I don't want clicked() to be called when foo is dragged, but I can't
seem to figure out how to avoid that. Help is much appreciated.
[jQuery] Re: Implementing a Knob Control
thanks riyono On Jan 26, 9:51 pm, Andronicus Riyono wrote: > On Tue, Jan 27, 2009 at 8:10 AM, Ricardo Tomasi wrote: > > > > > I have to disagree. Precise circular motion is very hard with a mouse, > > specially because most computers have cursor acceleration enabled - > > it's impossible to draw a round shape. The up/down interaction method > > is much easier to control and a simple explanation should be enough to > > get someone started. > > > - ricardo > > I was thinking that I've seen something like this (knob-thingy) on jquery UI > draggable, and after some searching, found it (not in jquery ui but in > interface.eyecon.ro): > > http://interface.eyecon.ro/demos/drag_vr.html > > IMHO, this one is usable :) > > Best regards, > Riyono > > -- > - > There's nothing impossible for an open mind > -
[jQuery] Re: Implementing a Knob Control
thanks ricardo, I wish I had seen the link earlier, I spent most of the day trying to implement something similar. My code is very messy though so I won't post it. I know that audio app users like the paradigm you just explained (knob responding to up-down or left-right mouse movement), but I actually don't like that interaction model very much and I think that's part of the reason average people get frustrated with them. The one I implemented responds to circular motions, so you would drag the knob and move it in a circular trajectory and it follows the movement. I think that's most natural and intuitive. If i clean up my code I'll post a sample here. Thanks again On Jan 26, 4:14 pm, Ricardo Tomasi wrote: > Audio editing software has lots of knobs, and they're not hard to use. > The thing is you don't turn them with a circular motion, but you click > and drag up/down or right/left just like a slider, the rotary control > gives you visual feedback while saving a lot of space. > > This was real fun: > > http://jsbin.com/apida/http://jsbin.com/apida/edit > > thanks to raphaeljs.com > > cheers, > - ricardo > > On Jan 26, 5:48 pm, "Jeffrey Kretz" wrote: > > > If I could second this from a usability perspective. > > > I've used a flash-based interface that had a rotating knob. Moving that > > with a mouse was counter-intuitive. > > > Dragging a straight slider (horizontal or vertical) just felt a lot better. > > > JK > > > -Original Message- > > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > > > Behalf Of Eric Garside > > Sent: Monday, January 26, 2009 11:41 AM > > To: jQuery (English) > > Subject: [jQuery] Re: Implementing a Knob Control > > > Canvas is probably the most elegant way to go, especially given the > > type of knobs you want. My suggestion is to find a decent resolution > > image of the knob you want, then use jquery and canvas to move the > > knob, and just keep track of the position. Be aware though, the mouse > > isn't really well designed for a knob kind of motion. > > > On Jan 26, 1:56 pm, legofish wrote: > > > by the way by "this approach" I meant the second example on that > > > page. > > > > On Jan 26, 1:54 pm, legofish wrote: > > > > > James, yes I mean a rotary control. > > > > Eric, here's a real-world example of what I'm trying to implement: > > > > >http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg > > > > > I'm looking for control knobs such as those found on a stereo; both > > > > continuous ones such as a volume knob, and "n-step" knobs such > > > > as the "function" knob in that picture, where the knob can only be > > > > rotated in n steps. > > > > > I found some leads which I was going to try. I was going to mix this > > > approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action > > sc... > > > > > with the jquery rotate > > plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq > > ... > > > > > Still, your help would be immensely appreciated. Of course I would > > > > want the knob image to look like it's rotating, but I also want the > > > > control > > > > to return a value depending on its position, similar to how a slider > > > > returns a value. > > > > > Thanks again > > > > > On Jan 26, 10:20 am, Eric Garside wrote: > > > > > > Legofish, > > > > > > I've got a couple ideas which might get the job done, but they all > > > > > depend on what "style" of knob you want. Take a look around a google > > > > > image search, and see if you can find a good representation of the > > > > > type of knob you want. Then we can go from there. :) > > > > > > On Jan 26, 10:03 am, "James Hughes" wrote: > > > > > > > Do you mean a gague control? IE some sort of rotary control vs a > > slider? > > > > > > > > > > > > > > From: jquery-en@googlegroups.com on behalf of legofish > > > > > > Sent: Mon 26/01/2009 14:49 > > > > > > To: jQuery (English) > > > > > > Subject: [jQuery] Implementing a Knob Control > > > > > > > Hi, > > > > > > I need to implement a knob control for one of my projects (eg. a > > > > > > volume knob). Ideally
[jQuery] Re: Implementing a Knob Control
thanks jay for the IE support link, I was just looking for that. Also thanks Eric for the suggestion, I'm going to try the other approach first and if it ends up being too complex I'll give canvas a shot. Jeffrey, I sort of agree with you, but I also think the main reason why knobs are such a UI nightmare is because they have never been done right. I already have the same interface implemented using a straight slider. I want to create a knob version of the same thing (I like to try and do it the *right* way) and then have the two versions formally tested in usability groups (I'm lucky to have the resources for the tests) and see if there's any merit in using the knobs Anyway, thanks all. On Jan 26, 2:48 pm, "Jeffrey Kretz" wrote: > If I could second this from a usability perspective. > > I've used a flash-based interface that had a rotating knob. Moving that > with a mouse was counter-intuitive. > > Dragging a straight slider (horizontal or vertical) just felt a lot better. > > JK > > -Original Message- > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On > > Behalf Of Eric Garside > Sent: Monday, January 26, 2009 11:41 AM > To: jQuery (English) > Subject: [jQuery] Re: Implementing a Knob Control > > Canvas is probably the most elegant way to go, especially given the > type of knobs you want. My suggestion is to find a decent resolution > image of the knob you want, then use jquery and canvas to move the > knob, and just keep track of the position. Be aware though, the mouse > isn't really well designed for a knob kind of motion. > > On Jan 26, 1:56 pm, legofish wrote: > > by the way by "this approach" I meant the second example on that > > page. > > > On Jan 26, 1:54 pm, legofish wrote: > > > > James, yes I mean a rotary control. > > > Eric, here's a real-world example of what I'm trying to implement: > > > >http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg > > > > I'm looking for control knobs such as those found on a stereo; both > > > continuous ones such as a volume knob, and "n-step" knobs such > > > as the "function" knob in that picture, where the knob can only be > > > rotated in n steps. > > > > I found some leads which I was going to try. I was going to mix this > > approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-action > sc... > > > > with the jquery rotate > plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq > ... > > > > Still, your help would be immensely appreciated. Of course I would > > > want the knob image to look like it's rotating, but I also want the > > > control > > > to return a value depending on its position, similar to how a slider > > > returns a value. > > > > Thanks again > > > > On Jan 26, 10:20 am, Eric Garside wrote: > > > > > Legofish, > > > > > I've got a couple ideas which might get the job done, but they all > > > > depend on what "style" of knob you want. Take a look around a google > > > > image search, and see if you can find a good representation of the > > > > type of knob you want. Then we can go from there. :) > > > > > On Jan 26, 10:03 am, "James Hughes" wrote: > > > > > > Do you mean a gague control? IE some sort of rotary control vs a > slider? > > > > > > > > > > > > From: jquery-en@googlegroups.com on behalf of legofish > > > > > Sent: Mon 26/01/2009 14:49 > > > > > To: jQuery (English) > > > > > Subject: [jQuery] Implementing a Knob Control > > > > > > Hi, > > > > > I need to implement a knob control for one of my projects (eg. a > > > > > volume knob). Ideally I would like to use jquery. I have spent some > > > > > time searching for any resources to get started. Not only I can't > find > > > > > anything in jquery, I can't find anything even resembling a knob > > > > > implementation in javascript in general. I did find a few sites who > > > > > sell VB or .net knob controls, but nothing in js. > > > > > > anyway, not sure if anyone can help, but any hints towards a > resource > > > > > or starting point would be much appreciated. > > > > > > > > > > > This e-mail is intended solely for the addressee and is stric
[jQuery] Re: Implementing a Knob Control
by the way by "this approach" I meant the second example on that page. On Jan 26, 1:54 pm, legofish wrote: > James, yes I mean a rotary control. > Eric, here's a real-world example of what I'm trying to implement: > > http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg > > I'm looking for control knobs such as those found on a stereo; both > continuous ones such as a volume knob, and "n-step" knobs such > as the "function" knob in that picture, where the knob can only be > rotated in n steps. > > I found some leads which I was going to try. I was going to mix this > approach:http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionsc... > > with the jquery rotate > plugin:http://stackoverflow.com/questions/365820/howto-rotate-image-using-jq... > > Still, your help would be immensely appreciated. Of course I would > want the knob image to look like it's rotating, but I also want the > control > to return a value depending on its position, similar to how a slider > returns a value. > > Thanks again > > On Jan 26, 10:20 am, Eric Garside wrote: > > > Legofish, > > > I've got a couple ideas which might get the job done, but they all > > depend on what "style" of knob you want. Take a look around a google > > image search, and see if you can find a good representation of the > > type of knob you want. Then we can go from there. :) > > > On Jan 26, 10:03 am, "James Hughes" wrote: > > > > Do you mean a gague control? IE some sort of rotary control vs a slider? > > > > > > > > From: jquery-en@googlegroups.com on behalf of legofish > > > Sent: Mon 26/01/2009 14:49 > > > To: jQuery (English) > > > Subject: [jQuery] Implementing a Knob Control > > > > Hi, > > > I need to implement a knob control for one of my projects (eg. a > > > volume knob). Ideally I would like to use jquery. I have spent some > > > time searching for any resources to get started. Not only I can't find > > > anything in jquery, I can't find anything even resembling a knob > > > implementation in javascript in general. I did find a few sites who > > > sell VB or .net knob controls, but nothing in js. > > > > anyway, not sure if anyone can help, but any hints towards a resource > > > or starting point would be much appreciated. > > > > > > > This e-mail is intended solely for the addressee and is strictly > > > confidential; if you are not the addressee please destroy the message and > > > all copies. Any opinion or information contained in this email or its > > > attachments that does not relate to the business of Kainos > > > is personal to the sender and is not given by or endorsed by Kainos. > > > Kainos is the trading name of Kainos Software Limited, registered in > > > Northern Ireland under company number: NI19370, having its registered > > > offices at: Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, > > > Northern Ireland. Registered in the UK for VAT under number: 454598802 > > > and registered in Ireland for VAT under number: 9950340E. This email has > > > been scanned for all known viruses by MessageLabs but is not guaranteed > > > to be virus free; further terms and conditions may be > > > found on our website -www.kainos.com
[jQuery] Re: Implementing a Knob Control
James, yes I mean a rotary control. Eric, here's a real-world example of what I'm trying to implement: http://www.niji.or.jp/home/k-nisi/sa-9900-h.jpg I'm looking for control knobs such as those found on a stereo; both continuous ones such as a volume knob, and "n-step" knobs such as the "function" knob in that picture, where the knob can only be rotated in n steps. I found some leads which I was going to try. I was going to mix this approach: http://blog.circlecube.com/2008/03/tutorial/interactive-spin-actionscript-tutorial/ with the jquery rotate plugin: http://stackoverflow.com/questions/365820/howto-rotate-image-using-jquery-rotate-plugin Still, your help would be immensely appreciated. Of course I would want the knob image to look like it's rotating, but I also want the control to return a value depending on its position, similar to how a slider returns a value. Thanks again On Jan 26, 10:20 am, Eric Garside wrote: > Legofish, > > I've got a couple ideas which might get the job done, but they all > depend on what "style" of knob you want. Take a look around a google > image search, and see if you can find a good representation of the > type of knob you want. Then we can go from there. :) > > On Jan 26, 10:03 am, "James Hughes" wrote: > > > Do you mean a gague control? IE some sort of rotary control vs a slider? > > > > > > From: jquery-en@googlegroups.com on behalf of legofish > > Sent: Mon 26/01/2009 14:49 > > To: jQuery (English) > > Subject: [jQuery] Implementing a Knob Control > > > Hi, > > I need to implement a knob control for one of my projects (eg. a > > volume knob). Ideally I would like to use jquery. I have spent some > > time searching for any resources to get started. Not only I can't find > > anything in jquery, I can't find anything even resembling a knob > > implementation in javascript in general. I did find a few sites who > > sell VB or .net knob controls, but nothing in js. > > > anyway, not sure if anyone can help, but any hints towards a resource > > or starting point would be much appreciated. > > > > > This e-mail is intended solely for the addressee and is strictly > > confidential; if you are not the addressee please destroy the message and > > all copies. Any opinion or information contained in this email or its > > attachments that does not relate to the business of Kainos > > is personal to the sender and is not given by or endorsed by Kainos. Kainos > > is the trading name of Kainos Software Limited, registered in Northern > > Ireland under company number: NI19370, having its registered offices at: > > Kainos House, 4-6 Upper Crescent, Belfast, BT7 1NT, > > Northern Ireland. Registered in the UK for VAT under number: 454598802 and > > registered in Ireland for VAT under number: 9950340E. This email has been > > scanned for all known viruses by MessageLabs but is not guaranteed to be > > virus free; further terms and conditions may be > > found on our website -www.kainos.com
[jQuery] Implementing a Knob Control
Hi, I need to implement a knob control for one of my projects (eg. a volume knob). Ideally I would like to use jquery. I have spent some time searching for any resources to get started. Not only I can't find anything in jquery, I can't find anything even resembling a knob implementation in javascript in general. I did find a few sites who sell VB or .net knob controls, but nothing in js. anyway, not sure if anyone can help, but any hints towards a resource or starting point would be much appreciated.
[jQuery] Re: using setTimeout to apply fade-in effect to multiple divs in sequence
That's pretty useful Balazs, for some reason I couldn't get it to
worked though.
I saved your plugin bit that appears in that link in a file and named
it jquery.asynceach.js and linked it
to the page. Anyway, I'll play around with it a little more to see
where the problem is.
Thanks again
On Jan 13, 11:37 am, Balazs Endresz wrote:
> I've actually made a bit nicer abstraction as a jQuery plugin a while
> ago, I think it's much more useful for such things, I almost forgot
> about it:http://jsbin.com/unini/edit
>
> This is how your code looks like with it:
>
> $("#container :first-child").asyncEach(function(){
> $(this).fadeIn('slow');
>
> }, 500);
>
> No global variables, can be reused onmultipleelements, you can stop
> it, add custom easing and there's a `complete` callback function too!
>
> On Jan 13, 3:49 pm, legofish wrote:
>
> > Thank you so much for the reply. I had figured it out but your way is
> > much more elegant. here's what I had done:
>
> > $(".box").hide();
>
> > var currentBox = $("#container :first-child");
> > fadeMyBoxes(currentBox);
>
> > function fadeMyBoxes(thisbox){
>
> > thisbox.fadeIn('slow');
>
> > if (thisbox.is(":last-child")){
> > clearTimeout(t);
> > }
>
> > else {
> > var t =setTimeout(
> > function(){fadeMyBoxes(thisbox.next());},50);
> > }
>
> > };
>
> > On Jan 10, 10:04 am, Balazs Endresz wrote:
>
> > > It can be done with setInterval too but doing it recursively
> > > withsetTimeoutis a bit better:
>
> > > var i=0, elements=$('.box'), length=elements.length;
>
> > > functionfade(delay){
> > > elements.eq(i++).fadeOut();
> > > if(i<=length)
> > > setTimeout(arguments.callee, delay);
> > > //arguments.callee is a reference to the current function
>
> > > }
>
> > >fade(500);
>
> > > On Jan 10, 3:05 am, legofish wrote:
>
> > > > Hi,
>
> > > > I have 20 divs all with the class ".box" on my page.
> > > > I want to apply the fadeIn() effect to all of them.
> > > > I dont want them to allfadein at the same time.
> > > > I want them tofade-in one by one, with a slight time offset.
> > > > I dont want to use callback functions, because I dont want to wait
> > > > until thefadeis completely finished on one div before fading the
> > > > next div. I want thefadeeffect on the next div to start a short time
> > > > after the effect on the previous one has started.
>
> > > > So I think I need to usesetTimeoutand some kind of a recursive
> > > > method, but I'm not very good with JS so I was hoping someone would
> > > > find this trivial and could help answer my question.
>
> > > > my thanks in advance.
[jQuery] Re: using setTimeout to apply fade-in effect to multiple divs in sequence
Thank you so much for the reply. I had figured it out but your way is
much more elegant. here's what I had done:
$(".box").hide();
var currentBox = $("#container :first-child");
fadeMyBoxes(currentBox);
function fadeMyBoxes(thisbox){
thisbox.fadeIn('slow');
if (thisbox.is(":last-child")){
clearTimeout(t);
}
else {
var t =setTimeout(
function(){fadeMyBoxes(thisbox.next());},50);
}
};
On Jan 10, 10:04 am, Balazs Endresz wrote:
> It can be done with setInterval too but doing it recursively withsetTimeoutis
> a bit better:
>
> var i=0, elements=$('.box'), length=elements.length;
>
> functionfade(delay){
> elements.eq(i++).fadeOut();
> if(i<=length)
> setTimeout(arguments.callee, delay);
> //arguments.callee is a reference to the current function
>
> }
>
> fade(500);
>
> On Jan 10, 3:05 am, legofish wrote:
>
> > Hi,
>
> > I have 20 divs all with the class ".box" on my page.
> > I want to apply the fadeIn() effect to all of them.
> > I dont want them to allfadein at the same time.
> > I want them tofade-in one by one, with a slight time offset.
> > I dont want to use callback functions, because I dont want to wait
> > until thefadeis completely finished on one div before fading the
> > next div. I want thefadeeffect on the next div to start a short time
> > after the effect on the previous one has started.
>
> > So I think I need to usesetTimeoutand some kind of a recursive
> > method, but I'm not very good with JS so I was hoping someone would
> > find this trivial and could help answer my question.
>
> > my thanks in advance.
[jQuery] using setTimeout to apply fade-in effect to multiple divs in sequence
Hi, I have 20 divs all with the class ".box" on my page. I want to apply the fadeIn() effect to all of them. I dont want them to all fade in at the same time. I want them to fade-in one by one, with a slight time offset. I dont want to use callback functions, because I dont want to wait until the fade is completely finished on one div before fading the next div. I want the fade effect on the next div to start a short time after the effect on the previous one has started. So I think I need to use setTimeout and some kind of a recursive method, but I'm not very good with JS so I was hoping someone would find this trivial and could help answer my question. my thanks in advance.
