Gestion des ancres

**viny** · 03/02/2011, 08h54

Bonjour,

Jquery charge une page dans un div

Code :

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

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 :

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

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

**SpaceFrog** · 03/02/2011, 09h06

Code :

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

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

ou

Code :

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

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

**viny** · 03/02/2011, 09h17

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

**SpaceFrog** · 03/02/2011, 09h34

Code :

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

class="lien_rubrique"

Code :

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

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

y'a pas comme un souci ?

**viny** · 03/02/2011, 09h57

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

Code :

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

class="lien_rubrique"

pour tester mais cela ne change pas

merci

**viny** · 03/02/2011, 10h09

A tout hasard j'ai change :

Code :

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

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

par

Code :

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

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

Mais sans succès

**SpaceFrog** · 03/02/2011, 10h22

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 :

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
<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>

**viny** · 03/02/2011, 10h50

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.

**SpaceFrog** · 03/02/2011, 11h25

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

Code :

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

$('#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

**SpaceFrog** · 03/02/2011, 11h35

Code :

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

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

**viny** · 03/02/2011, 11h35

comme ça ?

Code :

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

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

**viny** · 03/02/2011, 11h50

J'ai cette erreur dans la page :

Code :

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

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

et voici le code :

Code :

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

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

**SpaceFrog** · 03/02/2011, 11h58

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
<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>