Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1240 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Question d'un débutant

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Question d'un débutant

n°2259546
ciocemar
ciocemar
Posté le 02-06-2015 à 22:36:48  profilanswer
 

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.


Message édité par ciocemar le 02-06-2015 à 22:39:07
mood
Publicité
Posté le 02-06-2015 à 22:36:48  profilanswer
 

n°2259547
SICKofitAL​L
misanthrope
Posté le 02-06-2015 à 23:10:01  profilanswer
 

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é :o )

Code :
  1. (function ($)
  2. {
  3.  $.fn.countTo = function(options)
  4.   {
  5.    // merge the default plugin settings with the custom options
  6.    options = $.extend({}, $.fn.countTo.defaults, options || {});
  7.    // how many times to update the value, and how much to increment the value on each update
  8.    var
  9.     loops = Math.ceil (options.speed / options.refreshInterval),
  10.     increment = (options.to - options.from) / loops;
  11.    return $(this).each (function()
  12.     {
  13.      var
  14.       updateTimer = function ()
  15.        {
  16.         value += increment;
  17.         loopCount++;
  18.         $(me).html (value.toFixed (options.decimals) + options.appendChar); // *** LA FAMEUSE OPTION ***
  19.         if (typeof (options.onUpdate) == 'function')
  20.         {
  21.          options.onUpdate.call (me, value);
  22.         }
  23.         if (loopCount >= loops)
  24.         {
  25.          clearInterval (interval);
  26.          value = options.to;
  27.          if (typeof (options.onComplete) == 'function')
  28.          {
  29.           options.onComplete.call (me, value);
  30.          }
  31.         }
  32.        },
  33.       me = this,
  34.       loopCount = 0,
  35.       value = options.from,
  36.       interval = setInterval (updateTimer, options.refreshInterval);
  37.     });
  38.   };
  39.  $.fn.countTo.defaults = {
  40.   from:   0,  // the number the element should start at
  41.   to:    100,  // the number the element should end at
  42.   speed:   1000,  // how long it should take to count between the target numbers
  43.   refreshInterval:100,  // how often the element should be updated
  44.   decimals:  0,  // the number of decimal places to show
  45.   onUpdate:  null,  // callback method for every time the element is updated,
  46.   onComplete:  null,  // callback method for when the element finishes updating
  47.   appendChar:  '' // *** CE QUE TU VEUX AJOUTER A LA FIN ***
  48.  };
  49. }) (jQuery);
  50. jQuery (function ()
  51. {
  52.  var $fact = $(".fact" );
  53.  fact.appear (function ()
  54.   {
  55.    fact.each (function ()
  56.     {
  57.      $(this)
  58.       .find ('.factor')
  59.       .delay (6000)
  60.       .countTo ({
  61.        from:   0,
  62.        to:    $(this).attr ('data-perc'),
  63.        speed:   3000,
  64.        refreshInterval:50,
  65.        appendChar:  '%' // *** LE TEXTE DE TON CHOIX ***
  66.       });
  67.     });
  68.   });
  69. });


---------------
We deserve everything that's coming...
n°2259549
ciocemar
ciocemar
Posté le 02-06-2015 à 23:51:33  profilanswer
 

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!
 

SICKofitALL a écrit :

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é :o )

Code :
  1. (function ($)
  2. {
  3.  $.fn.countTo = function(options)
  4.   {
  5.    // merge the default plugin settings with the custom options
  6.    options = $.extend({}, $.fn.countTo.defaults, options || {});
  7.    // how many times to update the value, and how much to increment the value on each update
  8.    var
  9.     loops = Math.ceil (options.speed / options.refreshInterval),
  10.     increment = (options.to - options.from) / loops;
  11.    return $(this).each (function()
  12.     {
  13.      var
  14.       updateTimer = function ()
  15.        {
  16.         value += increment;
  17.         loopCount++;
  18.         $(me).html (value.toFixed (options.decimals) + options.appendChar); // *** LA FAMEUSE OPTION ***
  19.         if (typeof (options.onUpdate) == 'function')
  20.         {
  21.          options.onUpdate.call (me, value);
  22.         }
  23.         if (loopCount >= loops)
  24.         {
  25.          clearInterval (interval);
  26.          value = options.to;
  27.          if (typeof (options.onComplete) == 'function')
  28.          {
  29.           options.onComplete.call (me, value);
  30.          }
  31.         }
  32.        },
  33.       me = this,
  34.       loopCount = 0,
  35.       value = options.from,
  36.       interval = setInterval (updateTimer, options.refreshInterval);
  37.     });
  38.   };
  39.  $.fn.countTo.defaults = {
  40.   from:   0,  // the number the element should start at
  41.   to:    100,  // the number the element should end at
  42.   speed:   1000,  // how long it should take to count between the target numbers
  43.   refreshInterval:100,  // how often the element should be updated
  44.   decimals:  0,  // the number of decimal places to show
  45.   onUpdate:  null,  // callback method for every time the element is updated,
  46.   onComplete:  null,  // callback method for when the element finishes updating
  47.   appendChar:  '' // *** CE QUE TU VEUX AJOUTER A LA FIN ***
  48.  };
  49. }) (jQuery);
  50. jQuery (function ()
  51. {
  52.  var $fact = $(".fact" );
  53.  fact.appear (function ()
  54.   {
  55.    fact.each (function ()
  56.     {
  57.      $(this)
  58.       .find ('.factor')
  59.       .delay (6000)
  60.       .countTo ({
  61.        from:   0,
  62.        to:    $(this).attr ('data-perc'),
  63.        speed:   3000,
  64.        refreshInterval:50,
  65.        appendChar:  '%' // *** LE TEXTE DE TON CHOIX ***
  66.       });
  67.     });
  68.   });
  69. });



n°2259553
ciocemar
ciocemar
Posté le 03-06-2015 à 06:03:41  profilanswer
 

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
 
 

SICKofitALL a écrit :

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é :o )

Code :
  1. (function ($)
  2. {
  3.  $.fn.countTo = function(options)
  4.   {
  5.    // merge the default plugin settings with the custom options
  6.    options = $.extend({}, $.fn.countTo.defaults, options || {});
  7.    // how many times to update the value, and how much to increment the value on each update
  8.    var
  9.     loops = Math.ceil (options.speed / options.refreshInterval),
  10.     increment = (options.to - options.from) / loops;
  11.    return $(this).each (function()
  12.     {
  13.      var
  14.       updateTimer = function ()
  15.        {
  16.         value += increment;
  17.         loopCount++;
  18.         $(me).html (value.toFixed (options.decimals) + options.appendChar); // *** LA FAMEUSE OPTION ***
  19.         if (typeof (options.onUpdate) == 'function')
  20.         {
  21.          options.onUpdate.call (me, value);
  22.         }
  23.         if (loopCount >= loops)
  24.         {
  25.          clearInterval (interval);
  26.          value = options.to;
  27.          if (typeof (options.onComplete) == 'function')
  28.          {
  29.           options.onComplete.call (me, value);
  30.          }
  31.         }
  32.        },
  33.       me = this,
  34.       loopCount = 0,
  35.       value = options.from,
  36.       interval = setInterval (updateTimer, options.refreshInterval);
  37.     });
  38.   };
  39.  $.fn.countTo.defaults = {
  40.   from:   0,  // the number the element should start at
  41.   to:    100,  // the number the element should end at
  42.   speed:   1000,  // how long it should take to count between the target numbers
  43.   refreshInterval:100,  // how often the element should be updated
  44.   decimals:  0,  // the number of decimal places to show
  45.   onUpdate:  null,  // callback method for every time the element is updated,
  46.   onComplete:  null,  // callback method for when the element finishes updating
  47.   appendChar:  '' // *** CE QUE TU VEUX AJOUTER A LA FIN ***
  48.  };
  49. }) (jQuery);
  50. jQuery (function ()
  51. {
  52.  var $fact = $(".fact" );
  53.  fact.appear (function ()
  54.   {
  55.    fact.each (function ()
  56.     {
  57.      $(this)
  58.       .find ('.factor')
  59.       .delay (6000)
  60.       .countTo ({
  61.        from:   0,
  62.        to:    $(this).attr ('data-perc'),
  63.        speed:   3000,
  64.        refreshInterval:50,
  65.        appendChar:  '%' // *** LE TEXTE DE TON CHOIX ***
  66.       });
  67.     });
  68.   });
  69. });



n°2259616
SICKofitAL​L
misanthrope
Posté le 03-06-2015 à 15:32:41  profilanswer
 

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) :
 

Code :
  1. <!-- Fact -->
  2.     <div class="fact" data-perc="149900" data-percChar="%">
  3.      <!-- Fact Tag -->
  4.      <h1 class="factor"></h1>
  5.      <!-- Fact Name -->
  6.      <h4>
  7.       prix de départ taxes inc.
  8.      </h4>
  9.     </div>
  10.     <!-- End Fact -->


Code :
  1. (function ($)
  2.     {
  3.      $.fn.countTo = function(options)
  4.       {
  5.        // merge the default plugin settings with the custom options
  6.        options = $.extend({}, $.fn.countTo.defaults, options || {});
  7.        // how many times to update the value, and how much to increment the value on each update
  8.        var
  9.         loops = Math.ceil (options.speed / options.refreshInterval),
  10.         increment = (options.to - options.from) / loops;
  11.        return $(this).each (function()
  12.         {
  13.          var
  14.           updateTimer = function ()
  15.            {
  16.             value += increment;
  17.             loopCount++;
  18.             $(me).html (value.toFixed (options.decimals) + options.appendChar); // *** LA FAMEUSE OPTION ***
  19.             if (typeof (options.onUpdate) == 'function')
  20.             {
  21.              options.onUpdate.call (me, value);
  22.             }
  23.             if (loopCount >= loops)
  24.             {
  25.              clearInterval (interval);
  26.              value = options.to;
  27.              if (typeof (options.onComplete) == 'function')
  28.              {
  29.               options.onComplete.call (me, value);
  30.              }
  31.             }
  32.            },
  33.           me = this,
  34.           loopCount = 0,
  35.           value = options.from,
  36.           interval = setInterval (updateTimer, options.refreshInterval);
  37.         });
  38.       };
  39.      $.fn.countTo.defaults = {
  40.       from:   0,  // the number the element should start at
  41.       to:    100,  // the number the element should end at
  42.       speed:   1000,  // how long it should take to count between the target numbers
  43.       refreshInterval:100,  // how often the element should be updated
  44.       decimals:  0,  // the number of decimal places to show
  45.       onUpdate:  null,  // callback method for every time the element is updated,
  46.       onComplete:  null,  // callback method for when the element finishes updating
  47.       appendChar:  '' // *** CE QUE TU VEUX AJOUTER A LA FIN ***
  48.      };
  49.     }) (jQuery);
  50.     jQuery (function ($)  // j'ai oublié de passer jQuery en param pour que ca soit carré
  51.     {
  52.      var $fact = $(".fact" );
  53.      fact.appear (function ()
  54.       {
  55.        fact.each (function ()
  56.         {
  57.          $(this)
  58.           .find ('.factor')
  59.           .delay (6000)
  60.           .countTo ({
  61.            from:   0,
  62.            to:    $(this).attr ('data-perc'),
  63.            speed:   3000,
  64.            refreshInterval:50,
  65.            appendChar:  $(this).attr ('data-percChar') // *** LE TEXTE DE TON CHOIX ***
  66.           });
  67.         });
  68.       });
  69.     });


---------------
We deserve everything that's coming...
n°2259635
ciocemar
ciocemar
Posté le 03-06-2015 à 19:10:45  profilanswer
 

Té fort! Je test ça! :pt1cable:  

n°2259702
ciocemar
ciocemar
Posté le 04-06-2015 à 21:17:09  profilanswer
 

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 ***
              });
            });
          });
        });
 
 

n°2259711
SICKofitAL​L
misanthrope
Posté le 04-06-2015 à 23:04:08  profilanswer
 

Tu as à priori rajouté ca :

Code :
  1. jQuery(function() {
  2.  
  3.   $(".fact" ).appear(function(){
  4.    $('.fact').each(function(){
  5.           dataperc = $(this).attr('data-perc'),
  6.     $(this).find('.factor').delay(6000).countTo({
  7.            from: 0,
  8.            to: dataperc,
  9.            speed: 3000,
  10.            refreshInterval: 50,
  11.            
  12.           }); 
  13.    });
  14.   });
  15. });


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

Code :
  1. jQuery (function ($)  // j'ai oublié de passer jQuery en param pour que ca soit carré
  2.         {
  3.          var $fact = $(".fact" );
  4.          fact.appear (function ()
  5.           {
  6.            fact.each (function ()
  7.             {
  8.              $(this)
  9.               .find ('.factor')
  10.               .delay (6000)
  11.               .countTo ({
  12.                from:   0,
  13.                to:    $(this).attr ('data-perc'),
  14.                speed:   3000,
  15.                refreshInterval:50,
  16.                appendChar:  $(this).attr ('data-percChar') // *** LE TEXTE DE TON CHOIX ***
  17.               });
  18.             });
  19.           });
  20.         });


 
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 ;)


Message édité par SICKofitALL le 04-06-2015 à 23:05:57

---------------
We deserve everything that's coming...

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Question d'un débutant

 

Sujets relatifs
Question ultra débutant Lazarus.Question de débutant, créer petit logiciel de recherche de texte.
Select Case en VBA : question de débutantQuestion de débutant en Ajax
Question encapsulation debutant en Perl [HELP][RESOLU]Debutant en C++, petite question a propos d'un programme
[AS2/Flash] Question de débutant[jquery] Question de débutant...
Question débutant sur errorlevelQuestion simple de débutant
Plus de sujets relatifs à : Question d'un débutant


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR