18010 sujets

Questions générales et questions de débutants

Progress bar html javascript css

"Coucou, j'ai suivis le tuto pour me créer ma propre fusée arianne, mais malheureusement elle ne marche pas, c'est la cinquième fois qu'elle explose, j'ai perdu 2 chiens et 4 escargots.
Pourquoi elle marche pas ?"

Tout ca pour dire, que sans plus d'infos, comme ton code, je ne voie pas comment on pourrait t'aider.
remarque: je travaille avec le framework symfony2

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8" />
        <title>Progress bar</title>
    </head>

{% block stylesheets %}
 
    <link href="{{ asset('bundles/sifastform/css/progressbar.css') }}" type="text/css" rel="stylesheet" />
{% endblock %}


{% block javascripts %}
    
        
{% javascripts '@SifastFormBundle/Resources/public/js/progressbar.js' %}
    <script type="text/javascript" src="{{ asset('bundles/sifastform/js/progressbar.js') }}"></script>
{% endjavascripts %}
    
  {% javascripts  %}
        <script type="text/javascript">
            function setValue() {
            var progressBar = new ProgressBar("progresBarContainer", "progresBarFill", 0, 100);
            var currentValue = $("#inputText").val();
            var progressWidth = progressBar.GetWidth(currentValue);
            progressBar.fillElement.animate({ width: progressWidth }, 500, "easeOutCubic", null);
        }
        
        </script>
   {% endjavascripts %}
{% endblock %}

        
<body>
     
<div id = "conteneur"> 
         
<form  action="{{ path('sifastform_progressbar') }}" method="post" >

<div id="progresBarContainer" class="progressBarContainerClass">
        <div id="progresBarFill" class="progressBarClass">
        </div>
</div>
    
    <input type="text" id="inputText" />
    <input type="button" onclick="setValue()" />
   
    
</form>
</div>

</body>
    
        
</html>

//////////////////////////////////////////////////////
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */



function ProgressBar(idContainer, idFill, minValue, maxValue) {
    //case 1 from minus to plus
    //case 2 from minus to minus
    //case 3 from plus to plus 
    //case 1,2 are not treated here 

    this.maxValue = maxValue;
    this.minValue = minValue;
    this.idContainer = idContainer;
    this.width = $("#" + idContainer).width();
    this.fillElement = $("#" + idFill);

    this.GetWidth = function (currentValue) {
        ///
        ///		Calculate the progressBarFill width
        ///
        ///	

        //currentValue is smaller or equal to 0
        if (currentValue <= this.minValue) {
            return this.minValue * (this.width / 100); ;
        }

        //currentValue is smaller then maximum
        if (currentValue < this.maxValue) {
            return currentValue * (this.width / 100);
        } //currentValue is bigger then maximum
        else {
            return this.maxValue * (this.width / 100);
        }
    };
}

/////////////////////////////////////

.progressBarContainerClass
{
 height: 25px;
 width: 250px;
 border: 1px solid black;
 border-radius: 3px 3px 3px 3px;
 -moz-border-radius: 3px 3px 3px 3px;
 -webkit-box-shadow: 0px 0px 5px #999;
 -moz-box-shadow: 0px 0px 5px #999;
 box-shadow:0px 0px 3px 1px rgba(0,0,0,0.3);
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #D8D6D5), color-stop(0.8, #999999));
 background: -moz-linear-gradient(top, #D8D6D5 20%, #999999 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D6D5', endColorstr='#999999');
}
.progressBarClass
{
 display: inline-block;
 border: 1px solid none;
 height: 100%;
 border-radius: 2px 2px 2px 2px;
 -moz-border-radius: 2px 2px 2px 2px;
 background: -webkit-gradient(linear, center top, center bottom, color-stop(0.2, #514BF2), color-stop(0.8, #5142BF));
 background: -moz-linear-gradient(top, #514BF2 20%, #5142BF 80%);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#514BF2', endColorstr='#5142BF');
}

/////////////////////////////////////////////////////////////////

s'il vous plait aidez-moi Smiley confused
Modifié par rim2004m (26 Mar 2014 - 15:15)
Sujet clos
Aller à