[RESOLU] Une histoire d'ancre

Salut,

Tu dois avoir un return false; quelque part.

Plus d'infos.
Modifié par Super_baloo8 (05 Dec 2012 - 22:45)

Non pas de false :

display_project : function(current_link) {
			var self = this;

			$.ajax({
				url:current_link,
				type:'POST',
				success:function(results) {
					$('#single-project').remove();
					self.leprojet.parent().append(results);
					

					$('#single-project .single-project-cycle').cycle({ 
					    fx:     'fade', 
    					speed:  'fast', 
					    timeout: 10000,
					    next:   $('#single-project .wrapper-cycle .next'), 
					    prev:   $('#single-project .wrapper-cycle .prev') 
					});
				}
			});
		
		}

Salut,

est ce que tu faits ton appel ajax après le clique sur le lien, et par suite tu récupères la réponse et tu l'as mis dans un div ? et tu veux que ton écran se pointe sur le div contenant ta réponse ?

Concrètement de ce que j'ai pu comprendre en lisant le code qui n'est pas le mien (j'interviens pour des modifs). J'ai une page index.php et une page monappel.php.

Sur l'index, en cliquant sur un lien, ma page monappel.php vient se greffer après la div avec l'id "leprojet". La page contient déjà monappel.php est déjà structurée.

Maintenant oui, j'aimerais qu'au clic sur le lien en plus de l'appel ajax, mon écran pointe sur la div ayant la réponse.

J'agis sous wordpress.

Salut,

Alors premièrement oui tu dois avoir un false, quelque part pas nécessairement dans cette fonction ue tu nous a fourni,mais essentiellement nous devons le mettre dans la fonction du clique où tu fait appel à ta fonction TonObjet.display_project (), cela sert de priver le navigateur de son action par défaut qu'il allait mener sur le lien cliqué.

Toute fois le return false, n'est pas ta source de problème, car même si tu l'enlèves tu auras une exception javascript, car le navigateur va diriger vers le lien inclu dans ton href, et n’attendra pas la réponse du serveur à ta requete ajax, ce qui déclenche normalement une exception javascript. Alors le return false, est obligatoire et il est déjà dans sa place puisque tout ce qui te manque c'est de pointer l'écran sur ton ancre.

Ce qui précédait, était ma remarque sur ta conversation avec super_baloo8. Toute fois en ce qui concerne ce qui te manque, c'est que tu doit faire appel à l'ancre par toi même au niveau du javascript, car celui que tu as mis dans ton lien ne sert a rien, puisque ton code interdit le comportement par défaut du navigateur, alors pour ce faire, je te propose deux façon:

1-Faire un appel direct à l'ancre après l'append de ta réponse:

window.location.hash='#leprojet';

2-si tu es intéresseé par les animations, tu pourras récupérer le offset vertical (y ou top) de ton div, toujours après l'append, et tu fait un animate scrollTop à l'aide de Jquery vers ce point issu:

$('html,body').animate({scrollTop:$('#leprojet').offset().top-10},'slow');

Le -10 est pour laissé une petite marge en haut, pour ne pas le coller au top de l'écran, mais à toi de le modeler comme tu veux.

J'espère que ça résout ton problème.

Bonne courage

C'est parfait merci! Ça marche nickel

Petite question encore à propos d'ancre. L'ensemble du site fonctionne sur une page avec ancrage doux. Malheureusement en intégrant le menu d'ancre dans ma page appelée en ajax l'effet doux disparait. Il ne marche que si je l'intègre à la page principale, d'où cela peut-il venir ?
Modifié par letty (10 Dec 2012 - 16:19)

Salut,

Cela vient du fait que l'implémentation js des évènements relatifs à cette effet, est affectée au chargement de la page (Principale -par navigateur-), soit dans le ready ou le load, alors quand tu charges ta requête ajax, et que tu récupères le résultat et tu l'insères dans le DOM avec le menu dedans, les items de menu ne sont soumis à aucune application d'évènement.

Alors si tu veux charger ton menu en ajax, tu dois lui appliquer l'évènement approprié après l'append.

Bonne courage

D'accord, c'est ce que j'avais cru comprendre du peu de connaissance en js (va falloir que je me forme).
Donc pour fonctionner je copie/colle le code js déjà inscrit après l'append ?

Je me réponds à moi-même en éditant. Après l'append j'ai copié ce code :

 $('a[href^=#]').click(function(){
        cible=$(this).attr('href');
            hauteur=$(cible).offset().top;
            $('html,body').animate({ scrollTop:hauteur-10 },1000,function(){
$('#mondiv').css('top', $("html").scrollTop() + "px")});   
        });

ça marche super.

Encore merci
Modifié par letty (11 Dec 2012 - 09:13)