[Résolu] Lien avec variable vers ancre

Bonjour,

Des pages de mon site sont constituées de chapitres qui se déplient et se replient par click sur son titre.
Chapitre replié :
Les promotions
Chapitre déplié :
Les promotions
L'acier du futur
Livret promotionnel pour le recrutement
Crédit documentaire : René PIERRET / Mise en ligne 27/02/2020
Recherche Maizieres 2015
Crédit documentaire : Patrick MARA / Mise en ligne 22/11/2019
L'Acier en perspectives, La R&D donne du relief à l'Acier (livret publié en 2001)
Mise en ligne 08/11/2018

Le code HTML

<h2 id="promotion" class="trigger"> <a href="#"><img src="../image/fleche_bas.png" class="ligne" alt="">&nbsp;&nbsp;<img src="../image/fleche_haut.png" class="ligne" alt="">&nbsp;Les 
  promotions</a></h2>
<section class="toggle_container"> 
<?php include("histoire/00_Promotions/promotions_histoire_genre.inc.php");?>
</section>

Le code HTML qui permet de déplier et replier tous les chapitres de la page

<p class="ouvrir-tout" ><a id="ouvrir" title="Déplier tout" href="#"><img src="../image/fleche_bas.png" class="ligne" alt=""></a>&nbsp;&nbsp;<a id="fermer" title="Replier tout" href="#"><img src="../image/fleche_haut.png" class="ligne" alt=""></a> 
  &nbsp;....</p>

Le Javascript qui commande le déploiement et le repliement

var Ouvrirh2='<?php if(isset($_GET['Ouvrirh2'])){echo $_GET['Ouvrirh2'];}?>';

$(document).ready(function(){
    var $contenu = $('.toggle_container');
    $contenu.hide();
 
    $('h2.trigger').click(function(){
     $(this).toggleClass('active').next().slideToggle('slow');	
        return false;
    });

   $('#ouvrir').click(function() {
       $contenu.show('slow');
      return false;
    });

	if (Ouvrirh2 == 1) {
		 $('#ouvrir')[0].click(function(){
		   $contenu.show('slow');
		   return false;	
	});	         
	}
	
    $('#fermer').click(function() {
        $contenu.hide('slow');
        return false;
    });
			
});

Les pages appelées par les liens contenus dans un chapitre comportent un lien de retour vers la page appelante de cette forme :

..../page_membre/page.php?page=histoire&Ouvrirh2=1#promotion

Ouvrirh2 est une variable transmise par l’URL, et promotion est le nom de l’ancre contenu dans un attribut id de la page appelante.

<h2 id="promotion" class="trigger"> <a href="#"><img ……..

La variable Ouvrirh2 est récupérée dans le script :

var Ouvrirh2='<?php if(isset($_GET['Ouvrirh2'])){echo $_GET['Ouvrirh2'];}?>';

Si elle est égale à 1 :

if (Ouvrirh2 == 1) {
		 $('#ouvrir')[0].click(function(){
		   $contenu.show('slow');
		   return false;	
	});

Cela déclenche le déploiement de tous les chapitres de la page, ceci fonctionne parfaitement bien.

Par contre le retour vers l’ancre désignée ne fonctionne pas toujours, il est même aléatoire.

Je ne comprends pas et je suis depuis un certain temps sur ce problème.

Merci pour votre aide dans la recherche d'une solution.

Cordialement
Patrick MARA

Salut,

C'est possible d'avoir un accès à la page ? Car là ça va être difficile de t'aider. A tout hasard, pour que le positionnement sur l'ancre fonctionne, il faut que la page dépasse de l'écran. S'il n'y a pas de défilement vertical, le déplacement ne se fait pas.

Bonjour,

Merci pour votre réponse.
Mes pages se terminent par un espace vide afin de bien positionner sur l'ancre.
Il m'est difficile de donner la page mais celle ci n'est qu'une succession de <h2> et <section> avec des id et contenus différents.

<p class="ouvrir-tout" ><a id="ouvrir" title="Déplier tout" href="#"><img src="../image/fleche_bas.png" class="ligne" alt=""></a>&nbsp;&nbsp;<a id="fermer" title="Replier tout" href="#"><img src="../image/fleche_haut.png" class="ligne" alt=""></a> 
  &nbsp;....</p>

<h2 id="projet" class="trigger"><a href="#"><img src="../image/fleche_bas.png" class="ligne" alt="">&nbsp;&nbsp;<img src="../image/fleche_haut.png" class="ligne" alt="">&nbsp;Le projet / La création / Le début</a>
</h2>
<section class="toggle_container"> 
<?php include("histoire/00_Projet/projet_histoire_genre.inc.php");?>
</section>
 
<h2 id="homme" class="trigger"> <a href="#"><img src="../image/fleche_bas.png" class="ligne" alt="">&nbsp;&nbsp;<img src="../image/fleche_haut.png" class="ligne" alt="">&nbsp;Les Hommes</a
</h2>
<section class="toggle_container"> 
<?php include("histoire/00_Hommes/hommes_histoire_genre.inc.php");?>
</section>

..............

Cordialement
Patrick MARA

Je pensais plus à une page de test sur un serveur pour tester le comportement, parce que le problème ne vient probablement pas du code. Une autre piste de réflexion, il est possible que l'ancre soit positionnée au chargement de la page, mais avant que le script n'ouvre tous les chapitres. Ce qui expliquerait le caractère aléatoire, en fonction du temps d'exécution du script. Une solution serait de positionner l'ancre via un code, plutôt que de laisser le navigateur s'en occuper.

Bonjour,

C’est aussi mon avis que cela ne vient pas du code. En effet, dans la barre d’adresse du navigateur l’URL est toujours correcte :

.... page_membre/page.php?page=histoire&Ouvrirh2=1&ancre=promotion

Je vous rejoins sur le fait que l'ancre soit positionnée au chargement de la page, mais avant que le script n'ouvre tous les chapitres.
Il faudrait donc introduire un retard entre l’ouverture des chapitres et le positionnement de l’ancre.
Vous précisez que cela pourrait se faire en positionnant l’ancre via un code, sachant que le nom de l’ancre peut être transmis via l’URL.

Avez-vous une idée de ce code.

Merci
Cordialement
Patrick MARA

On peut facilement trouver des exemples de code pour positionner une ancre en javascript ou jquery. Je te laisse le soin de les trouver.

Sinon, tu peux réfléchir à un algorithme, c'est à dire décrire les différentes étapes nécessaires pour réaliser cette action.
Modifié par Ostara (09 Aug 2020 - 12:37)

Sujet résolu.