Bonjour, j'ai un template que j'essaie de modifier, mais la je suis dans un problème plus complexe pour moi. Si quelqu'un peux m'aider, ça serait apprécié! J'ai un javascript que j'y comprend rien qui retourne une valeurs dans mon code html pour un chiffre en progression qui monte quand on arrive sur la section de la page... Je peux mettre un chiffre pour la valeur final, mais j'aimerais ajouté un symbole à la fin comme un signe de dollars ou un '%' retourné directement par le javascript.
 
code html :
 
 <!-- Fact -->
    <div class="fact" data-perc="149900">
     <!-- Fact Tag -->
     <h1 class="factor"></h1>
     <!-- Fact Name -->
     <h4>
      prix de départ taxes inc.
     </h4>
    </div>
    <!-- End Fact -->
javascript :
 
 
 jQuery(function() {
   
  $(".fact" ).appear(function(){
   $('.fact').each(function(){
          dataperc = $(this).attr('data-perc'),
    $(this).find('.factor').delay(6000).countTo({
           from: 0,
           to: dataperc,
           speed: 3000,
           refreshInterval: 50,
             
          });  
   });
  });
 });
 
(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});
 
        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;
 
        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);
 
            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));
 
                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }
 
                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;
 
                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };
 
    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
})(jQuery);
 
 
Merci pour votre aide.

Tu peux essayer en remplacant la ligne
$(_this).html(value.toFixed(options.decimals));
 
par
 
$(_this).html(value.toFixed(options.decimals) + "%" ); // ou le texte que tu veux
 
Si tu veux qqch de dynamique tu peux modifier le plugin "countTo" pour celà :
(pas testé )

Merci pour la réponse rapide, j'avais essayé de faire ça mais en ajoutant un .text('') . Merci encore pour la réponse rapide ça fonctionne!
 

Tant qu'a abuser de ta générosité, pourrais-tu me dire si je peux facilement quand j'appel à partir de ma page web en html cette fonction par ce bloc
<!-- Fact -->
    <div class="fact" data-perc="149900">
     <!-- Fact Tag -->
     <h1 class="factor"></h1>
     <!-- Fact Name -->
     <h4>
      prix de départ taxes inc.
     </h4>
    </div>
    <!-- End Fact -->  
lui passé un paramètre pour ajouté ce fameux signe, car certain on un signe de dollars et d'autre n'ont rien.. Alors je suis un peu prit.. J'ai essayer de copier coller la fonction en modifiant certain paramètre, mais non... Je suis pas encore rendu la, et je dois satisfaire un client et ça me donne mal à la tête cette simple demande, d'habitude je n'ai pas à aller modifier les .js, c'est ma faiblesse...
 
J'ai regarder comment tu as modifier la fonction pour ajouté l'option à la fin, mais comment lui dire à partir du html
 
Merci
 
Marc
 
 

Ton plugin ("countTo" ) récupere une valeur dans le html à partir de l'attribut data-perc, il suffit de partir du même principe et ce sans modifier le code actuel (à part un oubli de ma part dans la function qui se déclenche au chargement de la page) :
 

Té fort! Je test ça!  

Ca fonctionne pas, est-ce que tu vois ce que j'ai fait de mauvais ? Le javascript ne gèle pas, mais aucun caractère...
 
 
HTML :
 
 <!-- Fact -->
    <div class="fact" data-perc="149900" data-percChar="$">
     <!-- Fact Tag -->
     <h1 class="factor"></h1>
     <!-- Fact Name -->
     <h4>
      prix de départ taxes inc.
     </h4>
    </div>
    <!-- End Fact -->
 
 
 
 
 
JAVASCRIPT :
 
/* ==============================================
COUNT FACTORS
=============================================== */  
   
 jQuery(function() {
   
  $(".fact" ).appear(function(){
   $('.fact').each(function(){
          dataperc = $(this).attr('data-perc'),
    $(this).find('.factor').delay(6000).countTo({
           from: 0,
           to: dataperc,
           speed: 3000,
           refreshInterval: 50,
             
          });  
   });
  });
 });
 
(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});
 
        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;
 
        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);
 
            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals) + options.appendChar);
 
                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }
 
                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;
 
                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };
 
    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
        appendChar: '',
    };
})(jQuery);
 
    jQuery (function ($)  // j'ai oublié de passer jQuery en param pour que ca soit carré
        {
         var $fact = $(".fact" );
         fact.appear (function ()
          {
           fact.each (function ()
            {
             $(this)
              .find ('.factor')
              .delay (6000)
              .countTo ({
               from:   0,
               to:    $(this).attr ('data-perc'),
               speed:   3000,
               refreshInterval:50,
               appendChar:  $(this).attr ('data-percChar') // *** LE TEXTE DE TON CHOIX ***
              });
            });
          });
        });
 
 

Tu as à priori rajouté ca :

 
Je ne sais pas si t'as capté, mais je l'avais remplacé par ca :

 
Le premier code ne prend pas du tout en compte le data-percChar. Pour info, ca se déclenche lorsque la page est chargée, c'est l'équivalent de $(document).ready (function () { /* ... */ })
 
Tu disposes dans ton navigateur du écran de dev en appuyant sur F12. En cas d'erreur JS, tu le verras la dedans.
Si tu es sur Firefox, tu peux même y placer des points d'arrets (sur Chrome aussi je suppose, mais j'utilise pas).
Tu peux dans ton code ajouter des console.log (<UNE_VARIABLE> ) pour afficher le contenu... d'une variable (par exemple, dans la boucle fact.each, tu peux ajouter un console.log ($(this).attr ('data-percChar')).
De plus, tu peux aussi regarder la doc de jQuery, je pense que ca sera plus clair