Bootstrap 4- La barre de progression ne fonctionne pas sur le navigateur

J'utilise Bootstrap v4.0.0-alpha.6. Le code que je veux exécuter fonctionne parfaitement sur js fiddle mais une fois que je l'ai exécuté sur le serveur, il n'affiche pas la barre de progression. Des idées sur où je vais mal?Bootstrap 4- La barre de progression ne fonctionne pas sur le navigateur

Voici un lien vers mon JS Fiddle

Le code ci-dessous est une page php qui a bootstrap.

<!DOCTYPE HTML> 

<html> 

<head> 


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
<script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 

<script> 


var progressBar = $('.progress-bar'); 
var percentVal = 0; 


window.setInterval(function(){ 
    percentVal += 20; 
    progressBar.css("width", percentVal+ '%').attr("aria-valuenow", percentVal+ '%').text(percentVal+ '%'); 

    if (percentVal == 100) 
    { 
     var link = document.getElementById('nav-ask'); 
link.style.display = 'none' 
    } 

}, 500); 
</script> 

</head> 

<body> 



    <div class="row"> 
     <div class="col-xs-8"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div>

Source

2017-08-28 user3402248

Vérifiez la console et dites-nous ce qu'elle affiche – coderredoc

La console est vide après le chargement de la page. Ne montre aucune erreur – user3402248

vérifier la réponse .. maintenant ça marche – coderredoc

Lorsque votre script est exécuté, la page n'est pas prête. Il suffit donc de mettre le script ci-dessous après le chargement du HTML. Alors ça marche.

... 
<div class="row"> 
     <div class="col-md-12"> 
      <div class="progress"id="nav-ask"> 
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> 
         0% 
        </div> 
       </div> 
       </div> 
       </div> 

<script> 
Your script here. 
</script> 
</body>

J'ai fait la taille de col-md-12 afin que je puisse le voir correctement.

Autre solution: -

que vous utilisez l'utilisation jquery

$(document).ready(function(){ 
    your script 
})

Cela vous évite de placer votre code en bas de la page pour le faire fonctionner.

Source

2017-08-28 20:29:10 coderredoc

Bootstrap 4- La barre de progression ne fonctionne pas sur le navigateur

Répondre

Questions connexes