Resizing the knob

[glumn]

Hi, I've been trying multiple ways to resize the knob once it has been rendered, but so far haven't really managed to do it. How can i redraw / change the width of the knob ?

http://jsfiddle.net/trJMN/1/

[austinpray]

I used this method: https://gist.github.com/austinpray/6753515

<div class="dial-container">
  <input type="text" class="checkin-dial prof-pic-dial" data-width="100%" data-displayInput="false" data-linecap="round" data-angleOffset="-165" data-angleArc="330" data-thickness="0.1" data-bgColor="#d8d7d0" data-fgColor="#ed193a" data-readOnly="true" value="45">
</div>

and then call

$(".dial-container").redrawKnob();

whenever you need to redraw the Knob. I paired this with https://github.com/WickyNilliams/enquire.js to redraw when it hits media queries.

This is crude but I simply have to ship a feature using this plugin on monday. Feedback?

[glumn]

Thanks a lot !
Works like a charm, had to adapt it a bit (passing options when initializing the new knob) still need to implement it to see if my live resizing is gonna cause performance problems.

Also i wanted to know the reason why you use the class name instead of doing a .find("input") ?

Great addition to the knob anyway, thanks again

[austinpray]

Glad I could help! Hopefully the main codebase gets updated with better responsive support.

performance problems

I have my knobs set to redraw on window resize. I am using underscore.js to debounce the function and I see little performance loss in this case. I cringed at the idea of redrawing the knob so much, but then I realized that it really isn't that big of a deal even on mobile devices.
http://underscorejs.org/#throttle
http://underscorejs.org/#debounce

Also i wanted to know the reason why you use the class name instead of doing a .find("input") ?

I use OOCSS, BEM (http://bem.info/method/definitions/) methodology specifically. One of the things I learned that stops crazy stuff from happening is to avoid using IDs and html selectors. I just put a class on everything. It makes CSS super easy to troubleshoot, super modular, and it doesn't rely on the way the HTML is structured. For instance, what if my team wanted to add another "" below the little dial in that same container? They could do it because I am not selecting inputs, I am only selecting that specific class. I don't like my selectors to wander.

[aterrien]

Can be done with $('knob').trigger('configure', {width:100});