bonjour,
j'ai suivi ce lien http://diaconu13.wordpress.com/2011/03/26/simple-html-progress-bar-using-css3-and-javascript/
alors j'ai obtenu le premier résultat mais en cliquant sur le bouton rien ne change.
s'il vous plait quel est mon problème?
aidez-moi le plutôt possible, merci d'avance
4 réponses
progressbar.html.twig
<!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 %}
<script type="text/javascript">
function setValue() {
var progressBar = new ProgressBar("progresBarContainer", "progresBarFill", 0, 100);
var currentValue = $("#inputText");
var progressWidth = progressBar.GetWidth(currentValue);
progressBar.fillElement.animate({ width: progressWidth }, 500, "easeOutCubic", null);
}
</script>
{% 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="javascript:setValue()"/>
</form>
</div>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
progressbar.css
.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');
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
progressbar.js
/*
* 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);
}
};
}
/////////////////////////////////////////////////////////////////////////////////////////////
je travaille avec le framework symfony2.
s'il vous plait aidez-moi le plutôt possible.
merci d'avance
{% block javascripts %} C'est pas de l'ASP ça ?
Est ce que tu récupères quelque chose (une erreur en l’occurrence) dans le debuger ?
{% block javascripts %} c'est un syntaxe approprié au framework symfony.
En cliquant sur le bouton, rien ne change, pas d'erreur..