AJAX et retour page précédente

Version imprimable

Voir 40 message(s) de cette discussion en une page

Pour des ancres particulières, je t'ai mis un exemple ici dans mon second exemple de code (page2.html). Ce que tu as fait n'y ressemble en rien, c'est sur $('html,body') qu'il faut faire l'animation. Il aurait fallu faire :
Code:

1 2 3 4 5 6 7 8 9 10 <script> $(function() { $(".lien").click(function(){ var ancre = $('#milieu'); if(ancre.length) { $('html,body').animate({scrollTop: ancre.offset().top},"slow"); } }); }); </script>
Mais tu vas te retrouver face à un problème car si le hash devient #anchor-drome c'est très certainement que dans ta page appelante tu défini le hash avec :
Code:

1 2 3 4 5 $(".lien").click(function () { /* modifie le hash avec la valeur de $(this).data("target"), c.a.d. l'attribut data-target du lien */ $(location).attr('hash', $(this).data("target")); $('html,body').scrollTop(0); });
Et comme plus bas dans le code, l'évènement $(window).on('hashchange' charge le contenu d'une page au changement du hash... le code va essayer de charger "anchor-drome.php".

Bref il faudrait choisir ce que tu veux faire onclik sur la classe "lien" mais tu ne peux pas à la fois demander de scroller dans la page et de charger une autre page car c'est incompatible.

Non le retour en haut fonctionne très bien comme ça :
Code:

1 2 3 4 5 6 $("#cRetour").click(function(){ var ancre = $("#top"); if(ancre.length) { $('#milieu').animate({scrollTop: ancre.offset().top},"slow"); } });
car c'est la div milieu qui est srollable, mais sur une des pages appellées qui a la même stucture, il y a plusieurs ancres appellées par des liens différents (c'est un annuaire sur une seule page, avec un menu de selection), en plus du top, qui lui fonctionne mais pas les autres. Je me suis rendu compte que data target ça n'allait pas.
J'ai essayé quelque chose comme ça mais ça ne marche pas non plus :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script> $(function() { $(".lien").click(function(){ var id=$(this).attr("id"); var ancre2 = "#anchor-"+id; if(ancre2.length) { $('#milieu').animate({scrollTop: ancre2.offset().top},"slow"); } }); }); </script>
et dans le menu :

Code:

<a class="lien" style="cursor:pointer;" id="blabla">blabla</a>

qui pointe vers une id "anchor-blabla"...

Ah j'en avais oublié un bout...
j'ai remplacé id par name mais bon ça marche aussi :

Code:

1
2
3
4
5
6
7
8
9
10
$(function() {
				$(".lien").click(function(){
				var nom=$(this).attr("id");
				var ancre2 = $("#anchor-"+nom);
				if(ancre2.length)
				{
					$('#milieu').animate({scrollTop: ancre2.offset().top},"slow");
				}
			});
});

Bon alors c'est ok maintenant ?

Tu aurais pu aussi utiliser un data, cela t'aurais évité de composer avec les id.
Code:

1 2 3 4 5 6 7 8 9 $(function() { $(".lien").click(function () { /* objet jQuery : sélecteur recherchant l'id correspondant à l'attribut data-ancre de $(this), $(this) représentant ici l'objet $(".lien") */ var ancre = $('#'+$(this).data("ancre")); if(ancre.length) { $('#milieu').animate({scrollTop: ancre.offset().top},"slow"); } }); });
Code:

<a class="lien" style="cursor:pointer;" data-ancre="blabla">blabla</a>

D'une manière générale on n'utilise des id que quand ils sont nécessaires, aussi on emploi souvent l'attribut data pour transmettre des données, il a été conçu pour cela et on peut en définir plusieurs pour chaque élément.

Attention quand tu utilises length. Dans mes exemples je l'utilise pour tester que les objets jQuery ne sont pas vide, mais c'est valable uniquement pour des objets jQuery. Si tu l'utilise pour des chaines de caractère cela renverra la longueur de la chaine ou une erreur si la chaine n'existe pas.
Dans un code précédent tu l'utilisais pour tester $(this).data("target"); qui est une string = la valeur de l'attribut data-target de l'objet $(this), ou = undefined si data-target n'existe pas, mais ce n'est pas un objet jQuery.

04/12/2017, 23h14
yoh43

ça marche impec, bon le offset est un peu capricieux avec les ancres multiples, je sais pas à quoi ça tient, j'ai essayé ton code à la place du mien mais c'est pareil, peut-être la structure de la page...
Sinon j'ai bataillé mais j'ai réussi à mettre en place une galerie identique à lightbox en jquery, je suis quand même assez fier !
Juste un truc que je pige pas trop, j'imagine que c'est lié aux variables et à l'espace de travail, mais j'ai créé toutes mes fonctions dans l'index, une fois finies je me suis dit que ce serait mieux dans un fichier "galerie" js séparé mais ça ne marche plus quand je fais ça... De plus il y a des fonctions (qui lancent le diaporama) qui sont déclarées sur la page "photos" qui est appellée en ajax, peut-on les mettre dans le fichier js aussi ?

Ah je bute sur un truc en fait : Je veux changer une prorpriété css une fois que l'image est chargée (c'est le src qui est changé) selon la hauteur de celle-ci. Si je ne met pas la condition chargée, ça ne marche pas, j'ai essayé ça :
Code:

1 2 3 4 5 6 7 8 var imag="images/"+data_img; $('#image').attr('src',imag); $('#image').load(function() { var h = $("#image").height(); if (h>=650) {$(".centre").css('height', '650px');} else {$(".centre").css('height', '');} });
avec ready aussi mais ça a pas l'air d'être ça et je trouve rien là dessus.

05/12/2017, 18h47
ABCIWEB

Citation:

Envoyé par yoh43

ça marche impec, bon le offset est un peu capricieux avec les ancres multiples, je sais pas à quoi ça tient, j'ai essayé ton code à la place du mien mais c'est pareil, peut-être la structure de la page...

Le offset donne la position par rapport au document (cf doc). Mais puisque tu scrolle à l'intérieur d'une div (si j'ai bien compris), tu dois trouver la position de tes éléments par rapport à cette div et donc sans doute utiliser la méthode position. Bien entendu il faut aussi veiller à ce que html soit propre et en particulier pas de doublon sur les id qui servent d'ancre.

Citation:

Envoyé par yoh43

Sinon j'ai bataillé mais j'ai réussi à mettre en place une galerie identique à lightbox en jquery, je suis quand même assez fier !

Super ;)

Citation:

Envoyé par yoh43

Juste un truc que je pige pas trop, j'imagine que c'est lié aux variables et à l'espace de travail, mais j'ai créé toutes mes fonctions dans l'index, une fois finies je me suis dit que ce serait mieux dans un fichier "galerie" js séparé mais ça ne marche plus quand je fais ça...

Il y a un ordre à respecter, surtout si tu as des variables globales. Cela ne fonctionnera pas non plus si tu as des variables php dans ton javascript. D'un point de vue technique, c'est pas mieux de faire un fichier séparé, donc si tu n'y arrive pas c'est pas très grave, c'est juste pour mieux organiser ton code mais en même temps cela fait un accès serveur de plus nécessaire pour récupérer le fichier et construire ta page.

Citation:

Envoyé par yoh43

De plus il y a des fonctions (qui lancent le diaporama) qui sont déclarées sur la page "photos" qui est appellée en ajax, peut-on les mettre dans le fichier js aussi ?

C'est certainement possible mais pas franchement nécessaire. Avec ta méthode actuelle tu ne charge que le code javascript nécessaire en fonction des besoins et c'est pas plus mal.

Pour le reste, on s'éloigne du sujet initial qui est résolu depuis longtemps. Ouvre un nouveau sujet pour le changement de css en fonction du chargement de tes images. Tu auras plus de réponses et l'avantage de jquery c'est qu'il y a une grosse communauté (et alternativement si pb ou insuffisance des fonctions jquery tu peux le faire aussi en javascript pur).
05/12/2017, 20h35
yoh43

Oui je m'étais dit qu'il fallait une nouvelle discussion, je vais faire ça.
Merci encore pour ton aide.

Voir 40 message(s) de cette discussion en une page