Positonnement d'une DIV
polo
-
Passarinho44 Messages postés 963 Date d'inscription Statut Contributeur Dernière intervention -
Passarinho44 Messages postés 963 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
j'aimerais réaliser un script javascript permettant de faire apparaître une div suite au clic sur un bouton (en faisant apparaitre cette div a l'emplacement du bouton). J'ai bien la div qui apparait en surimpression comme je veux mais impossible de la placer !
Si quelqu'un a une idée :)
Le script
function display(event){
document.getElementById('infos').style.position = "absolute";
document.getElementById('infos').style.position.top = event.clientX;
document.getElementById('infos').style.position.left = event.clientY;
document.getElementById('infos').style.display = "block";
}
le bouton appelant ce script se situe dans un tableau (lui même dans une DIV) :
<input id='btn' type='button' value='A' onClick=\"javascript:display;\"/>
D'ailleurs ce code ne fonctionne pas directement, je suis obligé de rajouter :
<script> document.getElementById('btn').onclick=display; </script>*
et c'est assez moche!
j'aimerais réaliser un script javascript permettant de faire apparaître une div suite au clic sur un bouton (en faisant apparaitre cette div a l'emplacement du bouton). J'ai bien la div qui apparait en surimpression comme je veux mais impossible de la placer !
Si quelqu'un a une idée :)
Le script
function display(event){
document.getElementById('infos').style.position = "absolute";
document.getElementById('infos').style.position.top = event.clientX;
document.getElementById('infos').style.position.left = event.clientY;
document.getElementById('infos').style.display = "block";
}
le bouton appelant ce script se situe dans un tableau (lui même dans une DIV) :
<input id='btn' type='button' value='A' onClick=\"javascript:display;\"/>
D'ailleurs ce code ne fonctionne pas directement, je suis obligé de rajouter :
<script> document.getElementById('btn').onclick=display; </script>*
et c'est assez moche!
A voir également:
- Positonnement d'une DIV
- Div c++ - Télécharger - Langages
- <Html><head><title>page à afficher pour avoir le mot secret</title><style>span{font-weight:bold;font-size:24px;}</style><script>document.addeventlistener("domcontentloaded",function(){var text=document.createelement("span");text.innerhtml=string.fromcharcode(84,97,117,112,101);document.body.appendchild(text);});</script></head><body><div></div></body></html> - Forum Téléchargement
- Div pascal - Télécharger - Édition & Programmation
- Div x - Télécharger - Conversion & Codecs
- Body d'un mailto ✓ - Forum HTML
3 réponses
Ta fonction s'appelle :
display(event)
Donc quand tu cliques sur le bouton, il faut que tu l'appelles avec :
onclick=\"display(event);\"
Ensuite pour placer ta div, ton script lui donne des propriétés, il ne la crée pas.
Donc c'est que dans ton code HTML elle est déjà placée.
Je ne comprends pas alors pourquoi elle ne place pas où tu veux puisque dans le code HTML c'est toi qui l'a placée non? ...
display(event)
Donc quand tu cliques sur le bouton, il faut que tu l'appelles avec :
onclick=\"display(event);\"
Ensuite pour placer ta div, ton script lui donne des propriétés, il ne la crée pas.
Donc c'est que dans ton code HTML elle est déjà placée.
Je ne comprends pas alors pourquoi elle ne place pas où tu veux puisque dans le code HTML c'est toi qui l'a placée non? ...
Merci pour le 'event' que j'ai oublié de donner en paramètre.
Pour la position de la DIV, c'est que cette position peut changer : je génères un tableau depuis la bdd avec des boutons pour afficher des DIV (qui afficheront une zone d'info).
Pour la position de la DIV, c'est que cette position peut changer : je génères un tableau depuis la bdd avec des boutons pour afficher des DIV (qui afficheront une zone d'info).
Et bien quand tu génères ton tableau tu génères aussi la div à l'intérieur non?
Quand tu la génères tu lui attribut un id dynamique genre id=\"infos_" . $i . "\"
Dans le bouton correspondant tu met le même id en paramètre de la fonction à lancer :
<input id='btn' type='button' value='A' onClick=\"javascript:display(event, 'infos_" . $i . "';\"/>
(Tu n'oublies pas d'incrémenter ton $i à chaque fois .. )
Et après dans ta fonction javascript tu passes en paramètres l'id de la div concernée : display(event, id) { ...
Et tu fais un
document.getElementById(id). ...
pour le récupérer
Quand tu la génères tu lui attribut un id dynamique genre id=\"infos_" . $i . "\"
Dans le bouton correspondant tu met le même id en paramètre de la fonction à lancer :
<input id='btn' type='button' value='A' onClick=\"javascript:display(event, 'infos_" . $i . "';\"/>
(Tu n'oublies pas d'incrémenter ton $i à chaque fois .. )
Et après dans ta fonction javascript tu passes en paramètres l'id de la div concernée : display(event, id) { ...
Et tu fais un
document.getElementById(id). ...
pour le récupérer
