Fermeture automatique de POPUP

**forumcmy** · 27/06/2024, 18h20

Bonjour, et merci pour votre aide.
Le problème
Problème javascript sur le site suivant développé en php, html et javascript. : mcc.lceg.net (site en développement.)
Une fois sur le site cliquez : "Ma cave (photos) - en travaux -", un popup s'ouvre avec une liste déroulante. Dans cette liste choisissez "champignons", une série de photos s'affiche.
En cliquant sur une photo, elle ouvre un autre popup avec un agrandissement de cette photo.
Le premier popup (avec la liste déroulante) se referme seul au bout de quelques minutes.
Je voudrais que le second popup se referme après une autre durée.
A noter que toute les photos agrandies s'ouvrent dans le même popup (target identique, une photo chasse l'autre)
Je n'arrive pas à implémenter cette fonctionnalité, soit ça ne marche pas soit ça ferme le premier popup.
Dans la console, j'ai ces messages:

ma_cave_photos.php:74 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:74:3
ma_cave_photos.php:86 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:86:3
ma_cave_photos.php:98 Uncaught ReferenceError: fenP1 is not defined
at ma_cave_photos.php:98:3

Si je les comprend for bien, je ne vois pas pourquoi !

Le problème se situe dans cette fonction.

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
function affichePhoto($nomP) {
	$cheminPhoto="DOCUMENTS/PHOTOS/";
	$nomPhoto="$nomP.jpg";
	$cheminNomPhoto=$cheminPhoto.$nomPhoto;
	$W=getimagesize($cheminNomPhoto)[0];
	$H=getimagesize($cheminNomPhoto)[1];
	$w=480; $h=$w*$W/$H;
	echo"
		<td class='td1Photos'>
			<div align='center'>
	";
?>
	<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>
<?
	echo"
			</div>
		</td>
	";
?>
	<script>
		/*self.close();* Là ça marche ensuite non, fenP1 n'est pas reconnu */
		fenP1.close();
		/*setTimeout(self.close,5000);*/
	</script>
<?	
}

Ci-dessous tout le code pour l'affichage des photos.

Code html :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<?
/******************************************************/
/***               photoChap1.html                    */
/******************************************************/
/*** BLOC D'ENTREE DU NOM DES PHOTOS SANS EXTENSION ***/
/*** ATTENTION les photos doivent avoir une extension .jpg
/*** Cette extension sera ajouté après. ***/
/******************************************************/
/*** nombre de lignes actives *************************/
        $nbLiAct=2;
/*** ligne1 * le .jpg sera ajouté après. ***/
        $P_L1=array('P6','P7','P8');  // nom des photos sans extension
        $ST_L1=array('06','07','08'); // texte des photos.
/* ligne2 * le .jpg sera ajouté après. ***/
        $P_L2=array('P9','P9','P9');  // nom des photos sans extension
        $ST_L2=array('09','09','09'); // texte des photos.
/* ligne3 * le .jpg sera ajouté après. ***/
        $P_L3=array('','','');  // nom des photos sans extension
        $ST_L3=array('','',''); // texte des photos.
/* ligne4 * le .jpg sera ajouté après. ***/
        $P_L4=array('','','');  // nom des photos sans extension
        $ST_L4=array('','',''); // texte des photos.
/* ligne5 * le .jpg sera ajouté après. ***/
        $P_L5=array('','','');  // nom des photos sans extension
        $ST_L5=array('','',''); // texte des photos.
/**********************************************************/
/*** FIN BLOC D'ENTREE DU NOM DES PHOTOS SANS EXTENSION ***/
/**********************************************************/
/*** Rien n'est à modifier après ce bloc. *****************/
/**********************************************************/
 
function affichePhoto($nomP) {
        $cheminPhoto="DOCUMENTS/PHOTOS/";
        $nomPhoto="$nomP.jpg";
        $cheminNomPhoto=$cheminPhoto.$nomPhoto;
        $W=getimagesize($cheminNomPhoto)[0];
        $H=getimagesize($cheminNomPhoto)[1];
        $w=480; $h=$w*$W/$H;
        echo"
                <td class='td1Photos'>
                        <div align='center'>
        ";
?>
	<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>
<?
        echo"
                        </div>
                </td>
        ";
?>
	<script>
                /*self.close();* Là ça marche ensuite non, fenP1 n'est pas reconnu */
                fenP1.close();
                /*setTimeout(self.close,5000);*/
        </script>
<?      
        
}
function afficheST($STP) {
?>
  <tr class="trTextesTableV"> 
	 <td class="td1TexteG"><?echo"$STP[0]";?></td>
	 <td class="td2TextesTableV">&nbsp;</td>
	 <td class="td1TexteG"><?echo"$STP[1]";?></td>
	 <td class="td2TextesTableV">&nbsp;</td>
	 <td class="td1TexteG"><?echo"$STP[2]";?></td>
  </tr>
<?
}
function espaceEntrePhotos() {
        echo"<td class='EspaceEntrePhotos'>&nbsp;</td>";
}
function espaceEntreLignes() {
        echo"<td class='espaceV' colspan=''>&nbsp;</td>";
}
?>
 
<table id="table_photos" class="dégradéMCC" title="photos">
<!-- *************** -->
<!-- photosTest.html -->
<!-- *************** -->
<? 
        if ($nbLiAct>=1) {
?>
<!-- Ligne 1 -->
		<tr class="dégradéMCC_tr1">
<?
                        affichePhoto($P_L1[0]); // Photo gauche
                        espaceEntrePhotos();
                        
                        affichePhoto($P_L1[1]); // Photo milieu
                        espaceEntrePhotos();
                        
                        affichePhoto($P_L1[2]); // photo droite
                        
                        afficheST($ST_L1);      // textes sous photos
?>
			<td class="MargeD">&nbsp;</td>
		</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 1
        }
        if ($nbLiAct>=2) {
?>
<!-- Ligne 2 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L2[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L2[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L2[2]); // photo droite
                
                afficheST($ST_L2);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 2
        }
        if ($nbLiAct>=3) {
?>
<!-- Ligne 3 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L3[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L3[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L3[2]); // photo droite
                
                afficheST($ST_L3);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 3
        }
        if ($nbLiAct>=4) {
?>
 
<!-- Ligne 4 -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L4[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L4[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L4[2]); // photo droite
                
                afficheST($ST_L4);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 4
        }
        if ($nbLiAct>=5) {
?>
<!-- Ligne 5  -->
	<tr class="dégradéMCC_tr1">
<?
                affichePhoto($P_L5[0]); // Photo gauche
                espaceEntrePhotos();
                
                affichePhoto($P_L5[1]); // Photo milieu
                espaceEntrePhotos();
                
                affichePhoto($P_L5[2]); // photo droite
                
                afficheST($ST_L5);      // textes sous photos
?>
		<td class="MargeD">&nbsp;</td>
	</tr>
<?
                        espaceEntreLignes(); //FIN Ligne 5
        }
?>
 
</table>
<!-- ******************* -->
<!-- FIN photosTest.html -->
<!-- ******************* -->

Ce code est inclu (include) à partir de la page de la liste déroulante

Code html :

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
<body class="body_popup1" onload="window.resizeTo(800,800); setTimeout(window.close, <?echo"1.5*$mn10";?>)";> <!-- ferme au bout de 15 mn. -->
	<div id="HdP"></div>
	<!--- Table principale (id="tableP") -->
		<table id="tableEnTete_photos" class="tableEnTete_popup1 dégradéMCC" title="photos">
			<tr class="">
				<td align="center">
					<div class="texteBase_MCC" style="">
						<form method="post" id="choixR" name="choixR" action="#">
							<label for="numPhotos">Les photos de&nbsp;&nbsp;</label>
							<select name="numPhotos" id="numPhotos" onChange="document.forms['choixR'].submit();">
							  <option value="99">Choisissez vos photos.</option> 
							  <option value="chap1">Champignons</option>
							  <option value="chap2">Labos</option>
							  <option value="chap3">Bizarre</option>
							  <option value="test">Test</option>
							</select>
							<label for="numPhotos">Ma Cave à Champignons</label>
						</form>			
					</div>
				</td>
			</tr>
		<?
                        if ($numPhotos=="chap1") {
                                include('pagesPHOTOS/photosChap1.html');
                        }
                        elseif ($numPhotos=="chap2") {
                                include('pagesPHOTOS/photosChap2.html');
                        }
                        elseif ($numPhotos=="chap3") {
                                include('pagesPHOTOS/photosChap3.html');
                        }
                        elseif ($numPhotos=="test") {
                                include('pagesPHOTOS/photosTest.html');
                        }
                ?>
		</table>
	</div>
</body>

La console me signale aussi, mais c'est sans doute sans rapport :

"One or more documents in this page is in Quirks Mode."

Pourtant toute mes pages me semblent conforme :

Code html :

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

1
2
3
<!DOCTYPE html> <!--html 5-->
<html lang="fr">
<head>

Merci pour vos futures réponses.

**mathieu** · 28/06/2024, 03h42

ce qui se fait habituellement est de charger le contenu dans une balise de la page au lieu d'ouvrir une nouvelle fenêtre.
en javascript vous pourrez ensuite complètement controler cette balise, modifier son code css pour l'afficher n'importe où sur la page (même par dessus le reste du contenu), modifier son contenu pour faire défiler les images de la page, etc.

**NoSmoking** · 28/06/2024, 10h55

Bonjour,
juste au passage :

Envoyé par forumcmy

La console me signale aussi, mais c'est sans doute sans rapport :

"One or more documents in this page is in Quirks Mode."

Pourtant toute mes pages me semblent conforme :

Conformes, pas si sûr, il suffit de faire un Ctrl + U pour voir le code HTML généré et/ou analyser la page au vérificateur

**forumcmy** · 28/06/2024, 17h02

Merci de vos deux réponses,
je les analyse et je vous fait un retour.

**forumcmy** · 29/06/2024, 10h43

Effectivement beaucoup d'erreurs

, toutes assez bénignes mais hors standard et facilement corrigées.
Par contre 4 erreurs me résistent et après pas mal de recherches sur le net, je trouve beaucoup de retour qui laissent penser à un bug du validateur.
Voici les messages :
Nom : erreursV1.jpg
Affichages : 217
Taille : 115,2 Ko

Pour l'erreur 1, je ne comprend vraiment pas.
Pour les autres erreurs, ma table comprend bien 7 colonnes et les colspan sont corrects. Les erreurs 3 et 4 font référence à la même ligne .
voici le code de la table, les erreurs remontées étant entre les lignes 4 et 19 :

Code html :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<table id="tableEnTete_indexMCC" class="tableEnTete_indexMCC" style="text-align: center;">
	<!-- PHOTO pleurotes -->
	<tr class="dégradéMCC">
		<td colspan='2'>
			<img style="display:block; margin:auto; width:250px" src="DOCUMENTS/IMAGES/Pleurote_Onlygfx-4182_fond_gris-MCC.jpg" alt="">
		</td>
		<td colspan='5' class="texte_titre_tableEnTete_indexMCC">
			<div style="text-align: left;">
				&nbsp;Ma<br>
			</div>
			<div style="text-align: center;">
				Cave à&nbsp;&nbsp;&nbsp;&nbsp;<br>
			</div>
			<div style="text-align: right;">
				Champignons&nbsp;<br>
			</div>
		</td>
	</tr>
 
   <tr class="dégradéMCC"> 
   <!--=====================-->
   <!--== PARTENAIRES ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<a href="partenaires.php" target="part" class='' onClick="fen_part=window.open(this.href,'part','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30');">Nos partenaires - <br>en travaux -</a>
			</div>
		</td>
 
	<!--==========================-->
   <!--== MA CAVE (photos) ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<!--a href="ma_cave_photos.php" target="cave" class='' onClick="fen_cave=window.open(this.href,'cave','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30'); fen_cave.document.close(); fen_cave.focus()">Ma cave (photos)</a-->
				<a href="ma_cave_photos.php" target="cave" class='' onClick="fen_cave=window.open(this.href,'cave','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30');">Ma cave (photos) - <br>en travaux -</a>
			</div>
		</td>
 
	<!--==========================-->
   <!--== FORMATIONS ==-->
		<td colspan='2'>
			<div class="texteBase_MCC" style="" title="EN TRAVAUX.">
				<?echo"<a href=\"formations.php\">Formations (cultiver ses champignons) - <br>en travaux -</a>";?>
			</div>
		</td>	 
 
	<!--==========================-->
   <!--== ACTUALISER ==-->
		<td colspan='1'>
			<div style="text-align:center; font-size:14px;">
				<a style="color:#0000CC;"  href="javascript:history.go(0)">Actualiser</a>
			</div>
		</td>
   </tr>
 
   <tr class="dégradéMCC">
	<!--==========================-->
   <!--== point ==-->
 
		<td colspan='7'> 
			<div title="EN TRAVAUX." style="text-align: center;">>
				<?echo"..................";?>
			</div>
		</td>
   </tr>
   <tr class="dégradéMCC">	
	<!--==========================-->
   <!--== RECETTES ==-->
		<td colspan='2'> 
			<div class="texteBase_MCC" style="" title="Les recettes de Ma Cave à Champignons.">
				<!--?echo"<a href=\"recettes.php\">Nos recettes</a>";?-->
				<!--a href="recettes.php" target="recette" class='' onClick="fen_recette=window.open(this.href,'recette','width=350,height=500,toolbar=no,scrollbars=yes,status=no,left=20,top=30'); fen_recette.document.close(); fen_recette.focus()">Mes recettes</a-->
				<!--A priori fen_recette.document.close() n'est plus nécessaire, fen_recette.focus() est suffisant.-->
				<a href="recettes.php" target="recettes" class='' onClick="fen_recette=window.open(this.href,'recettes','width=350 ,height= 500,toolbar=no,scrollbars=yes,status=no,left=30,top=40');">Mes recettes</a>
			</div>
		</td>
 
	<!--=============-->
   <!--== Musique ==-->
		<td colspan='2'> 
			<figure>
			  <figcaption class="texteBase_MCC">Un peu de musique ?</figcaption>
			  <!--audio controls autoplay loop src="/MUSIQUE/HolyVale6.mp3"></audio-->
			  <!--audio autoplay src="DOCUMENTS/MUSIQUE/HolyVale6.mp3"></audio-->
			</figure>
		</td>
 
	<!--===================-->
   <!--== CONTACT texte ==-->
		<td colspan='2'> 
			<div class="texteBase_MCC" style="color: mediumBlue;" title="Envoyez nous un mail.">
				Nous contacter <?echo"$fleche_droite_grasse $mailto_monMailChampis_ici";?> ou là  <?echo"$fleche_droite_grasse" ?>
			</div>
	   </td>
	<!--==========================-->
   <!--== CONTACT.png ==-->
		<td colspan='1'>
			<div title="Envoyez nous un mail.">
<?
                                echo"$mailto_monMailChampis<img style=\"display:block; margin:auto; width:50px;\" src=\"DOCUMENTS/IMAGES/bal_drapeau.gif\" alt=\"\"></a>";
?>
			</div>
	   </td>
	</tr>
 
	<tr class="dégradéMCC">
		<td colspan='7'>
			<?
                        require "index-1.php" // Texte qui sommes-nous.
                        ?> 
		</td>
	</tr>
</table>

**forumcmy** · 29/06/2024, 22h58

A noter que la console ne me remonte plus aucune erreur, seul le validateur m'affiche les 4 erreurs que je ne comprend pas.

**forumcmy** · 30/06/2024, 23h12

Vu le peu de réponse, ma question étant sans doute trop confuse, je vais reformuler.
Je te remercie Mathieu mais je souhaite procéder différement.

J'ai une série de photos dans un tableau.
Quand je clique sur une photo j'ouvre un popup avec la photo redimensionnée. Toutes les photos s'ouvrent dans un même popup (même target.)
Jusqu'içi tout va bien.
Si je clique une autre photo, elle remplace la photo précédente.
Pour fermer le popup on clique sur la croix en haut à droite. Tout marche parfaitement.
Maintenant pour éviter de laisser des popup ouverts j'ai l'habitude de donner un time-out. Et là je n'arrive pas sur ce type de popup à le faire fonctionner.
Le code ci-dessous sans fermeture automatique fonctionne..

Code html :

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

<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="var fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no');"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>

Ce code avec fermeture automatique ne fonctionne pas. En fait il ferme la fenêtre appelante qui contient les photos.

Code html :

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

<a href=<?echo"$cheminNomPhoto";?> target="P1" class='' onclick="var fenP1=window.open(this.href, 'P1', 'width=<?echo"$w";?>, height=<?echo"$h";?>, top=50, left=100, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); setTimeout(fenP1.close,5000);"> <img class="photo240carréSurvol" title="Cliquez pour zoomer."src=<?echo"$cheminNomPhoto";?> alt=""> </a>

Je tourne en rond et j'ai besoin de votre aide.
Merci pour vos réponses.

**NoSmoking** · 01/07/2024, 17h08

Point HTML :
Ton code HTML est mal généré et ne respecte pas la structure standard.
Il faudrait que tu es :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html> <!--html 5-->
<html lang="fr">
<head>  <!-- ouverture de HEAD ici -->
<style>
  <!-- le style que tu insères -->
</style>
<!-- la suite -->
</head>
<body>
</body>
</html>

cela devrait t'enlever l'erreur « Start tag head seen but an element of the same type was already open. ».

Concernant les erreurs « Table column 2 established by element td has no cells beginning in it. », cela vient de ton code qui ne permet pas au parseur de savoir ce qu'l doit faire.

Tu « colspan » des cellules mais il n'a pas de référence en amont.

Pour faire disparaître ces erreurs tu peux insérer dans ton code, sans les numéros, la ligne <tr> suivante

Code html :

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

1
2
3
<tr>
  <td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>

Entre nous la construction en <table> n'es absolument pas nécessaire pour ta mise en page.

Point JS :
Déjà pourquoi une fermeture automatique ?
Avec ton setTimeout, ta variable se retrouve hors scope donc rien ne se passe.

Tu pourrais t'en sortir avec :

Code html :

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

1
2
3
4
<a href="ma_cave_photos.php" target="P1" class='' 
  onclick="var fenP1=window.open(this.href, 'P1', 'width=350,height=500, top=50, left=300, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no'); setTimeout(()=>fenP1.close(),10000);">
  Image de test
</a>

La différence est dans le setTimeout.

Mais mon dieu que c'est laid

et de plus en cas de réouverture tu ne supprimes pas les setTimeout en cours.

Il serait plus judicieux de passer par un script externe, par exemple :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<script>
var popupWindow;
var popupTimeout;
function openPopup(url, time = 5000) {
  const options = "width=350,height=500, top=50, left=300, toolbar=no, menubar=no, location=no, resizable=yes, scrollbars=yes, status=no";
  clearTimeout(popupTimeout);
  popupWindow = window.open(url, "popup", options);
  popupTimeout = setTimeout(() => popupWindow.close(), time);
  return false;
}
</script>

avec des appels du type

Code html :

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

<p><a href="ma_page.php" onclick = "return openPopup(this.href, 5000);">Ma page</a>

**forumcmy** · 01/07/2024, 19h18

D'abord merci pour ta contribution,
je vais prendre un peu de temps, étudier tout ça et revenir.

**forumcmy** · 01/07/2024, 22h07

Bonsoir,
concernant les colspan, effectivement donner un modèle <tr><td></td>...</tr> permet d'éliminer le message d'erreur.
par contre

Code html :

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

1
2
<!DOCTYPE html> <!--html 5-->
<html lang="fr">

placé avant le <head> m'amène une autre erreur.
Nom : erreursV2.jpg
Affichages : 190
Taille : 84,1 Ko

Je met en dessous tout le code (y compris les remarques) jusqu'à <head> avec les 2 emplacements qui génèrent une erreur.

Code html :

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
44
45
46
47
48
49
50
51
52
<!-- ****************** -->
<!-- ***MCC.LCEG.NET*** -->
<!-- ******************
OPÉRATEUR @ de CONTROLE d'ERREURS
PHP supporte un opérateur de contrôle d'erreur : c'est @. Lorsque cet opérateur est ajouté en préfixe d'une expression PHP, les messages d'erreur qui peuvent être générés par cette expression seront ignorés.
AVERTISSEMENT
En fait, l'opérateur "@" va aussi désactiver les rapports d'erreurs critiques, qui stoppent l'exécution du script. Entre autres, si vous utilisez "@" pour supprimer les erreurs de certaines fonctions, et que cette fonction n'existe pas, ou qu'elle a été mal orthographiée, vous n'aurez aucune indication.
/* session_status() est utilisée pour connaitre l'état de la session courante.
    PHP_SESSION_DISABLED si les sessions sont désactivées.
    PHP_SESSION_NONE si les sessions sont activées, mais qu'aucune n'existe.
    PHP_SESSION_ACTIVE si les sessions sont activées, et qu'une existe.
*/
-->
 
<!DOCTYPE html> <!-- Si placé içi, erreurV1 -->
<html lang="fr">
<?php
header('Content-Type: text/html;charset=UTF-8'); //PASSAGE en UTF8 (pour php)
if(session_status() !== PHP_SESSION_ACTIVE) session_start();
require "../../php/config01.php";
require("$php/STUFF/stuff_php.php");
//$nom_base= "poopdo"; require "$php/connect_select_base_pdo01.php";
 
/****** PARAMS *******/
/*********************/
$monMailChampis="macavechampis@lceg.net";
$session['monMailChampis']=$monMailChampis;
$mailto_monMailChampis="<a href=\"mailto:$monMailChampis\">";
$session['mailto_monMailChampis']=$mailto_monMailChampis;
$mailto_monMailChampis_ici="<a href=\"mailto:$monMailChampis\">ici</a>";
$session['mailto_monMailChampis_ici']=$mailto_monMailChampis_ici;
 
/*********************/
/*** Params vocaux ***/
/*********************/
if (!isset($_SESSION['passageVocalMCC'])) {
        $passageVocalMCC=1;
        $_SESSION['passageVocalMCC']=$passageVocalMCC;
}
else {
        $_SESSION['passageVocalMCC']++;
        $passageVocalMCC=$_SESSION['passageVocalMCC'];
}
/****** REQUIRE ******/
/*********************/
require"S_Prog/les_fonctions.php";
/*********************/
?>
 
<!DOCTYPE html> <!-- Si placé içi, erreurV2 -->
<html lang="fr">
<head>

Je n'ai pas encore travaillé sur le point JS qui pour moi est un gros morceau.

**NoSmoking** · 02/07/2024, 09h47

placé avant le <head> m'amène une autre erreur.

il te faut placer ces trois lignes :

Code html :

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

1
2
3
<!DOCTYPE html>
<html lang="fr">
<head>

juste après tes commentaires d'entête.

**forumcmy** · 02/07/2024, 11h53

Ouf ! j'en suis venu à bout, grace à tes conseils, merci, je vais pouvoir attaquer le point JS.

Par contre je suis étonné que mettre du php dans le <head> ne posait aucun problème, j'ai préféré tout reporter dans le <body>.
Qu'en penses-tu ?

Code html :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html> <!-- Si placé içi, erreurV1 -->
<html lang="fr">
<head>
	<title>Lceg - Ma Cave à Champignons. - </title> 
	<!--title>Lceg - Index XtiSite - mcc.lceg.net - </title--> 
	<!--meta charset="UTF-8"-->
	<meta NAME="ROBOTS" CONTENT="INDEX, NOFOLLOW">
	<meta name="Description" content="Ma Cave à Champignons">
<!-- Pendant développement -->
	<meta name="Cache-Control" Content="no-store">
	<meta name="Pragma" Content="no-cache">
<!-- -->
	<link rel="shortcut icon" href="http://www.lceg.net/favicon.ico">
	<link rel="stylesheet" media="screen" type="text/css" href="CSS/CSS1_MCC.css">
	<link rel="stylesheet" media="screen" type="text/css" href="CSS/CSS2_MCC.css">
	<link rel="stylesheet" media="screen" type="text/css" href="CSS/CSS_photos_MCC.css">
	<!--script src="http://code.jquery.com/jquery.js"></script>
	<script src="http://lceg.net/Javascript/timing1.js"></script-->
	<!--script src="JS/TXTvoix.js"></script>
	<script src="../Javascript/stuff_js.js"></script-->
</head>
 
<body class="body" onload="window.resizeTo(700,700); setTimeout('self.close', 4000)"> <!--1000,850-->
<?php
        header('Content-Type: text/html;charset=UTF-8'); //PASSAGE en UTF8 (pour php)
        if(session_status() !== PHP_SESSION_ACTIVE) session_start();
        
        /****** REQUIRE ******/
        /*********************/
        require "../../php/config01.php";
        require("$php/STUFF/stuff_php.php");
        require"S_Prog/les_fonctions.php";
        /*********************/
        
        //$nom_base= "poopdo"; require "$php/connect_select_base_pdo01.php";
        $monMailChampis="macavechampis@lceg.net";
        $session['monMailChampis']=$monMailChampis;
        $mailto_monMailChampis="<a href=\"mailto:$monMailChampis\">";
        $session['mailto_monMailChampis']=$mailto_monMailChampis;
        $mailto_monMailChampis_ici="<a href=\"mailto:$monMailChampis\">ici</a>";
        $session['mailto_monMailChampis_ici']=$mailto_monMailChampis_ici;
        
        /****** DEBUG ******/
        $debug_mcc=false;
        if ($debug_mcc) {}
        /*******************/
        
        /*** Params vocaux ***/
        /*********************/
        if (!isset($_SESSION['passageVocalMCC'])) {
                $passageVocalMCC=1;
                $_SESSION['passageVocalMCC']=$passageVocalMCC;
        }
        else {
                $_SESSION['passageVocalMCC']++;
                $passageVocalMCC=$_SESSION['passageVocalMCC'];
        }
 
 
 
?>
<!--****************************-->
<!--  TABLE tableEnTete_indexMCC  -->
<!--****************************-->
<table id="tableEnTete_indexMCC" class="tableEnTete_indexMCC" style="text-align: center;">

**forumcmy** · 02/07/2024, 22h09

Bonsoir,
Je répond à 2 de tes questions :

La structure table n'est pas nécessaire : mais je ne vois pas comment présenter de façon ordonnée un nombre important de photos.
Pourquoi une fermeture automatique ? Parce que lorsqu'on laisse un popup ouvert et qu'on ferme le navigateur, à l'ouverture suivante il faudra recharger l'ensemble des onglets. Procéder de cette façon n'est pas une garantie mais à moins qu'il y ait une possibilité de fermer les fenêtres filles à la fermeture du navigateur, c'est ce que j'ai trouvé de mieux.

Je viens de tester les 2 méthodes que tu m'a proposé, méthode laide (

) et script extérieur. Elles fonctionnent très bien sauf que si on ferme la fenêtre appelante qui est aussi un popup à fermeture différée, le popup ouvert à partir de cette fenêtre ne se ferme plus.
Autant il est simple d'ouvrir un popup html ou php autant je ne vois pas comment interagir avec un popup contenant une image redimensionnée.
Mais bon, je ne voudrais pas abuser de ton temps, tu m'as déjà beaucoup aidé.

Fermeture automatique de POPUP

JavaScript

Discussions similaires

Partager

Partager