CODEWITHSUNDEEP
jquerymobileresizejquery-knob
ManuKaracho
ManuKaracho

Reputation: 1218

Adjust jQuery knob size dynamically to the layout

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!

Upvotes: 0

Views: 7694

Answers (4)

George Cristian
George Cristian

Reputation: 59

You can use data-width on the input. Here is the first commit for the responsive implementation.

Upvotes: 0

Luis Serrano
Luis Serrano

Reputation: 131

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.

Upvotes: 0

Adrian Trainor
Adrian Trainor

Reputation: 257

   <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.

Upvotes: 3

Adrian Trainor
Adrian Trainor

Reputation: 257

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.

Upvotes: 0

Related Questions