I'm using jQuery Knob for displaying progress (read only mode). I want the circle size to adjust to the size of the layout / device my app is used on dynamically.
I already tried to use data-width="75%" but the circle disappears.
My second try was to define the size in the script:
$(".knob").knob({
height: 75%;
But that didn't work out either.
Could you guys help me out on this one? :)
thanks!
<html>
<head id="Head1" runat="server">
<title></title>
<style>
body {height:100%; width:100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.knob.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var knobWidthHeight,
windowObj;
// store reference to div obj
windowObj = $(window);
// if the window is higher than it is wider
if(windowObj.height() > windowObj.width()){
// use 75% width
knobWidthHeight = Math.round(windowObj.width()*0.75);
} else {
// else if the window is wider than it is higher
// use 75% height
knobWidthHeight = Math.round(windowObj.height()*0.75);
}
// change the data-width and data-height attributes of the input to either 75%
// of the width or 75% of the height
$('#knob').attr('data-width',knobWidthHeight).attr('data-height',knobWidthHeight);
// draw the nob NOTE: must be called after the attributes are set.
$(function() {
$("#knob").knob({
draw : function () {}
});
});
});
</script>
</head>
<body>
<!-- knob has to be an input | set default data-width and height, the jquery above will reset them before the knob is loaded
knob width and height must always be the same as each other -->
<input id="knob" data-width="500" data-height="500" data-displayInput=false value="35">
</body>
</html>
For more examples on how to use the knob library, go to their demo page and view the source. It will show you all sorts of different ways to change the knob.
I don't think jQuery Knob accepts percentages as values. Try getting the width and height of the window and calculating 75% of this, then set that pixel value. Something like:
var windowObj = $(window);
var newHeight = Math.round((windowObj.height() / 4) * 3);
var newWidth = Math.round((windowObj.width() / 4) * 3);
Now just replace the percentage values with the newHeight and newWidth pixel values.
I had this issue too and I came with a simpler solution with some javascript code.
First, to target some resolutions (as responsive design) you must add this code to a js file like custom.js:
$(window).bind("resize", widthFunctions);
function widthFunctions( e ) {
var winHeight = $(window).height();
var winWidth = $(window).width();
if (winWidth < 980 && winWidth > 750) {
$(".pinkCircle").knob({
'min':0,
'max':10000,
'readOnly': true,
'width': ... ,
'height': ... ,
'fgColor': '#e42b75',
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})
}
}
winWidth is the width you want to target, as you do with media queries. Then you can add the settings you want to. Note that this class (.pinkCircle) was added to <input>.
Then, you must add with media queries the same width that you add with js, like:
@media only screen and (max-width: 768px) {
.divStats > div[onTablet="span4"] {
width: ... ; // Here you could add a width for 3 circles display inline for example
}
}
I'm using bootstrap so I add here the width of span4 which is '31.914893617021278%', note this is an example only, all width and code could be different from yours, but this is all around from width.
Greetings.
You can use data-width on the input. Here is the first commit for the responsive implementation.
