Afficher un bouton devant un ticket à gratter

Bonjour,

Je travaille sur un ticket de grattage dont la démo est ici :

https://www.fortune-island.com/test_grattage.php

Est-ce que vous savez pourquoi mon bout de code en bas s'affiche à l'écran derrière le ticket à gratter :
ça se voit au chargement. Normalement lorsque le grattage est fait le bouton doit apparaitre mais comme il est derrière le ticket à gratter on le voit pas finalement et ça marche pas

Code:

---

1 2 3 4 5

<div class="text-center" id="validT" name="validT"> <a href="#"> <button type="button" class="btn btn-primary">VALIDER VOTRE TICKET</button> </a> </div>

---

Existe-il éventuellement d'autres scripts plus propre que celui ci pour faire des tickets de grattage avec une fonction simple qui est simplement d'afficher une valeur que php lui transmettra au chargement de la page il ne sert finalement qu'à afficher une valeur de gain au joueur et rien d'autre. Ensuite lorsque le grattage est effectué à plus de 70 % le bouton de validation apparaît et le joueur peut valider et obtenir son gain.
Là déja avec ce script tant qu'on laisse la souris appuyée pendant le grattage ça n'affiche pas le bouton alors que ça devrait c'est assez étrange. Sur mobile j'ai très facilement trouvé un script pour faire du ticket de grattage mais sur pc c'est plus compliqué

Bonjour,
ta construction est osée, mettre un <button> dans un <a> outre que cela n'est pas valide HTML quel est le but recherché ?

Ceci étant, ton problème est plus un problème lié au CSS, ton <button> est en arrière plan alors normal qu'il ne soit pas visible, tu l'as d'ailleurs bien appréhendé, rien à voir donc avec JavaScript.
Néanmoins, tu peux visiblement régler cela dans ta fonction de callback.

Citation:

---

Existe-il éventuellement d'autres scripts plus propre que celui ci pour faire des tickets de grattage

---

Celui-ci semble « propre » pourtant.

Citation:

---

Sur mobile j'ai très facilement trouvé un script pour faire du ticket de grattage mais sur pc c'est plus compliqué

---

L'as-tu essayé sur PC, bien souvent cela fonction sur les deux médias

J'ai modifié le lien dont tu parlais en enlevant le button :

Code:

---

1 2	<div class="text-center" id="validT" name="validT"><a href="#" class="btn btn-primary">VALIDER VOTRE TICKET</a> </div>

---

Je me demande si le bug ne viendrait pas du fait que la div qui est censé contenir le ticket de grattage est vide au départ puis contient le ticket de grattage. Cela devait décaler le lien quand la div se remplit car le lien est supposé se situer en dessous de cette div. Mon idée n'est pas de mettre le lien par dessus le ticket à gratter mais bien en dessous du ticket à gratter. Comment je peux faire ça proprement ?

Citation:

---

Je me demande si le bug ne viendrait pas du fait que la div

---

Il n'y a pas de bug mais un comportement normal suite à l'application de règle CSS.

Ton élément conteneur, <div id="js--sc--container"> présente une animation via une transformation, transform: translateY(100px), et c'est cela qui fait que ton élément est recouvert.

Parce que de base mon bouton devrait être en dessous du ticket à gratter étant donné qu'il est après dans le code HTML on est d'accord ?
Je vais essayer donc de supprimer la transformation dans le css et on verra

J'ai corrigé le css en supprimant la ligne que tu avais signalé et en supprimant aussi la ligne animation move 2s qui je pense était lié. Celà fonctionne désormais. Faut que je réussisse désormais en centrer mon texte affichant le gain en hauteur

Citation:

---

Parce que de base mon bouton devrait être en dessous du ticket à gratter étant donné qu'il est après dans le code HTML on est d'accord ?

---

La transformation fait que ton élément est affiché dans un « autre layer » mais que « son espace initial » est conservé dans son parent et donc n’interfère pas avec ses frères.
C'est un peu comme le positionnement relatif.
Pour test :

Code:

---

<p>Morceau de <span style="position:relative;background:#CDE;left:5em;"> texte en position:relative</span> suivi d'un autre morceau de texte</p>

---