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

**lodan** · 06/08/2006, 15h27

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 :

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

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

**mappy** · 06/08/2006, 16h20

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)">

**lodan** · 06/08/2006, 16h44

Merci,

J'ai mis dans mon programme :

Code :

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

1
2
<input type="hidden" name="x">
<input type="hidden" name="y">

Ensuite dans mon body

Code :

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

<body onmousemove="detectMouse(event)">

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

Code :

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

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 ?

**mappy** · 06/08/2006, 16h55

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

**lodan** · 06/08/2006, 18h14

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.

**mappy** · 07/08/2006, 11h21

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.

**lodan** · 08/08/2006, 08h59

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 :

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

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 :

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

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

Ai-je oublié quelque chose ?

**marcha** · 08/08/2006, 10h15

Salut,

Tu as vraiment besoin d'une popup ? cela serait plus simple avec
un div pour le positionnement.

**lodan** · 08/08/2006, 10h24

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 ?

**marcha** · 08/08/2006, 10h40

Oui, mais il faut adapter le code

**lodan** · 08/08/2006, 10h51

Une piste ?

Quiter javascript ?

Où faire

Code :

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

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 :

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

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

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

JavaScript

Discussions similaires

Partager

Partager