Animation (déplacement) de boutons ASP
Bonjour,
Pour mon site réalisé en ASP.Net je souhaite que lorsque le visiteur clique sur un bouton, d'autres boutons se déplacent, mais cela ne fonctionne pas, j'ai donc développé la petite appli de test dont voici le code.
Il y a 2 boutons ASP, le but est que lorsque je clique sur Button2 alors Button1 se déplace vers le bas suivant 2 positions.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <style>
#Button1 {
position: absolute;
width: 100px;
left: 0px;
top: 0px;
}
#Button2 {
position: absolute;
width: 100px;
left: 100px;
top: 0px;
}
</style> |
1ere solution en code behind qui ne fonctionne pas (rien ne se passe) et par la suite j'ai essayé d'ajouter des Thread.Sleep(2000) mais ce n'est pas mieux:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style>
.pos1 {
position: absolute;
left: 0px;
top: 100px;
}
.pos2 {
position: absolute;
left: 0px;
top: 200px;
}
</style>
<asp:Button ID="Button1" runat="server" Text="Button 1" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_Click" /> |
Code:
1
2
3
4
5
| protected void Button2_Click(object sender, EventArgs e)
{
this.Button1.CssClass = "pos1";
this.Button1.CssClass = "pos2";
} |
2e solution en javascript qui ne fonctionne pas (Button1 se déplace très rapidement et revient en position) :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script language="javascript" type="text/javascript">
function deplacer() {
go_pos1();
setTimeout("go_pos2()", 1000);
}
function go_pos1() {
document.getElementById("Button1").style.top = "100px";
}
function go_pos2() {
document.getElementById("Button1").style.top = "200px";
}
</script>
<asp:Button ID="Button1" runat="server" Text="Button 1" />
<asp:Button ID="Button2" runat="server" Text="Button 2" OnClientClick="deplacer()"/> |
3e solution qui fonctionne avec le même javascript que solution 2 et un Button3 qui est un bouton HTML:
Code:
1
2
3
4
5
6
7
8
9
10
| <style>
#Button3 {
position: absolute;
width: 100px;
left: 200px;
top: 0px;
}
</style>
<input id="Button3" type="button" runat="server" value="Button3" onclick="deplacer()" /> |
Conclusion:
Cela fonctionne si le bouton qui lance la commande est un bouton HTML, mais pas si c'est un bouton ASP.
Le problème est que l’ensemble de mon site est fait avec des boutons ASP et donc tout refaire avec des boutons HTML représente un travail colossal.
Merci d'avance pour vos conseils.
