Fermer Popin et faire afficher au même endroit

**leara500** · 13/05/2016, 12h41

Bonjour,

Je ne sais pas si je suis au bon endroit mais je me lance.

J'ai développé une application de gestion des horaires et elle fonctionne (jusque là, aucun soucis

). Pour pourvoir modifier les horaires d'une personne, il suffit de cliquer sur la popin qui correspond aux horaires du jour que l'a choisi.

Code html :

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

1
2
3
4
5
<div id="preview"> 
	<a href="#" style="color: #1891C0;font-weight: bold" 
	onclick="openPreview('<s:property value="%{personneDto.idPersonne}"/>','<s:property value="personneDto.nom"/>','<s:property value="personneDto.prenom"/>','<s:property value="%{jourDisp.dateComplet1}"/>','${val1dm}','${val1fm}','${val1da}','${val1fa}','${jourDisp.demiabsenceSelected1}','${val1demidm}','${val1demifm}','${jourDisp.absenceSelected1}','1')">
	<img alt="Modifier les valeurs de ce jour" src="./resources/img/modif.gif"> </a>
</div>

Malheureusement, si la personne se trouve en bas de page et que l'on utilise l'ascenseur (scroll), lorsque l'on valide, la page se met au tout début, et non plus au niveau des horaires de la personne modifiées.

Savez vous comment faire, pour que lorsque je valide la modification des horaires (en javascript) la page reste au même endroit où se trouve la personne (si à dire en bas, si la personne se trouve ne bas) ?

Je ne sais pas si je me suis bien fait comprendre

Je vous met si dessous la fonction openPreview :

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
34
35
36
37
38
39
40
41
42
43
function openPreview(idPersonne, nom, prenom, day, hdm, hfm,hda, hfa, demiAbs, demihdm, demifdm, abs, index)
{
	document.forms["popinPreview"].elements["idPersonnePreview"].value=idPersonne;
	document.forms["popinPreview"].elements["indexPreview"].value=index;
 
	document.getElementById('divCreate').style.display='block';
 	document.getElementById('titre').innerHTML="Modification horaire";
 
	document.getElementById('people').innerHTML=" "+prenom+" "+nom;
 
	if(day != ''){
		document.getElementById('day').innerHTML="Pour le  "+day;
	}
 
	document.getElementById('hours').style.display='none';
	document.getElementById('halfAbsence').style.display='none';
	document.getElementById('absencess').style.display='none';
 
 
	if((hdm !='') && (hfm !='')){
 
		document.getElementById('hours').innerHTML="travaille de "+hdm+" à "+hfm+" et de "+hda+" à "+hfa;
		document.getElementById('hours').style.display='block';
		document.getElementById('halfAbsence').style.display='none';
	}
 
	if(demiAbs !=''){
 
		document.getElementById('hours').style.display='none';
		document.getElementById('absencess').style.display='none';
		document.getElementById('halfAbsence').innerHTML= "Sera absent pour "+demiAbs+" et sera présent de "+demihdm+" à "+demifdm;
		document.getElementById('halfAbsence').style.display='block';
	}
 
	if(abs !=''){
		document.getElementById('hours').style.display='none';
		document.getElementById('halfAbsence').style.display='none';
		document.getElementById('absencess').innerHTML= "Sera absent car en  "+abs;
		document.getElementById('absencess').style.display='block';
	}
 
 
}

Merci beaucoup du coup de main

**01001111** · 13/05/2016, 19h00

pour conserver la position, tu mets une ancre n'importe où dans le body, pourvu qu'elle ait un positionnement fixe

Code html :

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

<a name="ancre" style="position:fixed; top:0;"></a>

et sur l'ancre qui appelle ta fonction tu modifies le href en href="#ancre"

ça devrait le faire

**leara500** · 14/05/2016, 09h19

Code html :

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

1
2
3
4
5
6
7
		</tr>
 
<!-- Fin de la div personne  -->
 
	</s:iterator>
<a name="ancre" style="position:fixed; top:150;"></a>		
</table>

Code html :

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

1
2
3
4
5
<div id="preview"> 
	<a href="#ancre" style="color: #2892C0;font-weight: bold" 
	onclick="openPreview('<s:property value="%{personneDto.idPersonne}"/>','<s:property value="personneDto.nom"/>','<s:property value="personneDto.prenom"/>','<s:property value="%{jourDisp.dateComplet1}"/>','${val1dm}','${val1fm}','${val1da}','${val1fa}','${jourDisp.demiabsenceSelected1}','${val1demidm}','${val1demifm}','${jourDisp.absenceSelected1}','1')">
	<img alt="Modifier les valeurs de ce jour" src="./resources/img/modif.gif"> </a>
</div>

Je ne sais pas pourquoi lorsque je clique sur le bouton preview, la page remonte en haut YoY

**NoSmoking** · 14/05/2016, 09h35

Bonjour,
dans ton cas je ne vois pas l'intérêt d'utiliser une balise <a>, il existe une balise pour ce genre de cas, la balise <button>.

**01001111** · 14/05/2016, 10h57

c'est bizarre que ça ne fonctionne pas chez toi, ici testé sur tous navigateurs ça fonctionne.
Sinon noSmoking a raison, il vaut mieux utiliser un élément de type button.

**leara500** · 14/05/2016, 13h14

Merci infiniment pour votre aide.

en faisant cela

Code html :

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

1
2
3
4
5
<div id="preview"> 
	<button  style="color: #2892C0;font-weight: bold" 
	onclick="openPreview('<s:property value="%{personneDto.idPersonne}"/>','<s:property value="personneDto.nom"/>','<s:property value="personneDto.prenom"/>','<s:property value="%{jourDisp.dateComplet1}"/>','${val1dm}','${val1fm}','${val1da}','${val1fa}','${jourDisp.demiabsenceSelected1}','${val1demidm}','${val1demifm}','${jourDisp.absenceSelected1}','1')">
	<img alt="Modifier les valeurs de ce jour" src="./resources/img/modif.gif"> </button>
</div>

la position de la page ne bouge plus (ceux qui est génial). Malheureusement, la popin s'ouvre en haut de la page. Je suis donc toujours obligé d'utiliser l'ascenseur

Egalement, avec cette méthode, toutes la page se recharge

**NoSmoking** · 14/05/2016, 13h56

C'est la popin qu'il te faut mettre en position:fixed.

Egalement, avec cette méthode, toutes la page se recharge

c'est surement que ta balise <button> est dans un <form> et que dans ce cas l'élément se comporte comme un type=submit, il te suffit de le déclarer comme <button type="button">...</button>.

**leara500** · 14/05/2016, 14h14

Merci encore du coup de main. Grace à vous, ma page ne se recharge plus

Mais c'est à quel niveiau que le met que ce code

Code css :

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

position:fixed

dans ma fonction openpreview()

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
34
35
36
37
38
39
40
41
42
43
function openPreview(idPersonne, nom, prenom, day, hdm, hfm,hda, hfa, demiAbs, demihdm, demifdm, abs, index)
{
	document.forms["popinPreview"].elements["idPersonnePreview"].value=idPersonne;
	document.forms["popinPreview"].elements["indexPreview"].value=index;
 
	document.getElementById('divCreate').style.display='block';
 	document.getElementById('titre').innerHTML="Modification horaire";
 
	document.getElementById('people').innerHTML=" "+prenom+" "+nom;
 
	if(day != ''){
		document.getElementById('day').innerHTML="Pour le  "+day;
	}
 
	document.getElementById('hours').style.display='none';
	document.getElementById('halfAbsence').style.display='none';
	document.getElementById('absencess').style.display='none';
 
 
	if((hdm !='') && (hfm !='')){
 
		document.getElementById('hours').innerHTML="travaille de "+hdm+" à "+hfm+" et de "+hda+" à "+hfa;
		document.getElementById('hours').style.display='block';
		document.getElementById('halfAbsence').style.display='none';
	}
 
	if(demiAbs !=''){
 
		document.getElementById('hours').style.display='none';
		document.getElementById('absencess').style.display='none';
		document.getElementById('halfAbsence').innerHTML= "Sera absent pour "+demiAbs+" et sera présent de "+demihdm+" à "+demifdm;
		document.getElementById('halfAbsence').style.display='block';
	}
 
	if(abs !=''){
		document.getElementById('hours').style.display='none';
		document.getElementById('halfAbsence').style.display='none';
		document.getElementById('absencess').innerHTML= "Sera absent car en  "+abs;
		document.getElementById('absencess').style.display='block';
	}
 
 
}

**NoSmoking** · 14/05/2016, 14h19

C'est du CSS donc si le conteneur s’appelle « etat_pioche » il faut lui affecter cette propriété/valeur.

Code css :

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

1
2
3
4
#etat_pioche {
  position:fixed;
  /* et d'autre éventuellement */
}

**leara500** · 14/05/2016, 14h33

Merci un millions de fois

Fermer Popin et faire afficher au même endroit

JavaScript

Discussions similaires

Partager

Partager