Position d'une popup en fonction du clic d'appel

Version imprimable

06/08/2006, 15h27
lodan

Position d'une popup en fonction du clic d'appel
Bonjour,

J'ai créé une popup et je voudrais la positionner à côté du champ ou j'ai cliqué pour l'afficher.

Je veux quel reste dans ma page et ne se mette pas en dehors de mon écran.

C'est ce quel fait pour l'instant.
Dans mon javascript, je sais que je doit mettre :
Code:

1 2 mypop.moveTo(x,y); mypop.resizeTo(l,h);
Je ne veux pas lui donner une position fixe.
Comment récupérer les valeur de x,y,l,h en fonction de la position de mon curseur dans mon html.

Merci beaucoup
06/08/2006, 16h20
mappy

Tu crées des input en hidden

Voilà déjà pour les coordonnées x,y de ta souris

function detectMouse(e)
{

document.getElementById('pos_x').value = event.x
document.getElementById('pos_y').value = event.y
}

dans le <body : onmousemove="detectMouse(event)">

Merci,

J'ai mis dans mon programme :
Code:

1 2 <input type="hidden" name="x"> <input type="hidden" name="y">
Ensuite dans mon body

Code:

<body onmousemove="detectMouse(event)">

Puis la function entre mon<body> et mon </body>
Code:

1 2 3 4 5 6 7 <script type='text/javascript' language='Javascript' > function detectMouse(e) { document.getElementById('pos_x').value = event.x document.getElementById('pos_y').value = event.y } </script>
Ma popup apparaît bien, mais je ne vois que le haut, le reste, il faut que j'appel l'ascenseur pour le voir.

Y a quelque chose qui cloche dans ce que j'ai fait ?

06/08/2006, 16h55
mappy

Le nom de tes inputs n'est pas bon. Renomme les pos_x et pos_y
et puis pour les tests tu peux les définir en text (le hidden sera ok quand ton soft tournera).

Les valeurs des inputs doivent te servir à positionner ta popup en placant les valeurs affichées dans la définition de cette même popup
06/08/2006, 18h14
lodan

Avec les input text cela me permet de choisir une position si j'ai bien compris.

Bon, je mets 100/200 et je clic sur mon bouton, mais rien n'est changé.

J'avoue ne pas comprendre tout à fait ce que je fais.
07/08/2006, 11h21
mappy

Les inputs ne sont là que pour recevoir la valeur transmise automatiquement par l'événement ONMOUSEMOVE qui est dans la balise BODY
Ce sont ces valeurs qui vont te positionner ta popup car dans ton script où tu ouvres ta popup, tu récupères ces deux valeurs, du style :

pos_x=document.GetElementByID("pos_x").value;
pos_y=document.GetElementByID("pos_y").value;

tu te serts donc de ces deux valeurs pour définir la position de ta popup
Ne déclare pas les valeurs avec Var pour pouvoir les utiliser ailleurs que dans ta fonction de détection de position.
08/08/2006, 08h59
lodan
Merci Mappy

Je ne sais pas si j'ai bien tout fait, mais ma popup ne se positionne pas du tout ou je le voudrais.

Dans mon javascript, j'ai
Code:

1 2 3 var x = get_x_obj(this.ACtlToPlaceValue); var y = get_y_obj(this.ACtlToPlaceValue)+this.ACtlToPlaceValue.offsetHeight+2;
La valeur de ACtlToPlaceCalue est égal à

Code:

maj.cpt_date_debut

"maj" étant le name de mon <form name="maj"
"cpt_date_debut" étant le name de mon <input type="date" name="cpt_date_debut" sur lequel

De ce fait je veux que ma popup soit à côté de mon champ input

Mais elle se positionne toujours en dessous comme ceci
http://127.0.0.1/gestelle/images/test.gif

Ai-je oublié quelque chose ?
08/08/2006, 10h15
marcha

Salut,

Tu as vraiment besoin d'une popup ? cela serait plus simple avec
un div pour le positionnement.
08/08/2006, 10h24
lodan

En fait j'ai récupéré ce calendrier qui me va bien dans ses fonctions.

Il est javascript.

Est-il possible dans ce cas de le positionné en div ?
08/08/2006, 10h40
marcha

Oui, mais il faut adapter le code

Une piste ?

Quiter javascript ?

Où faire

Code:

1
2
3
4
5
6
7
8
9
10
11
<form id="table">
<div id="titreForm"><a href="#pop1">calendrier</a></div>
 
	<div id="pop1">
 
		<h1>Calendrier</h1>
		<div id="popcontenu">
		"Calendar.MPopUpCalendar(this, document.maj.cpt_date_debut, 'dd/mm/yyyy','',true)"
		</div>
	</div>
</form>

Mon css serait

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*** Mise en forme des popups ***/
#pop1, #pop2 {
position: absolute;
display:none;
width: 30em;
border: 3px double black;
background: #f5f5dc;
z-index: 500;
font-size: 80%;
}
#pop1 p, #pop2 p {
margin: 0 0.3em;
}
#pop1 h1, #pop2 h1 {
font-size: 110%;
margin: 0 0 0.5em 0;
border-bottom: 1px solid black;
background: white url(top.gif) left top repeat-x;
color: black;
text-align: center;
}
 
#popcontenu {	/*** Mise en fome du contenu de la popup (bordure, couleur du fond...) ***/
	border: 1px solid black;
	color: black;
	background: #efefef;
	margin: 0;
	padding: 1em;
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 97%;	/*** Les intitulés prennent x% de la largeur totale du formulaire... ***/
	text-align: left;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0

Pour l'appel de mon javascript si je le garde, là je sèche.

Merci