codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Dynamic dial with colour change – radialIndicator.js

    1st September 2018

    Jquery - Tricks

    jquery icon

    Works straight of the box!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
     
      <?php
        $maxrep="964"; // can change depending on top performing (higheest) workers rep
        // get from db
        $halfmaxrep = $maxrep/2;
        ?>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.ondsen.ch/ogp/radialIndicator.js"></script>
       <script>    
       $(document).ready(function(){
      
           $(".progress-bar").each(function() {
          var value = $(this).attr("data");
          $(this).radialIndicator({
              barColor: {
                  0: '#C50606',
                  <?php echo $halfmaxrep ?>: '#E9E900',
                  <?php echo $maxrep ?>: '#43DB00'
              },
              percentage: false,
              roundCorner: true,
               minValue: 0,
            maxValue: <?php echo $maxrep ?>,
              initValue: value
          });
        });
      
      
       });
       </script>
      
    <div class="progress-bar" data="489"></div>
    <div class="progress-bar" data="89"></div>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN