Menu déroulant javascript

Version imprimable

Voir 40 message(s) de cette discussion en une page

16/03/2007, 12h53
tazmania

Menu déroulant javascript
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 :D
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:

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

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

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

17/03/2007, 11h11
tazmania

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
19/03/2007, 11h31
tazmania

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

Ce qui donne

Code:

<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.
19/03/2007, 12h50
magnus2005

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:

<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
19/03/2007, 15h46
tazmania

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.
19/03/2007, 16h46
magnus2005

100% si tu qu'une balise
si tu en as 3 ça donne
100 / 3 = 33 % pour chaque
19/03/2007, 18h21
tazmania

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.
19/03/2007, 19h06
magnus2005
Tu peux utiliser une taille fixe en pixels
Code:

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 ?
20/03/2007, 12h11
tazmania

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
20/03/2007, 12h49
magnus2005
Je pense qu il va falloir donner une dimension a tes balises
apres si la taille fixe est genante pour l'utilisateur :
1. soit tu redimenssionne toi meme en javascript en jouant sur l attribut style de toutes tes balises.
2. soit tu le fais en relative avec des %
3. 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
21/03/2007, 18h09
tazmania

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
21/03/2007, 18h19
Auteur

Citation:

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à :bug:
Chaque navigateur à ses fonctions pour déterminer les coordonnées de la souris dans la page :aie:
21/03/2007, 22h57
tazmania

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. :aie:
23/03/2007, 10h53
tazmania

Aucune idée ou se n'est pas faisable :roll:
23/03/2007, 20h58
tazmania

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.
23/03/2007, 21h47
magnus2005

J ai une idée :
tu ajoutes un onclick a toute tes balises tu devrais pouvoir identifier la celle qui reçut le click.
23/03/2007, 23h37
tazmania

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

Code:

<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:

<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 :cry:
23/03/2007, 23h53
magnus2005
oui en effet le moteur javascript et object de javascript est assez limité (pour resté poli).
Code:

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 ?

Code:

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:

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

Voir 40 message(s) de cette discussion en une page