Discussion :

[Zebulon777]

Salut, salut,

je reviens vers vous car j'ai de nouveau un truc bizarre : j'ai 2 boutons image qui apparaissent bien en local, mais plus du tout quand je suis sur le serveur.



Voici le code et le CSS :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<TD colspan="3" align="center">
  <DIV align="center" class="DivProgress">
	<P>Transparence :<BR/>
	  <PROGRESS id="J_Transparence" value="" max="1"></PROGRESS>
	  <SPAN id="C_Pct_Trans"></SPAN>
	  <INPUT type="button" class="BoutonProgressMoins" onClick="Modif_Transparence(-0.05);" >
	  <INPUT type="button" class="BoutonProgressPlus" onClick="Modif_Transparence(0.05);" >
	</P>
  </DIV>
</TD>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
/* Style de la barre de progression de transparence */
.DivProgress {
	font-size:10px;
	font-family:Arial;
	font-weight:normal;
	color:#ffffff;
	border: nona;
}
 
.BoutonProgressMoins {
	background:url(images/Moins.png) no-repeat;
	border:none;
	text-align:center;
	vertical-align:middle;
}
.BoutonProgressPlus {
	background:url(images/Plus.png) no-repeat;
	border:none;
	text-align:center;
	vertical-align:middle;
}
 
/*.BoutonProgress {
	width:5px;
	height:20px;
	font-size:9px;
	font-family:Arial;
	font-weight:normal;
	color:#000000;
	text-align: center;
}*/
 
#progress{
    width: 100px;
    margin: auto;
}
 
progress{
    display: inline-block;
    width: 100px;
    height: 10px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
/*
    padding: 3px 3px 2px 3px;
    background: #333; 
    background: -webkit-linear-gradient(#2d2d2d,#444);
    background:    -moz-linear-gradient(#2d2d2d,#444);
    background:      -o-linear-gradient(#2d2d2d,#444);
    background:         linear-gradient(#2d2d2d,#444);
    border: 1px solid rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.2);   
    border-radius: 15px;
*/}

Je suis sur que ça doit être un truc tout bête, mais je passe à côté.

Je compte sur vous.

Merci d'avance.

[Zebulon777]

Bon alors là, je fais un gros gros gros OUPS !

J'avais tout bêtement oublié les guillemets !!!

Désolé pour le dérangement

(Soit c'est la fatigue, soit c'est le vieillerie )

[NoSmoking]

Bonjour,
tu utilises des images pour afficher des un ➕ et un ➖ c'est le grand luxe !

On utilise un <button> pour gérer une action en javascript hors d'un <form>, ce qui semble le cas.

[Zebulon777]

Je ne connaissais pas la balise <button>, mais par contre, je suis bien dans une form, donc il vaut mieux faire quoi ?

[NoSmoking]

Dans ton cas effectivement l'un ou l'autre ne ferais pas franchement de différence.

En regardant de plus près par contre on constate que tu pourrais avantageusement remplacer ton élément <progress> par un élément <input type="range">.

[Zebulon777]

Ha oui, effectivement, je ne connaissais pas, mais je vais essayer.
Merci.

[Zebulon777]

Je viens d'essayer et effectivement, ça répond encore mieux à ce qu'on attend.
Super merci.

Par contre, 2 petites questions :
- impossible d'affiche le MIN et le MAX sur la jauge
- je n'arrive pas à récupérer la valeur sélectionnée

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<DIV align="center" class="DivProgress">
  Transparence 2 :<br/>
  <INPUT type="range" name="d" min="0" max="1" step="0.05" value="0.50" ONINPUT="result4.value=d.value"/>
  <OUTPUT name="result4">--</OUTPUT>
</DIV>

[Zebulon777]

Bon, il est vrai que la discussion va évoluer, mais maintenant que tu m'as fait gouté à ce range, j'y adhère totalement.
C'est, effectivement, exactement ce que l'on veut.
Mais par contre, en JS, impossible d'en récupérer et d'en modifier la valeur dynamiquement.

Volila où j'en suis :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
              <DIV align="center" class="DivProgress">
                  <P>Transparence 2 :<BR/>
                  <INPUT class="Progress2" type="range" name="C_PctTrans2" min="0" max="1" step="0.05" value="0.50" ONINPUT="C_ValPctTrans2.value=C_PctTrans2.value"/>
                  <br/>
                  <OUTPUT class="DivProgress" name="C_ValPctTrans2">--</OUTPUT>
                  </P>
              </DIV>
...
...
...
document.getElementsByName("C_PctTrans2").innerHTML = G_TRANSPARENCE_TRAJ;
 
document.getElementsByName("C_ValPctTrans2").innerHTML=document.getElementsByName("C_PctTrans2").value;

Ca doit encore être un truc tout bête, mais je passe à côté...

[Zebulon777]

J'ai créé un nouveau sujet pour ne pas faire de HS dans celui-ci : http://www.developpez.net/forums/d16...t/#post8759233