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!

Solution

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