Как настроить и настроить размер аналоговых часов jqwidget?

Question

Я хотел бы установить высоту и ширину часов, чтобы заполнить следующий html td в соответствии с процентными значениями ширины (потому что часы должны иметь ту же ширину и высоту, что и круг). Кроме того, часы не центрируются, когда я пытаюсь использовать центральные теги. Может ли кто-нибудь рекомендовать другой способ настроить размер часов на основе td и центрировать часы.

Спасибо заранее, и, пожалуйста, дайте мне знать, если мне нужно объяснить, был ли я слишком расплывчатым!

Вот ссылка на код часов демо от jqwidgets: http://jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm#demos/jqxgauge/gauge-clock.htm

HTML

<td colspan="1" style="width: 26%; height: 250px;";> 
    <center> 
    <div id="clock" style="position: relative; height:250px;"> 
<div style="position: absolute; left: 0px; top: 0px;" id='seconds'></div> 
<div style="position: absolute; left: 0px; top: 0px;" id='hours'></div> 
    <div style="position: absolute; left: 0px; top: 0px;" id='minutes'></div> 
    </div> 
    </center> 
</td> 

Javascript

//adding the clock 

     var hours = new Date().getHours(), 
     minutes = new Date().getMinutes(), 
     seconds = new Date().getSeconds(), 
     digits = { 
      1: 'I', 
      2: 'II', 
      3: 'III', 
      4: 'IV', 
      5: 'V', 
      6: 'VI', 
      7: 'VII', 
      8: 'VIII', 
      9: 'IX', 
      10: 'X', 
      11: 'XI', 
      12: 'XII' 
     }; 
    $('#minutes').jqxGauge({ 
     ticksMinor: { visible: false }, 
     ticksMajor: { visible: false }, 
     labels: { visible: false }, 
     animationDuration: 0, 
     min: 0, max: 12, 
     border: { style: { fill: 'none', stroke: 'none'}, showGradient: false }, 
     caption: { value: '' }, 
     colorScheme: 'scheme05', 
     style: { fill: 'none', stroke: 'none' }, 
     pointer: { length: '70%', width: '2%' }, 
     cap: { style: { fill: '#249dd6', stroke: '#249dd6'} }, 
     startAngle: -90, 
     endAngle: 270, 
     value: (minutes/60) * 12 
    }); 
    $('#hours').jqxGauge({ 
     ticksMinor: { visible: false }, 
     ticksMajor: { visible: false }, 
     labels: { visible: false }, 
     animationDuration: 0, 
     min: 0, max: 12, 
     caption: { value: '' }, 
     border: { style: { fill: 'none', stroke: 'none' }, showGradient: false }, 
     colorScheme: 'scheme05', 
     pointer: { length: '50%', width: '3%' }, 
     style: { fill: 'none', stroke: 'none' }, 
     value: hours % 12 + (minutes/60 * 11)/12, 
     startAngle: -90, 
     endAngle: 270 
    }); 
    $('#seconds').jqxGauge({ 
     ticksMinor: { 
      interval: 0.2, 
      size: '3%', 
      style: { 
       fill: '#aaaaaa', 
       stroke: '#aaaaaa', 
       'stroke-width': '2px' 
      } 
     }, 
     ticksMajor: { 
      interval: 1, 
      size: '8%', 
      style: { 
       fill: '#aaaaaa', 
       stroke: '#aaaaaa', 
       'stroke-width': '2px' 
      } 
     }, 
     ticksDistance: '10%', 
     startAngle: -90, 
     endAngle: 270, 
     labels: { 
      distance: '28%', 
      interval: 1, 
      formatValue: function (val) { 
       if (val == 0) { 
        return ''; 
       } 
       return digits[val]; 
      } 
     }, 
     pointer: { length: '80%', width: '1.7%' }, 
     ranges: [], 
     caption: { value: 'Time', offset: [0, -30] }, 
     animationDuration: 0, min: 0, max: 12, 
     border: { fill: 'none', stroke: 'none' }, 
     colorScheme: 'scheme05', 
     style: { fill: '#ffffff', stroke: '#cccccc' }, 
     value: (seconds/60) * 12 
    }); 
    setInterval(function() { 
     var seconds = $('#seconds').jqxGauge('value'), 
      minutes = $('#minutes').jqxGauge('value'), 
      hours = $('#hours').jqxGauge('value'), 
      ratio = 12/60; 
     seconds += ratio; 
     if (seconds > 12) { 
      seconds = ratio; 
     } 
     $('#seconds').jqxGauge('value', seconds); 
     if (seconds === ratio) { 
      minutes += ratio; 
      if (minutes >= 12) { 
       minutes = ratio; 
      } 
      $('#minutes').jqxGauge('value', minutes); 
      $('#minutes').jqxGauge('value', minutes); 
      hours += 1/60; 
      if (hours > 12) { 
       hours = 1/60; 
      } 
      $('#hours').jqxGauge('value', hours); 
     } 
    }, 1000); 





    //end of clock code 

Answer 1

<center> тег в основном игнорируется, поскольку #clock ДИВ будет принимать всю ширину td.

Try ... удаление <center> и </center> и положить ...

text-align:center; 

... в стиле #clock дел.

Я не могу сказать, что это сработает, так как у меня нет доступа к нему, работающего с jqxGauge, работающим на странице.

UPDATE:

jqxGauge имеет опции для ширины и высоты ...

$('#gauge').jqxGauge({ width: '20%', height: '30%', radius: '50%' });