Gestion des ancres

Version imprimable

03/02/2011, 08h54
viny

Gestion des ancres
Bonjour,

Jquery charge une page dans un div
Code:

1 2 3 4 5 $("#lien_aide").click(function(){ $('#contenu').load("aide.php"); });
Ma page aide.php possède des ancres et quand je clique sur l'un d'eux ma page ne s'affiche plus dans le div mais en lieu et place de la page principale.
Voici le code du lien avec ancre dans la page aide.php
Code:

1 2 <a href="aide.php#art_13" class="lien_rubrique">Menu 1 </a>
Comment faire pour que la page reste au sein du div ?

merci beaucoup

Code:

1
2
3
4
 $("#lien_aide").click(function(){
	$('#contenu').load("aide.php");
        return false;
    });

Code:

1
2
 
<a href="aide.php#art_13" onclick="return false;" class="lien_rubrique">Menu 1 </a>

03/02/2011, 09h17
viny

Bonjour et merci pour cette réponse rapide.

Effectivement, j'avais oublié le "return false", mais cela ne marche pas mieux.

J'ai essayé de mettre également onclick="return false;" dans le lien mais dans ce cas le lien ne fonctionne plus...

Merci
03/02/2011, 09h34
SpaceFrog

Code:

class="lien_rubrique"

Code:

$("#lien_aide").click(function(){

y'a pas comme un souci ?
03/02/2011, 09h57
viny

Je vois pas non...j'ai enlevé

Code:

class="lien_rubrique"

pour tester mais cela ne change pas

merci
03/02/2011, 10h09
viny

A tout hasard j'ai change :

Code:

$("#lien_aide").click(function(){

par

Code:

$("#menu_aide").click(function(){

Mais sans succès

ce que je veux dire ça fonctionne nettement mieux quand tu pointe sur le bon élément
si tu mets un id sur le lien :rolleyes:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
  $(function(){
  $("#lien_aide").click(function(){
		$('#contenu').load("blink.htm");
        	return false;})
 
    })
      </script>
 
</head>
<body>
<div>
  <a href="aide.php#art_13"  id="lien_aide" class="lien_aide">Menu 1 </a></div>
 
 <div id="contenu"></div>
</body>
</html>

03/02/2011, 10h50
viny

Mais les ids y sont depuis le début, le problème n'est pas dans la page appelante mais dans le div contenu. Les liens dans la page chargée dans le div font un target ="_top" en quelque sorte au lien de rester dans le DIV

merci.
03/02/2011, 11h25
SpaceFrog

repréciser l'ancre dans le load ... ??

Code:

$('#contenu').load($(this).attr('href'));

quoi que pas sur qu'il reconnaisse l'ancre dasn le load ...
faudra peut etre faire un scrollTo dasn le callback du load

Code:

1
2
3
4
5
6
$(function(){
  $("#lien_aide").click(function(){
		$('#contenu').load("blink.htm", $(this).scrollTo(0, $('#ancre').position().top););
        	return false;})
 
    })

comme ça ?

Code:

1
2
3
 
$('#contenu').load("aide.php");
$('#contenu').load($(this).attr('href'));

03/02/2011, 11h50
viny
J'ai cette erreur dans la page :

Code:

Erreur*: $("#haut").position() is null

et voici le code :
Code:

1 2 $('#contenu').load("aide.php", $(this).scrollTo(0, $('#haut').position().top));

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
  $(function(){
  $("#lien_aide").click(function(){
       var lien=$(this).attr('href').split('#')
		$('#contenu').load(lien[0],function(){$(this).scrollTop($('#'+lien[1]).offset().top)});
        return false;})
 
    })
      </script>
 
</head>
<body>
<div>
  <a href="aide.htm#art_13"  id="lien_aide" class="lien_aide">Menu 1 </a></div>
 <div id="contenu" style="height:100px; overflow:auto;"></div>
</body>
</html>

03/02/2011, 12h00
viny

Bon j'ai contourné le problème en mettant la page d'une aide.php dans une iframe et là les ancres fonctionnent.

Merci pour le temps passé
03/02/2011, 12h38
SpaceFrog

mon dernier code fonctionne pourtant comme un charme ...
03/02/2011, 12h45
viny

Rien n'est perdu il servira à bien d'autres et à moi peut-être :ccool:!