Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
2021 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Attendre le chargement d'une nouvelle page après click

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Attendre le chargement d'une nouvelle page après click

n°2309496
tompouss
Petit chat
Posté le 03-01-2018 à 10:46:13  profilanswer
 

Bonjour,
 
 
je bloque sur un truc en jquery 3 depuis quelques jours:
 
j'essaie de scroller sur une ancre après un click sur un lien interne.
 
C'est pas très compliqué et le script foncionne bien, sauf quand l'ancre se trouve sur une autre page.
 
Je voulais savoir s'il existait un moyen propre de lancer une method scrollTop après que la page soit chargée, après un click.
 
j'ai déjà testé pas mal de trucs (utilisation d'un script bizarre avec pattern observer, methode wait, etc, queue) mais comme je suis une quiche en javascript je tourne un peu en rond.
 
Quelle serait d'après vous la/les meilleure(s) approche(s) pour résoudre mon probleme ?
 
 Merci pour votre aide :)
 
Tom


---------------
collectionneur de pâtes thermiques
mood
Publicité
Posté le 03-01-2018 à 10:46:13  profilanswer
 

n°2309513
tompouss
Petit chat
Posté le 03-01-2018 à 12:28:02  profilanswer
 

J'ai pondu un peu de code pas super propre mais à cause de la fatigue (et à côté de mes pompes) j'ai du mal à débugger.
 

Code :
  1. var target;
  2. var link;
  3. (function () {
  4.     $('a[href*="#"]:not([href="#"])').click(function() {
  5.         console.log('test');
  6.         if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
  7.         {
  8.             console.log('test2');
  9.              target = $(this.hash);
  10.             link = target.length ? target : $('[name=' + this.hash.slice(1) +']');
  11.             console.log(link);
  12.             setTimeout(
  13.                 function (link) {
  14.                     console.log(link);
  15.                     $('html, body').animate({
  16.                         scrollTop: link.offset().top - 100
  17.                     }, 700);
  18.                     return false;
  19.                 },
  20.                 500);
  21.         }
  22.     })
  23. })();


Message édité par tompouss le 03-01-2018 à 12:31:53

---------------
collectionneur de pâtes thermiques
n°2309575
rufo
Pas me confondre avec Lycos!
Posté le 04-01-2018 à 11:56:33  profilanswer
 

Je pense que ton pb avec une ancre située sur une autre page vient tout simplement du fait que ton javascript ne peut s'exécuter puisque tu changes de page.
 
Dans ce cas-là, sur le onload de la page, il faut récupérer le window.location et vérifier s'il y a une ancre et si oui, appliquer le scroll.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Cantine Calandreta : http://sourceforge.net/projects/canteen-calandreta
n°2309596
tompouss
Petit chat
Posté le 04-01-2018 à 21:02:22  profilanswer
 

Ok voici mon code fonctionnel, basé sur ce lien https://stackoverflow.com/questions [...] erent-page
et adapté pour es6.
C'est pas super sexy, et je pige pas tout, mais ca fonctionne et ca me va pour le moment
 
merci rufo de m'avoir mis sur la bonne voie
Si vous avez des idées pour améliorer ca, n'hésitez pas :)
 

Code :
  1. let target;
  2. let jump = (e) => {
  3.     console.log('into jump');
  4.     console.log('This');
  5.     console.log($(this));
  6.     console.log('location');
  7.     console.log(location);
  8.     if (e) {
  9.         e.preventDefault();
  10.         target = $(this).attr("href" );
  11.     } else {
  12.         target = location.hash;
  13.     }
  14.     $('html,body').animate(
  15.         {
  16.             scrollTop: $(target).offset().top-300
  17.         }, 500, function () {
  18.             location.hash = target;
  19.         });
  20. }
  21. let scroll = ()=> {
  22.     $(window).scroll((e) => {
  23.         e.preventDefault();
  24.         let $header = $('#header');
  25.         let $logo = $('#logo');
  26.         let $offCanvas = $('#offCanvas');
  27.         let aTop = $header.height();
  28.         if ($(window).scrollTop() >= aTop) {
  29.             $header.addClass('fixed-header');
  30.             $logo.addClass('invisible');
  31.             $offCanvas.css('margin-top', 75);
  32.         }
  33.         else {
  34.             $header.removeClass('fixed-header');
  35.             $logo.removeClass('invisible');
  36.             $offCanvas.css('margin-top', 0);
  37.         }
  38.     });
  39. };
  40. $(document).ready(function () {
  41.     scroll();
  42.     $('.scroll-btn a').on("click", jump.call($(this)));
  43.     if (location.hash) {
  44.         setTimeout(() => {
  45.             $('html, body').scrollTop(0).show();
  46.             jump.call($(this));
  47.         }, 0);
  48.     } else {
  49.         $('html, body').show();
  50.     }
  51.    
  52. });


Message édité par tompouss le 04-01-2018 à 21:06:16

---------------
collectionneur de pâtes thermiques

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Attendre le chargement d'une nouvelle page après click

 

Sujets relatifs
Installation imprimante réseau via page webTransition de page en html et css
[Ajax] Récupèrer l'action lors d'événement après rechargement de pageReset plusieurs textbox.text sur la même page.
Pied de page HTML[Web] Chargement d'image par drag 'n drop
Ouverture d'une page d'un multipage avec un mot de passeCréer une page sur Adobe Muse
Problème de chargement CSS dans HTMLImpression et mise en page automatique
Plus de sujets relatifs à : Attendre le chargement d'une nouvelle page après click


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR