18041 sujets

Questions générales et questions de débutants

[Résolu] Lien vers deux ancres (#id)

Bonjour

Est-il possible de faire un lien a href vers deux ancres (#id) ?

Ma page contient deux zones de défilement (deux div) contenant chacune une longue liste (appelées à partir d'une base de donnée) et j'aimerais que la position du défilement dans les listes ne soit pas perdue lorsque l'on clique.

ça marche à merveille pour une seule liste, avec un # de l'id sélectionné à la fin du lien, mais pas pour deux...

Peut-être quelqu'un a-t-il une solution ?

Merci d'avance
Modérateur
Bonjour,
jonath a écrit :
Est-il possible de faire un lien a href vers deux ancres (#id) ?

Réponse courte : non !
jonath a écrit :
Ma page contient deux zones de défilement (deux div) contenant chacune une longue liste (appelées à partir d'une base de donnée) et j'aimerais que la position du défilement dans les listes ne soit pas perdue lorsque l'on clique.

ça marche à merveille pour une seule liste, avec un # de l'id sélectionné à la fin du lien, mais pas pour deux...

Peut-être quelqu'un a-t-il une solution ?

En Javascript surement. Montre un extrait de code : ça nous évitera de répondre à côté.

Amicalement,
Bonjour
Merci pour votre réponse.
Voici un peu simplifié l'extrait du code php concerné:

while ($b = mysqli_fetch_array($link, SELECT * FROM seq WHERE seq_cat = '$cat'  ; )
	{
		$seq_no		= $b["seq_no"];
		$seq_title	= $b["seq_title"];

		if ( $seq_no == $seq_on ) {	
			?><div id="seq_ancre"><? echo $seq_title ?></div><?
		} else {
			?><a href="master.php?seq_on=<? echo $seq_no ?>#seq_ancre"><?
				?><div><? echo $seq_title ?></div><?
			?></a><?
		}
	}


Ceci me génère une liste d'éléments. Quand on clique sur un de ces éléments, la liste déroulante se place sur l'élément choisi.
Or j'ai deux listes comme celle-ci dans ma page, et j'aimerais que mes deux listes se positionnent au bon endroit:

while ($a = mysqli_fetch_array($link, SELECT * FROM bid WHERE bid_cat = '$cat'  ; )
{
		$bid_no		= $a["bid_no"];
		$bid_title		= $a["bid_title"];

		if ( $bid_no == $bid_on ) {	
			?><div id="bid_ancre"><? echo $bid_title ?></div><?
		} else {
			?><a href="master.php?bid_on=<? echo $bid_no ?>#bid_ancre&#seq_ancre"><?
				?><div><? echo $bid_title ?></div><?
			?></a><?
		}
}

Evidemment, le "#bid_ancre&#seq_ancre" ne fonctionne pas...
Modifié par jonath (03 Feb 2019 - 11:29)
Modérateur
Bonjour,

Sans tout chambouler, je dirais que tu pourrais ajouter un onclick="magic()" sur tous tes liens.

Dans la fonction magic() (qui sera donc en javascript), tu regardes quels sont dans tes deux listes les éléments "sélectionnés" (supposons que leurs id soient "a" et "b"), et ajoutes à ton lien après le ? un truc du genre e1=a&e2=b.

Ensuite, à la fin de master.php, tu fais appel à un code javascript qui se déclenchera à la fin du chargement de la page (via un window.addEventListener("load",magic2())).

La fonction magic2 commencera par récupérer ce qu'il y a dans $_GET["e1"] et $_GET["e2"], puis fera un scroll (en tout cas c'est ce que j'imagine, mais comme je n'ai pas le css, ce n'est que supposition) de tes listes sur les éléments dont les id sont dans $_GET["e1"] et $_GET["e2"], via un code du style :

function magic2()
{
  var e1="'"+$_GET["e1"]+"'";
  var e2="'"+$_GET["e2"]+"'";
  ...
  // ajouter ici le code qui va bien pour que les listes s'affichent comme il faut
  // je n'ai pas assez d'information pour proposer un code 
  ...
}

Amicalement,
Merci beaucoup parsimonhi

Mes listes sont chacune contenues dans un div class="box_list" :

.box_list {
	width: 30vw;
height: 30vw;
	margin: 0.4vw;
	vertical-align: middle;
	border-style: none;
	overflow:auto;
	overflow-x:hidden;
}


Peut-on faire un scroll en javascript ?
Merci pour votre aide, je suis plus que débutant en javascript

Cordialement
Modérateur
Bonjour,

En Javascript, pour placer un élément ayant pour id "a" contenu dans une div ayant pour id "e1" en haut de cette div, tu peux en gros faire ceci (à adapter éventuellement) :

var pos = document.getElementById('a').offsetTop;
document.getElementById('e1').scrollTop = pos;


Amicalement,
Merci beaucoup

Je vais essayer de mettre tout ça en place, ça va sûrement me prendre un petit moment... ^^

Cordialement

Jonathan
Merci parsimonhi

Votre aide m'a permis de trouver quelque chose de très simple.
Je place simplement un script de ce type après chaque liste et elles se mettent toutes automatiquement sur la bonne position :

?><script>
	var scrollSeq = document.getElementById("seq_ancre");
	scrollSeq.scrollIntoView();
</script><?


Du coup plus besoin de $_GET puisque l'élément "selectionné" est le seul dans la liste à avoir une id="seq_ancre"

Au plaisir
Attention, on ne doit avoir qu'un seul id "seq_ancre" dans une page. S'il y a plusieurs listes il faut modifier le code en conséquence.
mina8000 a écrit :
Pas de message d'erreur ?

on juste le droit à "Je reçois pas le mail " ?


Merci aux admins de bannir Mina,
Bien cordialement,
Modifié par JENCAL (04 Feb 2019 - 16:27)
Sujet clos
Aller à