Menu déroulant javascript

**tazmania** · 16/03/2007, 12h53

Salut à tous,

Malgré avoir quelque peu progresser en javascript, il y a encore des choses que je n'arrive pas à faire.
Voila, en fait, j'aimerais créer un menu lors du click droit de ma souris.
Déjà sa, c'est pas mal compliqué, enfin pour moi

Mais je voudrais une petite suptilité, en faite selon l'endroit où je me trouve dans ma page, je voudrais afficher un certain type de menu.

Exemple : ma page se compose ainsi :

Code :

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

1
2
3
4
5
<body>
       <toto> blablabla  </toto>
       <titi> gros minet </titi>
       <tata> tonton </tata>
</body>

Exemple d'exécution :
Ma souris se trouve dans la balise titi j'affiche dans mon menu
- titi est joli
- titi vole

Par contre si je me trouve dans la balise tata j'affiche le menu suivant
- tata est gaga
- tata et tralala

Voila je sais pas si c'est faisable ou pas

**magnus2005** · 16/03/2007, 21h31

Tu as mis des balises pour faire un exemple
ou tu souhaites vraiment utilise tes propres balises.

Code :

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

1
2
3
4
5
6
 
<body>
       <div id="toto" onclick="showmenusouris('toto')"> blablabla  </div>
       <div id="titi" onclick="showmenusouris('titi')"> gros minet </div>
       <div id="tata" onclick="showmenusouris('tata')"> tonton </div>
</body>

avec ça c est complement faisable avec onclick

**tazmania** · 17/03/2007, 11h11

En effet mes balises sont personnalisées.

Je n'ai pas de balise div mais directement titi, comme indiqué sur mon exemple

C'est toujours faisable avecl'événement onclick

**tazmania** · 19/03/2007, 11h31

Bon rajouter l'évenement onclick dans ma balise titi par exemple

Ce qui donne

Code :

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

<titi onclick="menutiti()">

Le soucis c'est que lorsque ma balise ne contient rien, l'action ne se déclenche pas. Commment pourrais-je définir que ma balise titi englobe toute ma page.
Afin que lorsque l'utilisateur clique n'importe où sur la page l'évenement onclick se lance.

Autre question :
Comment faire pour que l'évenement onclick fonctionne que sur le click droit de la souris.

**magnus2005** · 19/03/2007, 12h50

A mon avis,

Le fait que le onclick ne fonctionne pas vient que le browser doit donner une taille de 0*0 a ta balise essaie.

Code :

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

<titi onclick="menutiti()" style="width=100%;height=100%">

Pour le click il faut utiliser onmousedown

J'ai deja posé la même question voici la réponse :

http://www.developpez.net/forums/sho...d.php?t=211528

**tazmania** · 19/03/2007, 15h46

Le seul truc c'est que j'ai plusieurs balises et donc si je mets ma balise titi avec le style css height:100% et width;100%.

Comment je fais pour mes autres balises qui receveront aussi l'évènement onclick.

**magnus2005** · 19/03/2007, 16h46

100% si tu qu'une balise
si tu en as 3 ça donne
100 / 3 = 33 % pour chaque

**tazmania** · 19/03/2007, 18h21

J'aurais bien aimé utiliser cette solution mais le nombre de balise varie.
C'est grâce à mon menu qui sera aficher lors du click droit de la souris que l'utilisateur pourra choisir la balise qu'il souhaite intégrer à ma page web.

Cette solution me semble assez dur à exploiter.
Est ce que je pourrais pas faire un espèce de truc comme avec le fonctionnement des div.

**magnus2005** · 19/03/2007, 19h06

Tu peux utiliser une taille fixe en pixels

Code :

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

1
2
3
4
.myclass{
height:100px;
width:100px;
}

Sinon tu peux dynamiquent calculer la proportion en javascript et l appliquer au "style" de chaque balise.

Tu as un dessin de ta future interface ?

**tazmania** · 20/03/2007, 12h11

Non je n'ai pas de dessin de ma futur interface, désolé.

Mais en fait, je sais ce que dois faire ma page.
Au départ celle-ci ne comporte rien.

L'utilisateur va donc effectuer un click droit de la souris pour faire apparaitre un menu. Dans ce menu se trouve les différents éléments qu'il pourra insérer.

Lors du choix de l'utilisateur celui-ci va cliquer dessus.
Dans mon code je vais faire un createElement de l'élément choisi puis je fais un appendChild sur la seule balise qu'il y avait dans mon document pour rajouter l'élement qui est en fait une autre balise.

Maintenant la page WEB dispose de deux balises. Chacune de ces deux balises possèdent un menu distinct. A partir de ces deux menus, je réintère donc l'étape n°1 c'est à dire la création d'une nouvelle balise.

Ce que je voudrais donc faire c'est de savoir sur quelle balise l'utilisateur a cliqué afin de lui proposer le menu qui correspond à cette balise.

Je ne sais pas si je peux utiliser une taille fixe en pixel pour cela car je ne sais pas au final combien il y aura de balise créer par l'utilisateur

**magnus2005** · 20/03/2007, 12h49

Je pense qu il va falloir donner une dimension a tes balises
apres si la taille fixe est genante pour l'utilisateur :

soit tu redimenssionne toi meme en javascript en jouant sur l attribut style de toutes tes balises.
soit tu le fais en relative avec des %
soit tu integres une API pour redimenssioner tes balises a la souris (perso c je trouve que c'est un peu lourd comme solution mais ça depend pas du context )

Attention l ajout d un onclick (onmouser ...) via javascript est tres different selon le browser

**tazmania** · 21/03/2007, 18h09

Sinon on m'a conseillé de regarder plutôt au niveau des coordonées de la souris sur ma page.
C'est peu être plus facile

**Auteur** · 21/03/2007, 18h19

Envoyé par tazmania

Sinon on m'a conseillé de regarder plutôt au niveau des coordonées de la souris sur ma page.
C'est peut être plus facile

Loin de là

Chaque navigateur à ses fonctions pour déterminer les coordonnées de la souris dans la page

**tazmania** · 21/03/2007, 22h57

Ma page ne fonctionne pas du tout sur IE donc pour le navigateur, je me suis restreint à Mozilla.
J'arrive à avoir mes cordonnées lors de mon click droit de souris.
Mais comment déterminer quelle balise se trouve à cette coordonnée.

**tazmania** · 23/03/2007, 10h53

Aucune idée ou se n'est pas faisable

**tazmania** · 23/03/2007, 20h58

En fait je cherche de ce coté si car si je rajoute quelque chose dans ma balise, lorsque j'utilise la méthode parentNode, elle ne marche plus.
Et si je mets juste le nom de la balise (ex : <toto>) est bien sa marche nickel.

**magnus2005** · 23/03/2007, 21h47

J ai une idée :
tu ajoutes un onclick a toute tes balises tu devrais pouvoir identifier la celle qui reçut le click.

**tazmania** · 23/03/2007, 23h37

Ba oui mais comme je l'ai dit au dessus.
Si je fais une balise

Code :

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

<toto onclick="toto()">

Lorsque je fais un parentNode dans ma fonction pour renvoyer toto, il ne trouve pas la balise.

Mais si je fais juste

Code :

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

<toto>

Mon parentNode me renvoie bien toto.

Je crois que c'est pas faisable ce que j'essaye de faire.
Je recherche sur Internet et je ne trouve aucun sujet la dessus

**magnus2005** · 23/03/2007, 23h53

oui en effet le moteur javascript et object de javascript est assez limité (pour resté poli).

Code :

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

1
2
3
4
5
6
<toto id="tototag" onclick="toto()"></toto>
function toto(){
var par = document.getElementById("tototag");
// et voila tu as ton parent Node
// 
}

C'est pas fabuleux mais c est efficace.
Mais je suis pas sur que ça solutionne ton probleme.
Peux tu montrer ton code javascript ça nous permettra peux être de mieux conceptualiser ce tu souhaites faire ?

**Auteur** · 24/03/2007, 00h10

Code :

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

1
2
3
 
<toto id="toto" onclick="clic(this)"></toto>
<tata id="tata" onclick="clic(this)"></tata>

this contient toutes les caractéristiques de la balise.

Code :

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

1
2
3
4
5
 
function clic(objet)
{
alert(objet.id);
}

Menu déroulant javascript

JavaScript

Discussions similaires

Partager

Partager