Discussion :

[boteha]

Bonjour Javatwister,

Merci de ton code, je le mets sur le codepen ce soir.

ce qui est simple, doit rester simple sauf si tu as des actions chez window.open

window.open c'est un peu comme les vinyles, cela va revenir...

[boteha]

Bonjour,

Le code ne fonctionne pas sur les deux premiers liens du codepen :

Code HTML :

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

1
2
3
<p id="trust"><a id="PS" href="#">Site s&eacute;curis&eacute;</a>
<br />
<a id="GB" href="#">Satisfait ou rembours&eacute;</a></p>

Je pense que c'est EventListener qui n'est ajouté que pour les images de id="parent" alors qu'il s'agit de liens hors id="parent".

[javatwister]

C'est formidable: tu as tout compris!
Donc, j'imagine que tu peux rectifier le code tout seul maintenant

[boteha]

Bonjour Javatwister,

Je vais essayer ce soir, honnêtement pas sûr d'y arriver car je ne comprends pas tout dans le code.

[javatwister]

D'après ton html,
- tes liens directs n'ont pas d'id;
- tes liens popup ont un id;
- les liens popup sont dans le conteneur "trust" ou "menuhaut";
- donc, on ne va sélectionner que ces derniers
(Et même Explorer aura de quoi se réjouir d'un code aussi innovant )

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const liens=document.links;
for(let i=0;i<liens.length;i++){
	if(liens[i].id && (liens[i].parentNode.id=="trust" || liens[i].parentNode.id=="menuhaut")) {
		liens[i].addEventListener("click",function(e){
			const win2=window.open(
				"nouscab.php#"+this.id,
				"", 
				"scrollbars=yes,resizable=yes,width=420,height=420"
			);
			e.preventDefault();
		})
	}
}

[boteha]

Encore MERCI.

J'essaye ce soir.

Je vous tiens informé.

[boteha]

Bonjour,

Dans le codepen, cela marche très bien pour id="trust" mais pas pour id="menuhaut".

Je suppose que le problème est que les liens à pop-up ne sont pas des enfants directs de id="menuhaut", ils sont dans une liste emboitée.

Code HTML :

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

1
2
3
4
5
6
<ul id="menuhaut">
<li><a href="b.php?a=A1AL&amp;r=pxet&amp;c=CGV">CGV et FAQ</a>
<ul>
<li><a href="b.php?a=A1AL&amp;r=pxet&amp;c=CGV">Conditions de vente (13 rubriques)</a></li>
<li><a id="FP" href="nouscab.php#FP">Quels sont les frais de port ?</a></li>
etc..

[javatwister]

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const liens=document.links;
for(let i=0;i<liens.length;i++){
	if(liens[i].id) {
		liens[i].addEventListener("click",function(e){
			const win2=window.open(
				"nouscab.php#"+this.id,
				"", 
				"scrollbars=yes,resizable=yes,width=420,height=420"
			);
			e.preventDefault();
		})
	}
}

[boteha]

Bonjour Javatwister,

Ton code fonctionne très bien sur le codepen.

Je le mets sur mon site de test pendant le week-end.

Je vous tiens informé.

Encore merci.

[boteha]

Bonjour,

Est_il possible de cibler des classes ?

Le sélecteur css serait :

Code :

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

li.comp i.trv a

La version réduite doit aussi convenir :

Code :

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

i.trv a

ou même :

Code :

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

i.trv > a

Existe-t-il un équivalent en javascript ?

Cela a un rapport avec notre discussion pour nouveau développement.

[NoSmoking]

Est_il possible de cibler des classes ?

Oui, mais il serait temps que tu cherches un peu par toi même et/ou que tu fasses des essais.

Une fois de plus :

[boteha]

Bonjour NoSmoking,

Je comprends ta remarque mais je t'assure que je recherche par moi-même.

Les tutos javascript sont généralement assez incomplets.

[NoSmoking]

Les tutos javascript sont généralement assez incomplets.

Les tutos sont généralement complets mais ne traitent pas tous les sujets et problèmes que l'on peut rencontrer !

Petit coup de pouce : Localisation des éléments DOM avec les sélecteurs (sur MDN). Il faut également suivre les liens.

[boteha]

Bonjour NoSmoking,

Merci de tes liens, je vais explorer.

[boteha]

Bonjour,

J'ai bien avancé avec querySelectorAll, merci pour le lien.

Dans le codepen je rencontre un dernier problème.

J'aimerais remplacer les nombreuses déclarations const win=window.open () par une fonction avec plusieurs arguments : le lien, la hauteur, etc.

J'ai créé en fin de code un début de fonction avec un seul argument, l'event pour event.preventDefault();

Cela ne marche pas du tout.

Si vous pouviez me dire où est l'erreur...

Encore merci d'avance.

[javatwister]

les nombreuses déclarations const win=window.open ()

Comment ça "nombreuses"

Il y a encore (et toujours) des malentendus: tu n'as à déclarer la fonction qu'une fois dans la page.

Et j'emploie volontairement le mot fonction car c’en est une (native).

[boteha]

Bonjour Javarwister,

Désolé de t'énerver mais je ne comprends pas ta réponse.

Bon, si le codepen te semble bien j'enlève le projet de fonction à la fin et laisse le reste en l'état.

[boteha]

Bonjour,

Grâce à votre aide j'ai bien avancé.

Juste une question en passant.

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
const prom = document.querySelectorAll ('div.prom > a[id]');
 
if (prom.length > 0)
{
for (let i = 0; i < prom.length; i++)
{
prom[i].addEventListener ('click', function (e)
{
const idImg = prom[i].id.split('X');
const id = idImg[0];
const height = idImg[1];
 
const win = window.open ('popup.php?nom='+id+'G.jpg', '', 'scrollbars=yes,resizable=yes,width=420,height='+height);
e.preventDefault ();
}
);
}
}

Fonctionne sur tous les navigateurs sauf IE.

Voyez-vous un moyen de le rendre IE friendly ?

Je pense que c'est cette ligne qui pose problème : prom[i].addEventListener

[NoSmoking]

Fonctionne sur tous les navigateurs sauf IE.

effectivement IE « boggue » avec la déclaration de variable de boucle via le mot clé let : voir cette réponse.

Je pense que c'est cette ligne qui pose problème : prom[i].addEventListener

Pas exactement, la question que tu peux également te poser est ai-je besoin de la variable i dans ma la boucle ?


Dans son post #48 javatwister t'a donné la solution, il suffit de lire les réponses !

[boteha]

Bonjour NoSmoking,

la question que tu peux également te poser est ai-je besoin de la variable i dans ma boucle ?

Si tu poses la question c'est que la réponse est non.

Avec document.querySelectorAll je récupère un tableau.

Il me semble que FOREACH n'est pas compris par IE, donc j'emploie FOR.

Je vais voir la doc sur FOR.

Je vous tiens informés.