Exécuter du HTML tout frais

Version imprimable

21/07/2016, 09h27
Athur

Exécuter du HTML tout frais

Bonjour,
Avec une fonction javascript j'écris par innerHTML du texte au format HTML dans un DIV en display none.
La fonction se termine par un display block, le texte au format html s'affiche alors correctement sur l'écran, il contient des liens (HREF) qui s'affichent correctement aussi (soulignés), cependant quand je passe la souris sur les liens il ne se passe rien (elle ne se transforme pas en main) et je ne peux pas cliquer sur les liens.
21/07/2016, 11h50
-Rpass-

Comment sont construit tes liens ? Curieux comme bug donne nous le HTML et le script js pour peut-être trouver le problème

exécuter des liens

bout de code: passage de paramètres via PHP à la fonction js et appel de la fonction d'affichage: affiche
100 lignes PHP/HTML puis:

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
 
		echo '<script type="text/javascript"><!--
			var islocked=false;
			var indexcourant=0;
			var nbre='.($n-1).';
			var cheminmax="'.$prefixmax.'";
			var cheminmin="'.$xprefix.'";
			var mesphotos=['.$names.'];
			var largeurs=['.$stringl.'];
			var hauteurs=['.$stringh.'];
			var extjs=['.$extforjs.'];
			var codert='.$codrt.';
			var ypage="'.$xpage.'";
			var ycv='.$xcv.';
			if(ycv>0)
			{
				var cvparam1="'.$ycomment1.'";
				var cvparam2="'.$ycomment2.'";
				var filetxt1="'.$txtfile1.'";
				var filetxt2="'.$txtfile2.'";
				affiche(ycv-1, 0);
			}
			--></script>'; // construction du tableau pour js, (var nbre = $n-1 car la ligne 0 (nom du répertoire et 
		?>
		<!--</div>-->
		<?php

début fonction affiche;

Code:

1
2
3
 
function affiche(idx, qui)
{

30 lignes de code puis ce qui est le cas ici (au 1er appel qui=0 (cas spécifique)) on ne déroule pas tout le code du 1er coup, on se rappelle par lanceur au bout de 100ms:

Code:

1
2
3
4
5
6
7
8
 
	if(qui<2) // lancement par précédent ou suivant et clic sur la mini-photo
	{
		//document.getElementById('photo').setAttribute("src", cheminmin+mesphotos[idx]+'.jpg'); // ?????????????
		setTimeout(lanceur,100); // on temporise le temps que la page noire se charge sinon on observe une déformation de l'image précédente avant son remplacement par la nouvelle image
		return;
	} else
	{

(lanceur rappelle affiche avec les mêmes paramètres mais avec qui=2) ce qui fait qu'au 2ème passage on déroule tout le code et 200 lignes plus loin on termine la fonction par:

Code:

1
2
3
4
5
6
7
8
9
10
 
	} else
	{
		iddroite.style.opacity=0.5;
		ximgid.setAttribute("src", cheminmin+mesphotos[idx]+'.jpg');
		text1id.innerHTML=cvparam1;
		text2id.innerHTML=cvparam2;
		divmodalx.style.display="block"; // zone noire + textes
		divmodal2.style.display="block"; // sous-zone de clics		
	}

bout de code HTML (DIV) auquel s'applique cette fonction (mis en place par PHP dans le cas spécifique):

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
		<div id="modale1">
			<img src=# id="photo"/>
		</div>
		<div id="modalex">
			<div id="encaps">
				<div id="supyphot"><img src=# id="xphoto"/><div id="text1"></div></div>
				<div id="text2"></div>
			</div>
		</div>		
		<div id="modale2">
			<div id="zonarrowg" onmouseover="opacifie(this)" onmouseout="eclaircie(this)">
				<div id="contarrowg">
					<a href="javascript:precedent()"><img src="images/arrowg.png" id="arrowg">
				</div>
			</div>
			<div id="zonarrowd" onmouseover="opacifie(this)" onmouseout="eclaircie(this)">
				<div id="contcroix">
					<a href="javascript:fermer()"><img src="images/croix.png" id="croix">
				</div>		
				<div id="contarrowd">
					<a href="javascript:suivant()"><img src="images/arrowd.png" id="arrowd">
				</div>
			</div>
		</div>

Je ne suis pas sûr que tout ceci apporte plus d'élément que ma première formulation

21/07/2016, 14h56
Christophe P.

Bonjour,

je n'ai fait qu'un survol rapide du code :
- "return;" Est-ce vraiment utile ?
- Les balises A ne sont pas fermées.
21/07/2016, 20h27
Athur

Explication complémentaire

Le code (200 lignes en js, plus de 300 en php et html sans compter toutes les autres fonctions) risque d'être assez pénible à étudier, mais sans avoir trouvé la solution, je crois avoir trouvé la cause.
Je pense que ça vient du fait que l'insertion par js du code html dans un div n'est pas directement déclenchée par un clic de l'utiilisateur !
Je m'explique: au départ il y a bien un clic utilisateur qui déclenche un processus, mais pour traiter cette demande spécifique de l'utilisateur j'ai besoin de lire des fichiers .txt qui contiennent le code à insérer, or la lecture de fichiers .txt par javascript n'étant pas conseillée, je procède de la manière suivante:
le clic de l'utilisateur lance une petite fonction javascript qui se contente (une fois de plus de recharcher la page d'accueil avec un code retour spécifique en ligne de commande), lors du rechargement de la page d'accueil avec ce code retour PHP après avoir régénéré la page lit les fichiers textes dont j'ai besoin range les contenus dans des strings au format js (qui deviennent donc des données globales pour js), puis appelle directement la fonction js (via un echo contenant du javascript qui appelle directement la fonction javascript), fonction qui va maintenant pouvoir lire les strings en données globales pour les installer dans les div par innerHTML. En fait c'est dans ce cas la fin de chargement de la page d'accueil qui appelle directement js et non directement un clic !
Tout s'affiche correctement mais les liens affichés restent muets.
Si vous avez une solution, autre que de lire des fichiers textes avec du js, je suis preneur.
Merci
22/07/2016, 14h53
Athur

Solution et question

J'ai trouvé, mais à mon avis c'est un mauvais fonctionnement ou un fonctionnement que j'estime inattendu des navigateurs et en particulier de l'exploitation des process liés à z-index. Pour ceux que ça intéresse, voici l'explication ci-dessous:
Pour comprendre, décrivons tout d'abord les cas qui fonctionnent parfaitement:
J'ai un div A de couleur peu importe, disons noire, de taille T encapsulant un div A1 de taille t plus petite et destiné à recevoir une image ou du texte. J'ai également un div B de couleur noire de taille T égale à A contenant aux extrêmités horizontales des petites images < et > et en haut à droite un X permettant de faire le passage aux documents suivants ou de fermer le document en cours, ce div B contient également des sous-div qui permettent avec le css approprié de faire passer en surbrillance les <, > et X lorsqu'on s'en approche.
Les div A et B sont placés en fixed exactement au même endroit de l'écran et par des z-index de la manière suivante:
A est le plus profond, B est au-dessus de A, et A1 (qui est encapsulé par A) est au-dessus de B donc au-dessus de tout.
L'image ou le texte de A1 apparaît donc correctement avec une bande noire de chaque côté contenant le <, > et X et comme les instructions de gestion de <, >, X sont juste au-dessous de A1, la surbrillance des éléments fonctionne correctement pendant le survol de l'image ou du texte contenu dans A1.
Là où ça ne fonctionne plus, c'est quand le texte de A1 contient des liens, les liens s'affichent correctement mais pour ce qui est de leur fonctionnement les navigateurs ne tiennent pas compte du z_index et considèrent qu'ils sont dans A qui est au-dessous de tout, c'est la raison pour laquelle ils restent muets.
Certains vont me répondre: vous n'avez qu'à faire passer A au-dessus de B, le résultat c'est que les liens fonctionnent bien, mais la gestion de la surbrillance des <, > et X ne fonctionne plus au survol de l'image ou du texte pour la même raison que celle qui vient d'être expliquée.
Ce qui m'intéresserait surtout maintenant c'est de savoir si, à votre avis, ce fonctionnement des navigateurs est normal: en résumé: ils tiennent compte du z-index pour l'affichage des liens, mais pas pour leur déclenchement !

Bonjour,

Citation:

Ce qui m'intéresserait surtout maintenant c'est de savoir si, à votre avis, ce fonctionnement des navigateurs est normal:

oui, le z-index n'agit que dans un même « contexte d'empilement », et la propriété opacity influe sur la valeur du z-index.

pour plus d'informations, je t'engage à lire : Ce que personne ne vous a jamais dit à propos de z-index.

J'ai quand même une interrogation, pourquoi aussi compliqué, il me semble qu'il y a plus simple et si j'ai tout bien saisie voici un exemple
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 34 35 36 37 38 39 40 41 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:hover simple</title> <style> #main { position:relative; width:300px; border:1px solid #abc; margin:auto; padding:1em; background:#cde; } .move { opacity:0.3; position:absolute; top:50%; } .move a { text-decoration:none; } .left { left:-1em; } .right { right:-1em; } #main:hover .move { opacity:1; } </style> </head> <body> <div id="main"> <div class="move left"><a href="#left">◀ Left</a></div> <div class="move right"><a href="#right">Right ▶</a></div> <img src="http://club.developpez.com/webdesign/_inc/webdesign.gif"> </div> </body> </html>