Problème avec target="popup" onclick="window.open"

bonjour,

tout est presque dans le titre !
La commande fonctionne bien mais présente un problème avec EDGE et FIREFOX .
Avec CHROME et OPERA, les fenêtres popup s'ouvrent bien dans l'espace qui leur est attribué dans la page courante, et à chaque appel d'un lien différent par le menu à gauche de la fenêtre, le popup précédent cède la place au suivant .
Avec EDGE et FIREFOX, la première fenêtre popup est bien à sa place, mais après, les autres popups passent en second plan par rapport à la fenêtre principale .
On est obligé d'aller à la barre de tâche sur l'icone du navigateur pour activer le popup et lui donner le focus ...

Je ne sais pas si cela est dû au code html, ou aux 2 navigateurs ...

Je vous joins le lien de la page, et le code correspondant aux popups .

<div class="liste"  style="position:absolute;  width:360px; left: 10px; top: 110px; background-color: #33FF99; layer-background-color: #33FF99; border:double; border-color:#CC3300; ">
<ul>
	<li><a href="Data Execution Prevent - DEP.txt" target="popup" onclick="window.open('Data Execution Prevent - DEP.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Data Execution Prevent - DEP</a><br> </li>
    <li><a href="Fichier manquant dans Dossier Maps.txt" target="popup" onclick="window.open('Fichier manquant dans Dossier Maps.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Fichier manquant dans Dossier Maps</a><br> </li>
    <li><a href="How to checksum.txt" target="popup" onclick="window.open('How to checksum.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">How to checksum</a><br> </li>
    <li><a href="Probleme visualisation Replay.txt" target="popup" onclick="window.open('Probleme visualisation Replay.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Problème visualisation Replay</a><br> </li>
    <li><a href="Reinstaller le jeu.txt" target="popup" onclick="window.open('Reinstaller le jeu.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Réinstaller le jeu</a><br> </li>
    <li><a href="Track-xx_X_Textures dans  MAPS.txt" target="popup" onclick="window.open('Track-xx_X_Textures dans  MAPS.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Track-xx_X_Textures dans  MAPS</a><br> </li>
    <li><a href="Troubleshoting tool.txt" target="popup" onclick="window.open('Troubleshoting tool.txt','popup','width=1000px,height=750px,left=550px,top=150px,scrollbars=1');return(false)">Troubleshoting tool</a><br> </li>
 
</ul>
</div>

.liste {overflow:auto; overflow-x:hidden; height: 800px;}

Si quelqu'un voit où se produit le soucis, je lui en serais reconnaissant !

Bonjour,

1) Utiliser un popup, c'est mal. Utiliser plein de popups, c'est le mal absolu.

Déjà, y a des utilisateurs qui configurent leur navigateur pour bloquer les popups (dont moi).

Ensuite, les différents navigateurs ne réagissent pas de la même manière, et même si tu en testes quelques uns, tu ne pourras pas tester tous les navigateurs de la terre entière.

Donc le premier problème, c'est que tu utilises des popups.

Je ne sais pas si le contenu des popups est imposant ou pas. Mais s'ils sont relativement petits et simples (ça a l'air d'être de petits fichiers textes), tu pourrais selon moi afficher leurs contenus dans ta page directement dans des balises <div> qui viendraient se placer où tu voudras. Pour récupérer le contenu de ces fichiers, quelques lignes d'AJAX en javascript feront l'affaire.

2) Evite les espaces dans tes noms de fichiers. C'est un nid à bug. Remplace les espaces par des "_" ou des "-".

3) Ton lien vers ta page ne marche pas.

Amicalement,

Désolé pour le lien ... c'était celui de mon serveur de tests ...
voici le bon lien

Juste pour comprendre le soucis .
Je compatis, et je comprends votre point de vue sur les popups, mais je n'ai pas trouvé d'autre méthode .
Ajax, c'est un dieu de la guerre, je crois chez les grecs ... non ? (je crois qu'ils étaient 2 d'ailleurs ... )

Je me sers de plusieurs navigateurs dont Chrome, qui est réglé pour refuser les popups, mais ma page fonctionne très bien malgré cela ... (Opera aussi, c'est bloqué pour les popups, et pourtant )
Modifié par 6troen (28 Dec 2018 - 16:35)

Bonjour,

J'ai à peu près la même chose avec firefox , safari et chrome sur un macintosh. Mais ils ne s'affichent pas dans le cadre de droite de ta page. Ils s'affichent en gros au milieu de l'écran. Et effectivement, firefox planque les popups sous ta fenêtre à partir du deuxième.

Ci-dessous une solution utilisant javascript/AJAX.

Si tu ne veux pas faire de javascript, une autre solution est d'insérer tous tes textes dans ta page et de les cacher initialement. Avec du code css approprié, on peut ensuite faire apparaitre ces textes où tu veux dans ta page via un clic sur le nom d'un fichier dans la liste de gauche. Je ne détaille pas plus cette deuxième solution pour l'instant, mais si tu le souhaites, je peux le faire.

Y avait du ménage à faire dans ton code.
- j'ai passé ta page en html5 (il s'agit des quelques lignes du début).
- j'ai simplifié le html (y avait de plus des erreurs de syntaxe).
- j'ai ajouté un code javascript qui récupère sur le serveur les fichiers textes en utilisant ce qu'on appelle AJAX. De plus, ce code montre ou cache les textes dans la page.
- j'ai essayé de conserver tes choix pour l'affichage (mais bon, il reste boulot !).
- on évite de mettre des attributs style="..." aux balises html. On met les styles dans la balise <style> ou dans un fichier externe. J'ai tout mis dans la balise <style>.
- de même, on n'utilise pas l'attribut align dans le html (par exemple align="center"). On met à la place dans le css text-align:center;. D'une manière générale, on ne met aucun attribut modifiant l'affichage dans le html.
- tu as mis un style en commentaire en utilisant <!-- --> (ne marche pas car c'est pour mettre en commentaire du html, pas du css). Il faut utiliser /* ... */ à la place pour mettre du css en commentaire. J'ai juste retiré les lignes en question.
- dans le css, on écrit éventuellement le code sur une ligne lorsqu'il n'y a qu'une seule propriété ou deux (par exemple a:link {color:blue;}). Quand il y en a beaucoup, c'est là qu'on écrit le css sur plusieurs lignes. Tu as fait l'inverse.
- j'ai supprimé les propriétés css layer-background-color et layer-background-image. Le seul navigateur qui les utilisait a disparu il y a une quinzaine d'années !!!

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Dépannages - Sujets Textes</title>
<link rel="icon" type="image/png" sizes="32x32"  href="../../images/i20-WRC-3.png" />
<style>
* {font-family:serif;font-size:1rem;}
body {background-color:#CCFFCC;}
.Style2 {
	font-size:1.125rem;
	font-weight:bold;
	color:#000066;
}
.Style3 {
	text-align:center;
	position:absolute;
	width:360px;
	height:50px;
	background-color:#33FFCC;
	border:double;
	border-color:#CC3300;
	top:15px;
	color:#000099;
}
#depannage {
	position:absolute;
	width:40px;
	height:40px;
	top:75px;
	left:160px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#depannage img {
	width:40px;
	height:35px;
	border:0;
}

/* affichage de la liste des noms de fichiers textes disponibles */
.liste {
	overflow:auto;
	overflow-x:hidden;
	position:absolute;
	height:800px;
	width:360px;
	left:10px;
	top:110px;
	background-color:#33FF99;
	border:double;
	border-color:#CC3300;
}
.liste button {
	border:0;
	background:none;
	padding:0;
	margin:0;
	color:blue;
	text-decoration:underline;
}
.liste button:hover {
	color:red;
}

/* affichage de la subaru et d'un lien géant pour l'afficher seule à l'écran */
.subaru03 {
	position:absolute;
	width:1200px;
	height:900px;
	left:378px;
	top:15px;
	background-image:url(../../../images/subaru03.jpg);
}
.subaru03 a {
	display:block;
	width:1200px;
	height:900px;
}

/* affichage des textes */
.sansAffichage {display:none;}
.avecAffichage {display:block;}
#affichage {
	position:absolute;
	max-width:60vw;
	margin:20vh 20vw;
}
#affichage button {
	border:0;
	vertical-align:middle;
	text-align:left;
	background:rgba(255,255,255,0.9);
	max-width:100%;
	overflow:hidden;
	hyphens:auto;
}
</style>
<script>
// code javascript pour montrer et cacher les textes
// la fonction montrerTexte() est exécutée
// quand on clique sur un nom de texte dans la liste
function montrerTexte(f)
{
	// f contient le nom d'un fichier texte
	// dont on veut montrer le contenu
	// ce contenu est inséré dans la balise <div id="affichage">
	// si on clique sur ce contenu, il se cachera automatiquement
	var xhr=new XMLHttpRequest();
  	xhr.open("GET",f,true);
	xhr.onreadystatechange=function()
	{
		if ((xhr.readyState==4)&&(xhr.status==200))
		{
			var a,s;
			a=document.getElementById('affichage');
			a.className="avecAffichage";
			s="<button onclick=\"cacherTexte();\">";
			s+=xhr.responseText;
			s+="</button>";
			a.innerHTML=s;
		}
    };
  	xhr.send();
}
// la fonction cacherTexte() est exécutée
// quand on clique sur le texte lui-même
function cacherTexte()
{
	// code exécuté quand on clique sur le texte affiché
	var a;
	a=document.getElementById('affichage');
	a.className="sansAffichage";
	a.innerHTML="";
}
</script>
</head>
<body>
<div class="Style2 Style3">
	Recueil de réponses à coller dans les posts<br>
	de dépannage correspondants
</div>

<div id="depannage">
  <a href="../index.htm"><img src="../../../images/logo_depannage.png"></a>
</div>

<div class="subaru03"><a href="../../../images/subaru03.jpg"></a></div>

<div class="liste">
<ul>
	<li><button onclick="montrerTexte('Data Execution Prevent - DEP.txt');">Data Execution Prevent - DEP</button></li>
    <li><button onclick="montrerTexte('Fichier manquant dans Dossier Maps.txt');">Fichier manquant dans Dossier Maps</button></li>
</ul>
</div>

<!--"affichage" : cadre dans lequel doit s'afficher le fichier texte sélectionné dans la liste-->
<div id="affichage" class="sansAffichage"></div>
<!--affichage-->
</body>
</html>

Amicalement,
Modifié par parsimonhi (28 Dec 2018 - 20:17)

Je préfère que tu ne regardes pas le reste du site, je ne voudrais pas être responsable d'un décès par crise d'apoplexie ...
Non, sans blaguer, ta version de cette page me bluffe !
C'est sûr que c'est plus aéré, léger et sûrement plus conforme à ce qu'on doit se faire à une page codée dans les normes ...
Mais le problème, c'est que je n'ai jamais étudié les langages, et j'ai toujours procédé à la louche, avec un logiciel d'édition et de création, et jamais retouché ce qu'il créait, sauf cas où cela ne convienne pas à ce que je cherchais à faire, auquel cas, j'allais chercher des exemples sur internet, dans les forums spécialisés, comme celui-ci !
Donc, bien incapable de comprendre les lignes de code en javascript, ou en Ajax, alors que je commence tout juste à comprendre le css et un peu plus le html .
A 75 ans, ce n'est pas facile d'apprendre quand on est pressé de voir son résultat de son vivant !

Je te remercie vivement pour cet exemple, qui va me servir d'inspiration pour retoucher certainement certaines de mes pages ...

Juste une question : le texte apparait, mais n'est pas formaté, on croirait un texte émis en SMS depuis un smartphone !
Je suis habitué à des retours à la ligne, comme l'usage de la langue française le préconise ..
Et aussi l'encadrement du texte avec une bordure .
Pourrais-tu me dire comment procéder ? Et où ?

Merci encore .

Bonjour,

6troen a écrit :
Je préfère que tu ne regardes pas le reste du site ...

Trop tard, c'est la première chose que j'ai faite ! Mais j'ai fermé les yeux tout de suite, et du coup je m'en suis sorti sans dommage

Ceci dit, je suis moi-même plutôt codeur et pas très fort en design. Donc bon, je ne vais pas critiquer.

6troen a écrit :
Juste une question : le texte apparait, mais n'est pas formaté, on croirait un texte émis en SMS depuis un smartphone !
Je suis habitué à des retours à la ligne, comme l'usage de la langue française le préconise ..
Et aussi l'encadrement du texte avec une bordure .
Pourrais-tu me dire comment procéder ? Et où ?

Cette absence de formatage provient du fait que tes fichiers sont des fichiers textes qui ne contiennent par conséquent rien qui puisse aider à faire ce formatage.

Une solution consiste à les transformer en html. C'est très simple :
- Tu peux ajouter des balises <p>...</p> autour des paragraphes.
- Tu peux remplacer les "XXXXXXX" par une balise <hr>
- Tu peux aussi remplacer les [URL= ...]...[/URL] (qu'on appelle au passage des BBCodes et qui sont utilisés par les CMS comme indication de ce qu'ils doivent faire du texte qu'ils contiennent, ici une lien) par des liens html <a href="...">...</a>. En gros, au lieu d'avoir un script qui remplace ces BBCodes par du html comme le ferait un CMS, c'est toi qui va faire cette transformation à la main.
- Tu peux aussi rajouter des styles dans le css pour modifier la présentation de ce texte. Par exemple, pour colorier les liens en rouge lorsque la souris passe dessus comme tu le fais ailleurs, tu rajoutes dans le css :

#affichage a:hover {color:red;}

Voici un exemple pour le premier texte qu'il suffit de mettre dans le fichier "Data Execution Prevent - DEP.txt" (éventuellement, même si ce n'est pas nécessaire, tu peux aussi remplacer le ".txt" par ".html", sans oublier de modifier aussi les noms de fichiers dans la liste de ta page html) :

<p>Si vous avez un programme anti-virus, vous devez indiquer une exception pour le dossier du jeu.</p>

<p>Ensuite, vérifiez que vous avez bien renseigné la zone DEP (Prévention d'Exécution des Données),
<a href="http://forum.rallyesim.fr/viewtopic.php?p=787&f=4#p787">comme il est indiqué dans le tutoriel
d'installation</a>, avec tous les fichiers exécutables indiqués.</p>

<hr>

<p>If you have an antivirus program, you must specify an exception for the game folder.</p>
Then make sure you have properly informed the DEP zone (Data Execution Prevent),
<a href="http://forum.rallyesim.fr/viewtopic.php?p=787&f=4#p787">as indicated in the installation tutorial</a>,
with all the listed executable files.</p>

Pour rajouter un cadre autour du texte, il suffit de rajouter par exemple dans les css :

#affichage button {border:double #CC3300;}

Important : les navigateurs utilisant AJAX ont la particularité de mettre en cache ce qu'ils récupèrent sur le serveur. Ce qui fait qu'en phase de développement, même si tu modifies tes fichiers textes, tu ne verras pas forcément de changement quand tu essaieras de les afficher dans ta page. Pour contourner ce problème, soit tu vides le cache de ton navigateur après chaque modification d'un de tes textes (mais c'est pénible), soit tu ajoutes dans le code javascript au début de la fonction montrerCache() juste après var xhr=new XMLHttpRequest(); la ligne suivante :

f=f+"?a="+Math.random();

Cette ligne est à supprimer une fois les modifications terminées (en gros, cette ligne est une astuce qui va forcer le navigateur à télécharger le fichier même s'il l'a déjà en cache, et même s'il est identique : acceptable en développement, moins acceptable en production même si ici les fichiers sont petits et peu nombreux).

Le code complet :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Dépannages - Sujets Textes</title>
<link rel="icon" type="image/png" sizes="32x32"  href="../../images/i20-WRC-3.png" />
<style>
* {font-family:serif;font-size:1rem;}
body {background-color:#CCFFCC;}
.Style2 {
	font-size:1.125rem;
	font-weight:bold;
	color:#000066;
}
.Style3 {
	text-align:center;
	position:absolute;
	width:360px;
	height:50px;
	background-color:#33FFCC;
	border:double #CC3300;
	top:15px;
	color:#000099;
}
#depannage {
	position:absolute;
	width:40px;
	height:40px;
	top:75px;
	left:160px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
#depannage img {
	width:40px;
	height:35px;
	border:0;
} 
.subaru03 {
	position:absolute;
	width:1200px;
	height:900px;
	left:378px;
	top:15px;
	background-image:url(../../../images/subaru03.jpg);
}
.subaru03 a {
	display:block;
	width:1200px;
	height:900px;
}
.liste {
	overflow:auto;
	overflow-x:hidden;
	position:absolute;
	height:800px;
	width:360px;
	left:10px;
	top:110px;
	background-color:#33FF99;
	border:double #CC3300;
}
.liste button {
	border:0;
	background:none;
	padding:0;
	margin:0;
	color:blue;
	text-decoration:underline;
}
.liste button:hover {
	color:red;
}

/* affichage des textes */
.sansAffichage {display:none;}
.avecAffichage {display:block;}
#affichage {
	position:absolute;
	z-index:1;
	max-width:60vw;
	margin:20vh 20vw;
}
#affichage button {
	border:double #CC3300;
	vertical-align:middle;
	text-align:left;
	background:rgba(204,255,204,0.9);
	max-width:100%;
	overflow:hidden;
	hyphens:auto;
}
#affichage a {color:blue;}
#affichage a:hover {color:red;}
</style>
<script>
// code pour montrer et cacher les textes
function montrerTexte(f)
{
	// f contient le nom d'un fichier texte
	// dont on veut montrer le contenu
	// ce contenu est inséré dans la balise <div id="affichage">
	// si on clique sur ce contenu, il se cachera automatiquement
	var xhr=new XMLHttpRequest();
	f=f+"?a="+Math.random();
	xhr.open("GET",f,true);
	xhr.onreadystatechange=function()
	{
		if ((xhr.readyState==4)&&(xhr.status==200))
		{
			var a,s;
			a=document.getElementById('affichage');
			a.className="avecAffichage";
			s="<button onclick=\"cacherTexte();\">";
			s+=xhr.responseText;
			s+="</button>";
			a.innerHTML=s;
		}
	};
	xhr.send();
}
function cacherTexte()
{
	// code exécuté quand on clique sur le texte affiché
	var a;
	a=document.getElementById('affichage');
	a.className="sansAffichage";
	a.innerHTML="";
}
</script>
</head>
<body>
<div class="Style2 Style3">
	Recueil de réponses à coller dans les posts<br>
	de dépannage correspondants
</div>

<div id="depannage">
	<a href="../index.htm"><img src="../../../images/logo_depannage.png"></a>
</div>

<div class="subaru03"><a href="../../../images/subaru03.jpg"></a></div>

<div class="liste">
	<ul>
		<li><button onclick="montrerTexte('Data Execution Prevent - DEP.txt');">Data Execution Prevent - DEP</button></li>
		<li><button onclick="montrerTexte('Fichier manquant dans Dossier Maps.txt');">Fichier manquant dans Dossier Maps</button></li>
		<li><button onclick="montrerTexte('How to checksum.txt');">How to checksum</button></li>
		<li><button onclick="montrerTexte('Probleme visualisation Replay.txt');">Probleme visualisation Replay</button></li>
		<li><button onclick="montrerTexte('Reinstaller le jeu.txt');">Reinstaller le jeu</button></li>
		<li><button onclick="montrerTexte('Track-xx_X_Textures dans  MAPS.txt');">Track-xx_X_Textures dans  MAPS</button></li>
		<li><button onclick="montrerTexte('Troubleshoting tool.txt');">Troubleshoting tool</button></li>
	</ul>
</div>

<!--"affichage" : cadre dans lequel doit s'afficher le fichier texte sélectionné dans la liste-->
<div id="affichage" class="sans-affichage"></div>
<!--affichage-->
</body>
</html>

Amicalement,

Je comprends à peu près ...
Mon soucis est que les fichiers sont crées avec le bloc-notes de Windows (notepad) .
Ce sont des copies de messages qui sont recueillis sur notre forum (forum.rallyesim.fr) quand on dépanne les pilotes qui ont des soucis .
On fait un copier coller du post de réponse qu'on leur fait vers notepad, et au prochain dépannage d'un autre pilote, si c'est le même symptôme on fait l'inverse, on recopie de notepad vers le post de réponse au pilote, çà nous évite de retaper à chaque fois .
Donc, le BBCode je ne peux pas le zapper, ni modifier quoique ce soit , sinon, quand je vais avoir besoin du texte, il ne pourra pas cadrer avec le standard du forum (le html n'est pas autorisé dans les posts) ...

Il faut que je trouve autre chose pour garder les fichiers "tels quels" ...

En tout cas merci pour ces cours magistraux .

Bonjour,

On ne va pas se laisser arrêter pour si peu.

Je t'ai rajouté un analyseur de tes fichiers textes qui ajoute le html qui va à peu près bien (la fonction formaterTexte() dans le javascript). Je n'ai pas cherché à optimiser : c'est du vite-fait.

La seule contrainte pour faire apparaitre un paragraphe, c'est d'avoir 2 retours à la ligne successifs dans les fichiers textes (c'est déjà le cas la plupart du temps dans tes exemples).

Je n'ai traité que les BBCodes présents dans les exemples de ta page. Il est possible qu'il faille à l'avenir adapter cette fonction si d'autres BBCodes sont employés. Si des BBCodes inconnus sont dans les fichiers textes, je me contente de les supprimer (tout en affichant quand même ce qu'ils contiennent).

J'ai supprimé les émoticônes. On peut éventuellement les conserver : il suffit de mettre en commentaire les lignes correspondantes dans la fonction formaterTexte() (pour cela, ajouter // devant la ligne). Si d'autres émoticônes sont employés, on peut aussi rajouter assez facilement leur suppression dans la fonction formaterTexte(). On pourrait enfin faire apparaitre de jolis émoticônes dans le texte (c'est un autre sujet à lui tout seul).

J'ai aussi fait quelques modifications cosmétiques dans le reste du code.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Dépannages - Sujets Textes</title>
<link rel="icon" type="image/png" sizes="32x32"  href="../../images/i20-WRC-3.png" />
<style>
* {font-family:serif;font-size:1rem;}
body {background-color:#CCFFCC;}
.Style2 {
	font-size:1.125rem;
	font-weight:bold;
	color:#000066;
}
.Style3 {
	text-align:center;
	position:absolute;
	width:360px;
	height:50px;
	background-color:#33FFCC;
	border:double #CC3300;
	top:15px;
	color:#000099;
}
.depannage {
	position:absolute;
	width:40px;
	height:40px;
	top:75px;
	left:160px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}
.depannage img {
	width:40px;
	height:35px;
	border:0;
} 
.subaru03 {
	position:absolute;
	width:1200px;
	height:900px;
	left:378px;
	top:15px;
	background-image:url(../../../images/subaru03.jpg);
}
.subaru03 a {
	display:block;
	width:1200px;
	height:900px;
}
.liste {
	overflow:auto;
	overflow-x:hidden;
	position:absolute;
	height:800px;
	width:360px;
	left:10px;
	top:110px;
	background-color:#33FF99;
	border:double #CC3300;
}
.liste button {
	border:0;
	background:none;
	padding:0;
	margin:0;
	color:blue;
	text-decoration:underline;
}
.liste button:hover {
	color:red;
}

/* affichage des textes */
.sansAffichage {display:none;}
.avecAffichage {display:block;}
#affichage {
	position:absolute;
	z-index:1;
	max-width:60vw;
	margin:20vh 20vw;
}
#affichage button {
	border:double #CC3300;
	vertical-align:middle;
	text-align:left;
	background:rgba(204,255,204,0.9);
	max-width:100%;
	overflow:hidden;
	hyphens:auto;
}
#affichage a {color:blue;}
#affichage a:hover {color:red;}
#affichage img {max-width:100%;}
</style>
<script>
// code pour formater un texte contenant des BBCodes
function formaterTexte(s)
{
	// s est le texte à formater
	var r;
	r=s;
	// remplace toute répétition de plus de 10 caractères par un <hr>
	r=r.replace(/[xX=*]{10,}/g,"<hr>");
	// traite les BBCodes connus
	r=r.replace(/\[(\/?)b\]/g,"<$1b>");
	r=r.replace(/\[hr\]/g,"<hr>");
	r=r.replace(/\[color=([^\]]+)\]([^\[]+)\[\/color\]/g,"<span style=\"color:$1;\">$2</span>");
	r=r.replace(/\[url=([^\]]+)\]([^\[]+)\[\/url\]/g,"<a href=\"$1\">$2</a>");
	r=r.replace(/\[url\]([^\[]+)\[\/url\]/g,"<a href=\"$1\">$1</a>");
	r=r.replace(/\[img\]([^\[]+)\[\/img\]/g,"<img src=\"$1\">");
	r=r.replace(/\[miniature\]([^\[]+)\[\/miniature\]/g,"<img src=\"$1\">");
	// traite les retours à la ligne
	r=r.replace(/\r\n/g,"\n");
	r=r.replace(/\n\r/g,"\n");
	r=r.replace(/\r/g,"\n");
	r=r.replace(/\n-/g,"<br>-");
	r=r.replace(/([^\n])\n([^\n])/g,"$1 $2");
	r=r.replace(/(^|\n{2})([^\n]+)($|\n{2})/g,"<p>$2</p>");
	// supprime des smileys
	r=r.replace(/:-s/g,"");
	r=r.replace(/:D/g,"");
	r=r.replace(/:\(->/g,"");
	r=r.replace(/\s+\./g,".");
	r=r.replace(/\s+\)/g,")");
	// supprime tous les autres BBCodes
	r=r.replace(/\[[^\]]+\]([^\[]+)\[\/[^\]]+\]/g,"$1");
	return r;
}
// code pour montrer et cacher les textes
function montrerTexte(f)
{
	// f contient le nom d'un fichier texte
	// dont on veut montrer le contenu
	// ce contenu est inséré dans la balise <div id="affichage">
	// si on clique sur ce contenu, il se cachera automatiquement
	var xhr=new XMLHttpRequest();
	f=f+"?a="+Math.random();
  	xhr.open("GET",f,true);
	xhr.onreadystatechange=function()
	{
		if ((xhr.readyState==4)&&(xhr.status==200))
		{
			var a,s;
			a=document.getElementById('affichage');
			a.className="avecAffichage";
			s="<button onclick=\"cacherTexte();\">";
			s+=formaterTexte(xhr.responseText);
			s+="</button>";
			a.innerHTML=s;
		}
    };
  	xhr.send();
}
function cacherTexte()
{
	// code exécuté quand on clique sur le texte affiché
	var a;
	a=document.getElementById('affichage');
	a.className="sansAffichage";
	a.innerHTML="";
}
</script>
</head>
<body>
<div class="Style2 Style3">
	Recueil de réponses à coller dans les posts<br>
	de dépannage correspondants
</div>

<div class="depannage">
	<a href="../index.htm"><img src="../../../images/logo_depannage.png"></a>
</div>

<div class="subaru03"><a href="../../../images/subaru03.jpg"></a></div>

<div class="liste">
	<ul>
		<li><button onclick="montrerTexte('Data Execution Prevent - DEP.txt');">Data Execution Prevent - DEP</button></li>
		<li><button onclick="montrerTexte('Fichier manquant dans Dossier Maps.txt');">Fichier manquant dans Dossier Maps</button></li>
		<li><button onclick="montrerTexte('How to checksum.txt');">How to checksum</button></li>
		<li><button onclick="montrerTexte('Probleme visualisation Replay.txt');">Probleme visualisation Replay</button></li>
		<li><button onclick="montrerTexte('Reinstaller le jeu.txt');">Reinstaller le jeu</button></li>
		<li><button onclick="montrerTexte('Track-xx_X_Textures dans  MAPS.txt');">Track-xx_X_Textures dans  MAPS</button></li>
		<li><button onclick="montrerTexte('Troubleshoting tool.txt');">Troubleshoting tool</button></li>
	</ul>
</div>

<!--"affichage" : cadre dans lequel doit s'afficher le fichier texte sélectionné dans la liste-->
<div id="affichage" class="sansAffichage"></div>
<!--affichage-->
</body>
</html>

Amicalement,
Modifié par parsimonhi (29 Dec 2018 - 14:45)

Pfffff ..... de plus en plus balaise !
Mais là, je me suis mal expliqué .
Depuis le post que j'édite sur le forum où j'officie, je fais une copie du texte que je viens d'écrire "tel que", que je colle dans notepad .
Le but pour moi, c'est de l'avoir sous la main en cas de nouveau sujet d'une demande d'aide avec les mêmes symptômes de la part d'un gars du site des rallyes .
Je vais gagner du temps, car au lieu de ré-écrire ce que j'ai écrit à d'autres dans un tel cas, je prends mon texte, un copier-coller du notepad vers mon post, et j'envoie .

Le code tel que je l'édite avec bbcodes, smilies, liens etc, tout est en texte .

Si au lieu d'aller sur mon site à cette page web où j'ai les fichiers, j'allais directement dans mon explorer windows dans le dossier où sont les fichiers originaux, je copierais bien "tel que" .

C'est parce que c'est plus rapide pour moi de consulter la page web et de copier le texte à partir du fichier que je visualise et de le coller dans le nouveau post sur lequel je réponds au pilote que je privilégie cette méthode.
C'est juste pour faire un copier-coller que je veux avoir le fichier en page web.
Donc, si tu me fait apparaitre le "résultat final" visible par le pilote que je dépanne, çà n'a pas d'intérêt pour moi ! Il faut bien que je le mette en code dans mon post !
Prenons l'exemple du fichier en fin de liste "troubleshoting tool"
Il apparait avec les images au lieu des liens dans leurs bbcodes, et je ne peux pas copier l'image .... pour la coller dans le post et je n'ai plus ma syntaxe de mes symboles BBcodes (ni les smilies) qui vont être interprétés quand je vais envoyer le post .
Çà m'embête que tu te donnes tout ce mal, surtout avec un tel empressement, mais sur la version encore en place de la page web, quand apparait la fenêtre contenant mon texte, il est tel que j'en ai besoin pour en faire un copier-coller ...
Si tu veux me poster une image depuis le forum Alsacréations, il faut bien que dans ton post, l'image soit "codée", c'est à dire du texte décrivant son adresse entre ses balises bbcode [/url]et les smilies d'expression représentés par leur code interprété par le serveur qui héberge le forum, autrement tu ne peux pas m'envoyer "directement" l'image ...
Et de plus, à partir du résultat que tu m'offres, on ne peut pas faire de copier-coller ... dès que tu cliques dedans, le texte disparait de l écran .

Voilà, je te remercie quand-même du temps que tu me consacres et de l'énergie et la volonté que tu y mets, et bon, malgré tout, si tu trouves une solution à tout ce problème, je serais bien embêter de trouver comment te remercier ...
Modifié par 6troen (30 Dec 2018 - 08:12)

Bonjour,

Voici une version où le texte est affiché tel quel et on peut le sélectionner. J'ai rajouté un bouton pour fermer la fenêtre. J'avais aussi fait hier une refonte du style pour qu'il n'y ait plus tous ces position:absolute qui sont pénibles à gérer. Il ne reste que ceux pour positionner les textes au milieu de la fenêtre. Au passage, cette page devrait être responsive (mais je n'ai pas vraiment testé).

Ne t'inquiète pas trop pour le temps que j'ai pu y passer. D'une part, j'ai posté des réponses parce que certains détails m'intéressaient. Et d'autre part je n'y ai pas passé tant de temps que ça (probablement moins de 2h en tout depuis le début). Et en terme de réalisation, j'ai essentiellement fait du copier-coller avec du code que j'avais déjà par ailleurs.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Dépannages - Sujets Textes</title>
<link rel="icon" type="image/png" sizes="32x32"  href="../../images/i20-WRC-3.png" />
<style>
* {
	font-family:serif;
	box-sizing:border-box;
	white-space:normal;
}
body {
	background-color:#CCFFCC;
	margin:0;
	padding:10px;
	white-space:nowrap;
}

/* affichage du menu de gauche */
.menu {
	display:inline-block;
	margin-right:10px;
	width:360px;
	max-width:100%;
}
.entete {
	font-size:1.125rem;
	font-weight:bold;
	color:#000066;
	text-align:center;
	height:50px;
	background-color:#33FFCC;
	border:double #CC3300;
	color:#000099;
}
.depannage {
	display:block;
	height:50px;
	line-height:50px;
	text-align:center;
	padding:0;
	margin:0;
}
.depannage img {
	width:40px;
	height:35px;
	border:0;
	vertical-align:middle;
} 
.liste {
	overflow:auto;
	overflow-x:hidden;
	height:800px;
	background-color:#33FF99;
	border:double #CC3300;
	margin:0;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
}
.liste button {
	border:0;
	background:none;
	padding:0;
	margin:0;
	color:blue;
	text-decoration:underline;
	font-size:1rem;
}
.liste button:hover {
	color:red;
}

/* affichage de la subaru */
.subaru03 {
	display:inline-block;
	width:1200px;
	height:900px;
	background-image:url(../../../images/subaru03.jpg);
}

/* affichage des textes */
.sansAffichage {display:none;}
.avecAffichage {display:block;}
#affichage {
	position:absolute;
	top:85px;
	left:50%;
	width:640px;
	margin-left:-320px;
	border:double #CC3300;
	text-align:left;
	background:rgba(204,255,204,0.9);
	hyphens:auto;
	padding:0.25em;
}
#affichage div {
	overflow:hidden;
}
#affichage button {
	display:block;
	position:absolute;
	width:2rem;
	height:2rem;
	top:-1rem;
	right:-1rem;
	color:transparent;
	border:double #CC3300;
	background:rgba(204,255,204,1);
	border-radius:1rem;
	padding:0;
	margin:0;
	cursor:pointer;
}
#affichage button:before,
#affichage button:after {
	content:"x";
	display:block;
	z-index:1;
	position:absolute;
	top:0.25rem;
	bottom:0.25rem;
	left:0.75rem;
	right:0.75rem;
	background-color:black;
}
#affichage button:before {
	transform:rotate(45deg);
}
#affichage button:after {
	transform:rotate(-45deg);
}
#affichage a {color:blue;}
#affichage a:hover {color:red;}
#affichage img {max-width:100%;}
@media screen and (max-width:816px) {
	#affichage {
		left:50%;
		width:80%;
		margin-left:-40%;
	}
}
</style>
<script>
// code pour montrer et cacher les textes
function montrerTexte(f)
{
	// f contient le nom d'un fichier texte
	// dont on veut montrer le contenu
	// ce contenu est inséré dans la balise <div id="affichage">
	// quand on cliquera sur le bouton de fermeture, il se cachera automatiquement
	var xhr=new XMLHttpRequest();
	f=f+"?a="+Math.random();
  	xhr.open("GET",f,true);
	xhr.onreadystatechange=function()
	{
		if ((xhr.readyState==4)&&(xhr.status==200))
		{
			var a,s;
			a=document.getElementById('affichage');
			a.className="avecAffichage";
			s="<div>"+xhr.responseText+"</div>";
			s+="<button onclick=\"cacherTexte();\">";
			s+="Fermer";
			s+="</button>";
			a.innerHTML=s;
		}
    };
  	xhr.send();
}
function cacherTexte()
{
	// code exécuté quand on clique sur le bouton de fermeture
	var a;
	a=document.getElementById('affichage');
	a.className="sansAffichage";
	a.innerHTML="";
}
</script>
</head>
<body>
<nav class="menu">
	<div class="entete">
		Recueil de réponses à coller dans les posts<br>
		de dépannage correspondants
	</div>
	<a class="depannage" href="../index.htm">
		<img src="../../../images/logo_depannage.png">
	</a>
	<ul class="liste">
		<li><button onclick="montrerTexte('Data Execution Prevent - DEP.txt');">Data Execution Prevent - DEP</button></li>
		<li><button onclick="montrerTexte('Fichier manquant dans Dossier Maps.txt');">Fichier manquant dans Dossier Maps</button></li>
		<li><button onclick="montrerTexte('How to checksum.txt');">How to checksum</button></li>
		<li><button onclick="montrerTexte('Probleme visualisation Replay.txt');">Probleme visualisation Replay</button></li>
		<li><button onclick="montrerTexte('Reinstaller le jeu.txt');">Reinstaller le jeu</button></li>
		<li><button onclick="montrerTexte('Track-xx_X_Textures dans  MAPS.txt');">Track-xx_X_Textures dans  MAPS</button></li>
		<li><button onclick="montrerTexte('Troubleshoting tool.txt');">Troubleshoting tool</button></li>
	</ul>
<!-- </nav><a> doivent être jointifs, sinon on ne maitrise pas la distance en px qui les séparera à l'affichage -->
</nav><a class="subaru03" href="../../../images/subaru03.jpg"></a>
<!--"affichage" : cadre dans lequel doit s'afficher le fichier texte sélectionné dans la liste-->
<div id="affichage" class="sansAffichage"></div>
<!--affichage-->
</body>
</html>

Amicalement,
Modifié par parsimonhi (30 Dec 2018 - 10:47)

Ok je peux faire le copier-coller, mais on en revient à ce que je n'ai plus de mise en forme ....
c'est à dire les paragraphes et retours à la ligne .
pour moi, voilà ce que çà donne :
je copie sur la page web que tu me fais et je colle dans mon post :
post en cours d'édition :


aperçu de ce que va voir le destinataire du post :

C'est illisible pour un gars "standard" ....
alors que si je fais avec ma page web actuelle :
post en cours d'édition :


aperçu de ce que va voir le destinataire du post :



Amicalement .
Modifié par 6troen (30 Dec 2018 - 11:02)

Voilà, je constate que quand tu tiens un os, tu n'est pas prêt à le lâcher !

C'est une merveille .
Juste le détail qui tue ... : pourquoi l'image de background est devenue "cliquable" ?

Autrement, c'est exactement ce que je ne pouvais espérer réaliser avec mes faibles connaissances en la matière !
Je te remercie pour ta ténacité .
Peut-être aurais-je encore l'occasion de te revoir sur d'autres sujets sur le forum .

Bonjour,

Les <br> que j'avais dû ajouter dans ma version précédente me chagrinaient, ainsi que le fait qu'un clic sur les libellés ne permettait d'afficher le texte correspondant et aussi quelques autres détails. Voici une version qui corrige ces points.

Le html du départ a pris cher . Il n'en reste plus grand chose.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<title>Dépannages - Sujets Textes</title>
<link rel="icon" type="image/png" sizes="32x32"  href="../../images/i20-WRC-3.png" />
<style>
* {
	font-family:serif;
	box-sizing:border-box;
	white-space:normal;
}
body {
	background-color:#CCFFCC;
	margin:0;
	padding:10px;
	white-space:nowrap;
}

/* affichage de la partie de gauche */
main {
	display:inline-block;
	margin-right:10px;
	width:360px;
	max-width:100%;
	vertical-align:top;
}
.entete {
	font-size:1.125rem;
	font-weight:bold;
	color:#000066;
	text-align:center;
	height:50px;
	background-color:#33FFCC;
	border:double #CC3300;
	color:#000099;
}
.depannage {
	display:block;
	width:40px;
	height:35px;
	margin:8px auto 7px auto;
}
.depannage img {
	width:40px;
	height:35px;
	border:0;
} 
.liste {
	overflow:auto;
	overflow-x:hidden;
	height:800px;
	background-color:#33FF99;
	border:double #CC3300;
	margin:0;
	padding:0.5rem;
}
.liste label:not([for="fermer"]) {
	display:block;
	color:blue;
}
.liste label:not([for="fermer"]):hover {
	color:red;
}

/* affichage des textes */
.liste iframe {
	display:none;
	position:absolute;
	top:85px;
	left:50%;
	width:640px;
	height:50%;
	margin-left:-320px;
	border:double #CC3300;
	background:rgba(204,255,204,0.9);
}
.liste input:checked + iframe {
   display:block;
}

/* gestion du bouton "fermer" qui est en fait le dernier input radio */
.liste #fermer,
.liste label[for="fermer"] {
   display:block;
}
.liste #fermer:checked,
.liste #fermer:checked + label[for="fermer"] {
	display:none;
}
.liste #fermer,
.liste label[for="fermer"] {
	position:absolute;
	width:2rem;
	height:2rem;
	top:calc(85px - 1rem);
	right:calc(50% - 320px - 1rem);
	color:transparent;
	border:double #CC3300;
	border-radius:1rem;
	padding:0;
	margin:0;
	cursor:pointer;
	overflow:hidden;
}
.liste #fermer {
	opacity:0;
}
.liste label[for="fermer"] {
	z-index:1;
	background:rgba(204,255,204,1);
}
.liste label[for="fermer"]:before,
.liste label[for="fermer"]:after {
	content:"x";
	display:block;
	z-index:2;
	position:absolute;
	top:0.25rem;
	bottom:0.25rem;
	left:0.75rem;
	right:0.75rem;
	background:black;
}
.liste label[for="fermer"]:before {
	transform:rotate(45deg);
}
.liste label[for="fermer"]:after {
	transform:rotate(-45deg);
}

/* affichage de la subaru */
.subaru03 {
	display:inline-block;
	width:1200px;
	height:900px;
	background-image:url(../../../images/subaru03.jpg);
	vertical-align:top;
}

/* un zeste de responsive */
@media screen and (max-width:816px) {
	.liste iframe {
		left:50%;
		width:80%;
		margin-left:-40%;
	}
	.liste #fermer,
	.liste label[for="fermer"] {
		right:calc(10% - 1rem);
	}
}
@media screen and (max-width:400px) {
	body {
		white-space:normal;
	}
	.subaru03 {
		width:360px;
		height:270px;
		background-size:cover;
	}
}
</style>
</head>
<body>
<main>
	<div class="entete">
		Recueil de réponses à coller dans les posts
		de dépannage correspondants
	</div>
	<a class="depannage" href="../index.htm">
		<img src="../../../images/logo_depannage.png">
	</a>
	<div class="liste">
		<label>
			<input type="radio" name="magic">
			Data Execution Prevent - DEP
			<iframe src="Data Execution Prevent - DEP.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			Fichier manquant dans Dossier Maps
			<iframe src="Fichier manquant dans Dossier Maps.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			How to checksum
			<iframe src="How to checksum.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			Probleme visualisation Replay
			<iframe src="Probleme visualisation Replay.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			Reinstaller le jeu
			<iframe src="Reinstaller le jeu.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			Track-xx_X_Textures dans  MAPS
			<iframe src="Track-xx_X_Textures dans  MAPS.txt"></iframe>
		</label>
		<label>
			<input type="radio" name="magic">
			Troubleshoting tool
			<iframe src="Troubleshoting tool.txt"></iframe>
		</label>
		<input id="fermer" type="radio" name="magic" checked>
		<label for="fermer">Aucun</label>
	</div>
<!-- </main><a> doivent être jointifs, sinon on ne maitrise pas la distance en px qui les séparera à l'affichage -->
</main><a class="subaru03" href="../../../images/subaru03.jpg"></a>
</body>
</html>

Amicalement,

Bonjour,

6troen a écrit :
Voilà, je constate que quand tu tiens un os, tu n'est pas prêt à le lâcher !

C'était intéressant !

6troen a écrit :
C'est une merveille .
Juste le détail qui tue ... : pourquoi l'image de background est devenue "cliquable" ?

Dans ta version initiale, tu avais la <div id="affichage"> qui venait s'afficher par dessus la photo tout en étant transparente. La photo était "cliquable", mais seulement à certains endroits.

Maintenant, il n'y a plus rien qui vient s'afficher par dessus la photo (sauf quand on affiche les textes bien entendu).

Amicalement,

Bien!
Mais dans le coup, çà n'est plus compatible avec IE11 (Windows 8.1 & 8) ...
Et j'ai encore pas mal de pilotes en Windows 7 (IE 10 & 9) j(en ai même un en Vista home ! )
Par contre, avec Edge, et les autres navigateurs courants, pas de problème .

Aurais-tu encore assez d'énergie pour solutionner ce point .?

Allez, c'est l'heure idéale pour :
Modifié par 6troen (30 Dec 2018 - 19:38)

Bonjour,

Je ne vois pas ce qui ne marche pas avec ie11.

EDIT: j'ai testé avec la toute dernière version que j'ai postée

C'est d'ailleurs étonnant que ça marche sous edge et mon ie11. Je ne l'ai pas fait exprès

Pour les navigateurs plus anciens, je n'ai rien pour tester. Désolé.

Amicalement,
Modifié par parsimonhi (30 Dec 2018 - 20:31)

Chez moi :


Le div du menu est passé horizontalement et occupe toute la page, et aucun texte n'apparait quand je coche .

En faisant défiler verticalement, la voiture est dessous :

Bonjour,

J'ai pas ça du tout. Quel OS, et quel version exactement de ie11?

Vide soigneusement le cache aussi. On ne sait jamais.

Amicalement,

Windows 8.1 x64 .



Cache vidé, toujours pareil ...
J'ai un autre PC sous W8.1 aussi, je vais regarder avec, le temps de booter sur le bon système ...