Discussion :

[Lilouse]

Bonjour

Sur mon site, je dispose d'un formulaire où il faut entré le code d'une couleur. Pour simplifier l'utilisateur j'ai mis en place un petit pop up contenant une liste de carré de couleur. Lorsqu'on clique sur l'un d'entre eux cela place le code couleur correspondant dans le formulaire. Mon pop up s'ouvre lorsque je clic sur une image à côté de mon formulaire.

Jusqu'à la je n'ai pas de soucis mais lorsque j'ouvre mon pop up, il n'a pas toute les caractéristiques que je souhaite :
- je ne veux aucune url, aucun titre visible, aucune croix pour fermer, qu'on ne puisse voir juste le contenu du pop up
- il doit avoir la taille de son contenu
- il doit s'ouvrir à l'endroit où j'ai cliqué (le milieu du bord gauche à l'emplacement de mon clique

Voici ma fonction :

Code :

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

1
2
3
4
5
6
function tooltipcouleur(text,event){
	var e=event;
	var dleft=e.screenX; // décalage à gauche
	var dtop=e.screenY-(140/2); // décalage vers le bas
	window.open("couleurs.php?text=" + text, "couleurs","top=" + dtop + ", left=" + dleft + ", height=140, width=140, directories=no, menubar=no, status=no, scrollbars=no, location=no, resizable=no");
}

Mon navigateur n'est pas toujours ouvert en plein écran donc lorsque je clique sur mon image de couleur, je dois vérifier la position de mon clique par rapport à mon écran et non ma fenêtre vu que open() est en fonction de la fenêtre. Je n'ai trouvé que screenX pour cela mais j'ai aussi vu qu'il ne fonctionnait que sur firefox hors en testant sur IE, il se positionne tres bien aussi mais au vu de ce que j'ai lu j'ai peur que tout de même cela ne fonctionne pas sur tous les navigateurs. Il y a peut-être une autre solution alors ?

Pour ce qui est de la taille de mon popup, j'ai fait des tests pour le placer au mieux et il est donc en dure dans ma fonction. Es ce qu'il y aurait une autre façon de définir la taille ? Je pense notamment à la personne qui a zoomé sur leur navigateur... De plus j'utilise la valeur de la hauteur pour le calcul de la position de mon popup (140/2).
Sur firefox, cela fonctionne très bien actuellement alors que sur IE, ma fenêtre est déformée, elle est presque 2 fois trop large et mon paramètre de largeur n'est pas du tout respecté...

Pour ce qui est de faire disparaitre tout ce qui est url, etc ... j'ai placé dans ma fonction "directories=no, menubar=no, status=no, scrollbars=no, location=no, resizable=no". D'après ce que j'ai lu, c'est ceci qui détermine tous ces éléments mais ceci ne sont pas pris en compte que ce soit avec firefox ou IE. D'où vient le problème ?

Pour résumer :
- mes options ne fonctionnent pas tous dans ma fonction open() : pourquoi ? Comment le résoudre ?
- sur IE, ma page ne respecte pas la taille voulu dans les options : pourquoi ? Comment le résoudre ?
- pour ouvrir le pop à l'emplacement de mon clique j'utilise screenX. Es ce qu'il fonctionne sur tous les navigateurs ? Sinon que dois-je mettre à la place ?

J'avais déjà posté mon problème sur un autre forum que celui de ce site (forum très actif) mais je n'ai pas eu de réponse depuis le 5 mars après avoir fait remonter le sujet toute les 24heures en précisant mes informations ou en apportant des informations supplémentaires pendant 4 jours. J'espère que vous pourrez m'aider :s

[Lilouse]

Comme me l'a conseillé SpaceFrog sur le chat, j'ai essayé d'utiliser prototype window et ... C'est pire qu'avant. Comme je ne sais pas du tout l'utiliser, j'ai fait comme je peux ... je me suis aidé du site : http://prototype-window.xilinus.com/index.html

J'ai tout d'abord testé l'exemple présent dans l'introduction :

Code :

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

1
2
3
win = new Window({className: "mac_os_x", title: "Sample", width:200, height:150, destroyOnClose: true, recenterAuto:false});
win.getContent().update("<h1>Hello world !!</h1>"); 
win.showCenter();

Je me retrouve à avoir au dessus de mon titre un jolie "Hello word" qui se retrouve à passer sous mon formulaire .... Je suis obligé de regarder la page pour qu'il disparaisse.

En regardant plus précisément comment l'objet fonctionné, j'ai rajouté des options supplémentaire, enlever certaine :

Code :

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

1
2
var win = new Window({title: "couleur",url:"couleur2.php?text="+text, width:150, height:150, resizable:false, minimizable:true, maximizable:false, recenterAuto:false,  destroyOnClose: true});
win.showCenter();

Au lieu de me retrouver avec un "hello word", j'ai donc bien le contenu de mes couleurs qui apparait mais le problème reste le même. Deplus, si je clique plusieurs fois sur mon image qui déclenche ma fonction, j'ai le contenu de couleur2 qui se place autant de fois que j'ai cliquer l'un en dessous de l'autre tout en décalant le titre vers le bas ...

de plus, lorsque je clique sur une couleur maintenant, cela ne remplie plu le formulaire comme précédemment ...

Es ce que vous pouvez m'aider ?