Repository navigation
Problem when resize viewport, width & formatting value #353
Description
I want to set the input value as timer & I managed to achieve that by using 'format'
`$('#knob1').knob({
'min': 0,
'max': 60,
'step': 1,
// 'width': 200,
'thickness': 0.3,
'fgColor': '#06BABC',
'bgColor': '#333',
'format' : function(v) {
var sec = parseInt(v)*60;
var min = Math.floor(sec / 60);
sec -= min * 60;
return min + ':' + (sec < 10 ? "0" + sec : sec);
}});`
I tried to make it responsive by setting the data-width to 80% but when I resized the viewport the value changed to normal number (eg: 25:00 -> 25)
if I add fixed width to the knob -> 'width': 200, the value displayed as what I want but it's not responsive & turned out like this
I also try using $(window).resize(function() {}); to get the width of the knob when resizing & dynamically change the value into 'width' but it's still not working.
Any advice?
Activity
samudiogo commentedon Jul 2, 2018
Hi! I updated your jsfiddle https://jsfiddle.net/bf8aLtwj/18/ with this approach:
separate the main format function from optons:
var format = function(v) { var sec = parseInt(v)*60; var min = Math.floor(sec / 60); sec -= min * 60; return min + ':' + (sec < 10 ? "0" + sec : sec); };then I call at draw event instead of format hook:
`
$('#knob1').knob({
'min': 0,
'max': 60,
'width': '100%',
'step': 1,
'thickness': 0.3,
'fgColor': '#06BABC',
'bgColor': 'Disable Knob redraw on screen Resize #333',
'draw': function(){
this.i.val(format(this.cv));
}
});
`