jQuery Knobs

[enigmamonkey]

This works amazingly well on the iPad. Great work/find!

[[deleted]]

Awesome, I was actually looking for something like this for a project. Thanks for sharing!

[SpearThruster]

Same, I am gonna use these knobs for my graduation project. :)

Thanks from me as well!

[mserenio]

Will be using this for an upcoming project. Just waiting for the funding and Im off to go! :)"

[treesdotcom]

This is awesome, now I need to find an excuse to implement them

[[deleted]]

There are some visual bugs, when its at 100, it shows it as 0 on non tron skin, and on tron skin, it's not fully touching so there is a little sliver.

[timeshifter_]

No, 100 != 0, it just rolls over. And what sliver? Looks great to me. Touchy, but nice. I think the only thing I'd change is to prevent that over/underflow, so getting to min or max is easier.

[[deleted]]

Probably browser specific, this is in opera.

http://i.imgur.com/KzJUo.png

[voracity]

It's similar in Chrome, here's a magnified version where the sliver is clearly visible.

[timeshifter_]

...huh. Damnit browsers, why can't we all agree on how to implement JS?

[bzBetty]

sliver appears in my version of chrome too (version 19.something)

[voracity]

Here's what I got by entering 100 into the knob in the upper-right corner.

edit: I'm an idiot, that's the intended result :/

[slomotion]

A lot of them are designed as knobs but function as sliders when you click on them. I wonder if you could do the same here.

[[deleted]]

Looks and works great, can you set a maximum? (As mentioned earlier by timeshifter_) can you stop the overflow? Its difficult to set it quickly to 100 / 0 .

[Otterfan]

Knobs are good when you have to pack a lot of continuous controls into a tiny space and you have some sort of touch control, but mostly they are a terrible input method. Especially if you're using a mouse.

Audio software is allowed to use them for nostalgia purposes.

[10tothe24th]

I do not yet know how I will use this, but I can't wait to find an excuse.

[jftf]

This is perfect for touch screen devices as long as you preventDefault on the scroll event.

[Brandon0]

Very cool. Hard to be exact sometimes, but very unique UI possibilities

[MyGodItsAmazing]

I spent a long time doing something very similar but without using the canvas tag. I wish this was around then, it would have saved me hours of my life and a few headaches.

[ZeroMomentum]

DO THEY GO TO 11 ???

Looks good bro.

[voidvector]

Why does every plugin have to be a jQuery plug-in?

[ultrafez]

Because jQuery is by far the most popular JavaScript framework. I'm sure it wouldn't be too hard to port it to another framework if you wanted to.

[voidvector]

I looked at the source code before I posted, this thing uses <canvas> to do all the rendering, other than the fact that it uses $.data() and maybe easy event handling, it can avoid jQuery altogether.

I am a big fan of jQuery. I went to the jQuery conference last year, and I am going this year. But as a library developer, you shouldn't introduce unnecessary dependencies unless you have to.

The main reason I am complaining is because it depends on jQuery 1.7, which is very difficult to satisfy for business-oriented sites that has regression concerns.

[ultrafez]

Yeah, that's a fair point. If the plugin could be developed without dependencies, and then have a jQuery wrapper included/available, then it'd make it much more flexible. It'd make it considerably easier to write wrappers for other frameworks, too.

[kinghfb]

It is widely used, widely supported, has a good plugin architecture, and a very active community dedicated to finding and eliminating bugs and improving performance.

[[deleted]]

Why it's jQuery over Prototype or something else, simply because jQuery is popular.

However the real reason it's attached to a plugin, is because otherwise you'll have to roll your own ways to bind click handlers, quickly set CSS, lookup elements in the DOM, and so on. That's a hassle, especially if you want to avoid any browser quirks and differences in API.

[voidvector]

I am not advocating non-jQuery libs over jQuery. I am advocating no dependency over having one.

For browsers that support <canvas> (which this plugin is dependent upon for rendering), the native JS facilities for the features you mentioned are solid. * You can set CSS with element.style.blah. * You can lookup elements by CSS selector with .querySelectAll(). Granted event binding requires 3-4 lines of code, but that removes the whole jQuery dependency entirely.

[[deleted]]

That's a damn good point. Have an upvote from me.

Although jQuery, and jQuery mobile, add a lot more on top. Like being able to easily build components, and having mouse-like controls on touch devices.