11521 sujets

JavaScript, DOM et API Web HTML5

Résultat des inputs avec counter

il y a quelques instants
Bonjour,

j'ai un gros soucis, j'aimerais rentrer des valeurs dans chacuns des inputs et que ses valeurs marcher avec le counter :
le code n'est pas héberger mais j'ai utilisé le http://bfintal.github.io/Counter-Up/demo/demo.html
Voici le code :
<html lang="fr">
<head>
  <meta charset="utf-8">

  <title>Counter Up Demo</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
    
    
    
    
    <div>
        <span class="counter" style="display: inline-block; width: 32%">37</span>
        <span class="counter" style="display: inline-block; width: 32%">356</span>
        <span class="counter" style="display: inline-block; width: 32%">1345</span>
    </div>

    <!-- test -->
    <input type="number" name="french" id="myNumber">

  <p>Click the button to display the number of the number field.</p>

  <button onclick="myFunction()">Envoyer</button>

  <p><strong>Note:</strong> input elements with type="number" are not supported in IE 9 and earlier versions.</p>

  <p class="counter" value="counter" id="demo"></p>


  <script>
  function myFunction() {
      var x = document.getElementById("myNumber").value;
      document.getElementById("demo").innerHTML = x;
  }
  </script>
    <!-- end-test -->


    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>
Modérateur
Et l'eau,

Je t'ai fait un petit correctif des petits soucis que tu avais :
- Ajout du doctype html5
- L'élément <p> n'a pas d'attribut value.
- Je t'ai enlevé le portage de IE9. Plus personne ne l'utilise et il n'est plus suivi par µ$oft depuis pas mal d'années maintenant....
- Je te conseille vivement que tu gardes une cohérence d'écriture. Ne mélange pas les " et les ' . Smiley cligne
- je t'ai laissé tes styles en ligne, mais sache que c'est pas bien. C'est vraiment pas bien du tout !

Quels sont les fichiers à utiliser ?
- jQuery
- waypoints
- counterup

Aussi, j'ai gardé la syntaxe jQuery puisque tu l'utilises : 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Counter Up Demo</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div>
        <span class="counter" style="display: inline-block; width: 32%">37</span>
        <span class="counter" style="display: inline-block; width: 32%">356</span>
        <span class="counter" style="display: inline-block; width: 32%">1345</span>
    </div>
    <!-- test -->
    <input type="number" name="french" id="myNumber">
  <p>Click the button to display the number of the number field.</p>
  <button id="monButton">Envoyer</button>
  <p><strong>Note:</strong> input elements with type="number" are not supported in IE 9 and earlier versions.</p>
  <p class="counter" id="demo"></p>
    <!-- end-test -->
    <script src="js/jquery.min.js"></script>
    <script src="js/waypoints.min.js"></script>
    <script src="js/jquery.counterup.min.js"></script>
    <script>
        $(function(){
            $('#monButton').on('click', function(){
                $('#demo').html( $('#myNumber').val() );
                $('.counter').counterUp();
            });
        });
    </script>
</body>
</html>

Modifié par niuxe (07 May 2018 - 20:54)
C'est vrai que ce style en ligne ça pique les yeux. Je n'y suis plus habitué.
Avec cette mauvaise manière, on perd un pourcent.
Au cas où tu n''as pas entendu parler de flexbox :
https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Counter Up Demo</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
  .dashboard { display: flex; }
  .dashboard > div { margin: 0.2rem 0.4rem; }
</style>
</head>
<body>
    <div class="dashboard">
        <div id="counter-1" class="counter">37</div>
        <div id="counter-2" class="counter">356</div>
        <div id="counter-3" class="counter">1345</div>
    </div>
    <!-- And So on ....  -->

Reste à savoir si JQuery s'impose pour si peu ?
Bonjour bazooka07,

bazooka07 a écrit :
C'est vrai que ce style en ligne ça pique les yeux. Je n'y suis plus habitué.
Avec cette mauvaise manière, on perd un pourcent...

Perso, cela me choque pas (pour ce cas là)
hormis le fait qu'il c'est trompé dans les % (un 33.33333% fait l’affaire) et qu'il a tout mis dans un attribut style;
cette solution reste pour moi à priori la meilleur au niveau compatibilité navigateur je dirais 100%, contrairement au flexbox.
Modérateur
aliasdmc a écrit :
Perso, cela me choque pas (pour ce cas là)

Quand dans un projet où il y a X fichiers, que tu dois déboguer parce que le prédécesseur a fait de la m**** et que tu t'aperçois qu'il a mis des styles en ligne (or tu penses que c'est le JS qui ajoute la valeur de l'attribut style), tu pètes les plombs....

Petite anecdote :
Le super développeur junior (voulant se faire augmenter au bout de 2 mois) a développé un lightbox. Sa page est envoyée en preprod puis je reçois un skype d'une collègue me disant que la lightbox est totalement décalée sur son écran (elle n'était pas centrée). De mon côté, je regarde et rien de bien sérieux sur mon écran. Elle m'affirme que c'est explosé de son côté (à l'époque, le web responsive n'avait pas lieu). Je vais à son écran et constate les dégâts. Je reviens à mon bureau, importe le projet et essaie de déboguer son script. C'est seulement au bout de quelques minutes que je m’aperçois qu'il avait mis en dur les styles en ligne. Aussi, mélanger le contenu et la mise en forme, c'est pas bien. Paye ta maintenance....
Modifié par niuxe (08 May 2018 - 16:18)
Bonjour niuxe,

Pas de problème de ce coté là, c'est bien pour cela que j'ai mis "hormis le fait qu'il c'est trompé ... et qu'il a tout mis dans un attribut style".

Quand je dis "Perso, cela me choque pas (pour ce cas là)" :
Je parlais juste du fait qu'il utilise des inline-block avec des % plutôt que des flex
Mais peut être que bazooka07 en disant "ce style en ligne " voulait dire dans l'attribut style ?
Mais bon, c'est juste mon point de vue.
Modifié par aliasdmc (08 May 2018 - 16:41)
aliasdmc a écrit :
Bonjour niuxe,
Mais peut être que bazooka07 en disant "ce style en ligne " voulait dire dans l'attribut style ?
Mais bon, c'est juste mon point de vue.

Exactement les attributs styles dans les balises (tags) sont à bannir

On peut éventuellement ajouter des règles CSS dans la partie <head> de la page quand on veut faire une application one-page ou une démo.

Mais en règle générale, il vaut mieux mettre un lien <link> vers une feuille de style externe et laisser les graphistes jouer avec.
Modérateur
bazooka07 a écrit :

On peut éventuellement ajouter des règles CSS dans la partie <head> de la page quand on veut faire une application one-page ou une démo.


Je dirai que c'est une des exception. Il y a aussi un cas intéressant où tu peux rajouter ta petite balise style dans le head. L'application a deux multiples feuilles de styles et le template où tu travailles n'a que des blocs où tu ne trouves pas dans 'd'autres endroits du site. Pour éviter des chargements supplémentaires, tu fais tes petits styles dans ton head.

Mais normalement, ce genre de sites/applications avec ce genres de structures, ça n'existe plus puisque le SASS résolve le nombre de chargement par un seul fichier ou deux.
Modifié par niuxe (12 May 2018 - 00:53)
Sujet clos
Aller à