Discussion :

[cyberbelette]

Bonjour,

Tout près du but, j'aurais bien besoin d'un coup de main !
Classique : j'essaye de combiner 2 actions JQuery qui fonctionnent très bien séparément :

1/ un slideUp / slideDown sous condition de visibilité (onClick):
https://codepen.io/Webdee/pen/WyrmXE

2/ scroller la page de la hauteur d'un élément pour qu'il soit entièrement visible dans la fenêtre du navigateur (onLoad ds l'exemple):
https://codepen.io/Webdee/pen/yEerzW

Mais quand je tente de combiner les 2 (en ajoutant la hauteur du bouton de l'élément), ça marche nickel pour le 1er BT/elemt, mais moyen bof pour les suivants : Le scroll s'opère bien, mais sans aller jusqu'en bas de l'élément pour les textes 2 et 3 :
https://codepen.io/Webdee/pen/jKWJpZ

J'avoue que les raisonnements mathématiques ne sont pas mon fort, et du coup là, je sèche.
Un œil extérieur avisé serait le bienvenu !…

[psychadelic]

J'ai pas été regarder en détail ton code, mais je n'y ai vu aucune gestion de promesses dedans alors que c'est incontournable dans ce cas.

=> https://developer.mozilla.org/fr/doc..._les_promesses

le scroll ou l'ouverture "slideDown" se font tout 2 en asynchrone, en clair ça veut dire qu'il n'attend pas que la première opération soit terminée pour faire la seconde; et cette seconde opération se fait donc avec des paramètres de positionnement qui sont antérieurs

[NoSmoking]

Bonjour,
c'est plus une question d'enchainement qu'une question de mathématiques

Il te faut utiliser une fonction « callback » qui s'exécute une fois l'animation terminée. (.slideUp())

Code :

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

1
2
3
$( "#id-element" ).slideUp( "slow", function() {
  // Animation complete.
});

Voilà ce que cela pourrait donner en séquençant les animations.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
$(".js-click").on("click", function() {
 
  function scrollToBottom($elem) {
    // ouverture élément
    $elem.slideDown(speedAnimation, function() {
      // récup. des positions/dimensions
      var bodyScrollTop = $("body").scrollTop();
      var winBottom = $(window).height() + bodyScrollTop;
      var elemBottom = $elem.offset().top + $elem.outerHeight(true);
      var decalage = elemBottom - winBottom;      
      // lance le scroll si besoin
      if (decalage > 0) {      
        $("html, body").animate({
          scrollTop: (bodyScrollTop + decalage)
        }, "slow");
      }
    });
  }
 
  var speedAnimation = 200;
  // récup. élément concerné
  var $nextElement = $(this).next(".content");
  // si l'élément est caché
  if ($nextElement.is(":hidden")) {
    // si un élément est visible encours on le masque
    // et on ouvre le suivant
    var $elemEnCours = $(".content:visible");
    if ($elemEnCours.length) {
      $elemEnCours.slideUp(speedAnimation, function() {
        scrollToBottom($nextElement)
      });
    }
    // sinon on ouvre directement
    else {
      scrollToBottom($nextElement);
    }
  }
  else {
    $($nextElement).slideUp(speedAnimation);
  }
});

Si tu souhaites faire la fermeture et l'ouverture en même temps, l'approche est différente et il te faut récupérer la hauteur de l'élément visible en cours pour en tenir compte dans le décalage.

Attention : Ton animation pique un peu les yeux et ergonomiquement parlant ce n'est pas le top, tu obliges le visiteur à faire un scrollUP après ouverture de l'article pour en lire le début si il ne tiens pas dans la fenêtre.


[EDIT] le code de la fonction scrollToBottom est incorrecte voir la correction au post #6.

[cyberbelette]

Merci NoSmoking !

En fait c'est plutôt la logique mathématique qui me fait parfois défaut (et des connaissances plus approfondies en JS).

Concernant ta mise en garde, pas de souci, j'ai pris du texte comme exemple de contenu variable en taille, mais il s'agit en fait de vidéos dans un conteneur extensible; je voulais être sûre qu'on pouvait paramétrer un scroll de la hauteur de l'élément, même si sa hauteur n'était pas spécifiée dans le css. Vu la taille max d'une vidéo (puisqu'elles n'apparaissent qu'une par une) le haut de l'écran ne risque pas d'être caché après le scroll.

Merci encore pour ton exemple de code commenté (que je vais essayer d'analyser et de comprendre en détail) !!!

[cyberbelette]

En fait, je ne m'en sors toujours pas :

- Au click, si le bas de l'élément est caché sous le bord inférieur de la fenêtre du navigateur : la page scrolle vers le bas pour qu'il soit visible en entier : OK.
- Mais si tout va bien et qu'il y a l'espace suffisant pour que l'élément soit visible (par ex : si l'utilisateur a scrollé la page avant de cliquer) : la page scrolle tout de même et remonte pour caler le bas du contenu au ras du bas de la page… Alors que dans mon idée, le scroll ne devait se déclencher que si le bas de l'élément était caché.
Et c'est la ou la logique me manque, car je n'arrive pas à modifier la condition du slideDown pour parvenir à ce résultat.

Il y a un autre détail, comme mon élément contient une iframe youtube, j'avais une portion de code à ajouter après chaque slideUp pour supprimer puis restaurer l'url de l'iframe (pour que la video ne continue pas à jouer une fois cachée, et que l'iframe soit néanmoins prête à re-servir si nécessaire):

Code :

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

1
2
$(this).next(".content iframe").attr('src', '');
$(this).next(".content iframe").attr('src', url);

et là, la structure est plus complexe et je n'arrive pas à l'insérer correctement dans la fonction qui gère le slideUp… La 1ère ligne de code fonctionne, mais la 2e n'est pas prise en compte et l'écran reste vide si on re-clique pour voir la video.
Même en répartissant ces 2 lignes entre le slideUp et le slideDown ça ne fonctionne pas.

[NoSmoking]

j'ai utilisé comme base ton code sans voir qu'il ne fallait pas utiliser $("body").scrollTop() mais $(window).scrollTop().

La fonction, scrollToBottom, corrigée donne donc

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
  function scrollToBottom($elem) {
    // ouverture élément
    $elem.slideDown(speedAnimation, function() {
      // récup. des positions/dimensions
      var winScrollTop = $(window).scrollTop(); // et NON $("body").scrollTop();
      var winBottom = $(window).height() + winScrollTop;
      var elemBottom = $elem.offset().top + $elem.outerHeight(true);
      var decalage = elemBottom - winBottom;
      // lance le scroll si besoin
      if (decalage > 0) {
        $("html, body").animate({
          scrollTop: (winScrollTop + decalage)
        }, "slow");
      }
    });
  }

[cyberbelette]

Fantastique ! J'ai essayé de reformuler le calcul différemment alors qu'il suffisait d'un mot ! Mais 1 mot qui change tout !
Merci 1000 fois !

Et pour le code concernant l'iframe que j'avais inséré après mon slideUp, tu saurais à quelle étape je peux l'insérer pour qu'il fonctionne avec ton code ? Je dois dire que je n'utilise en général que des fonctions jQuery très simples, et là j'ai beau essayer, je ne maitrise pas tout.

Avec ma fonction un peu simplette (ci-dessous), ça marchait super, mais là j'ai essayé plusieurs options sans succès.
La classe '.video' remplace ici la classe '.content' de l'exemple que j'ai mis en ligne sur codepen.
Sans le pb du scroll j'ai :

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
18
19
20
 
$(".js-click").on("click", function(){
 
	var ecran = $(this).next(".video"); // video qui suit le bt sur lequel on clique
	var iframeYT = $('.video:visible iframe');
	var url = $(iframeYT).attr('src');
 
	if ( ecran.is( ":hidden" ) ) {
		$(".video:visible").slideUp(200); // referme les autres videos visibles
		$(iframeYT).attr('src', ''); // supprime l'url active de l'iframe visible (qu'on vient de refermer)
		$(iframeYT).attr('src', url); // restaure l'url de l'iframe visible pour utilisations ultérieures
		$( ecran ).slideDown(200);
 
  	} else {
    	$( ecran ).slideUp(200);  // referme la video qu'on vient d'ouvrir
		$(iframeYT).attr('src', ''); // supprime l'url active de l'iframe visible (qu'on vient de refermer)
		$(iframeYT).attr('src', url); // restaure l'url de l'iframe visible pour utilisations ultérieures
  	}
 
})

Mais avec ton code, ça ne marche plus…

[psychadelic]

Dans la doc jQuery : .slideUp( [duration ] [, complete ] ),

le complete est l'élément que tu dois prendre ne compte = il permet d'y placer le le code de ton choix, une fois que le slideUp ce soit achevé.
on appelle aussi cette partie une fonction CallBack (cf NoSmoking).

c'est un peu comme si tu donnais comme suite d'instructions :
1- Lancer le Frisbee
2- repeindre le Frisbee en vert
ce qui est impossible à faire car personne ne peut peindre un Frisbee alors qui est en train de voler dans les airs.

Comme je te l'ai écrit plus haut, la fonction slideUp est a ranger dans la catégorie des fonctions asynchrones, et le langage JavaScript n'attends pas qu'une fonction asynchrone se soit terminée pour passer aux instructions suivantes.

Pour utiliser la fonction CallBack faut écrire

Code JavaScript :

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

1
2
3
4
5
6
7
8
$( ecran ).slideUp(200, function() {    // referme la video qu'on vient d'ouvrir
 
  // code à exécuter une fois que l'interpréteur JavaScript à réalisé le fermeture de la vidéo = partie CallBack
 
  $(iframeYT).attr('src', ''); // supprime l'url active de l'iframe visible (qu'on vient de refermer)
  $(iframeYT).attr('src', url); // restaure l'url de l'iframe visible pour utilisations ultérieures
 
});

[cyberbelette]

Merci à vous 2,
grâce à vous je pense avoir un peu avancé sur cette histoire de callback, sans doute de manière plus empirique que mathématique
J'ai finalement repris mon code et découpé la fonction d'une manière qui me semble plus facile à comprendre et me permet d'insérer mon "vidéo killer" au slideUp et la fonction de scroll (perfectionnée par NoSmoking) au slideDown avec le système de callback :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
$(".ruban-click").on("click", function(){
 
      function scrollToBottom($elem) {
      // récup. des positions/dimensions
      var winScrollTop = $(window).scrollTop();
      var winBottom = $(window).height() + winScrollTop;
      var elemBottom = $elem.offset().top + $elem.outerHeight(true);
      var decalage = elemBottom - winBottom;      
      // lance le scroll si besoin
      if (decalage > 0) {      
        $("html, body").animate({
          scrollTop: (winScrollTop + decalage)
        }, "slow");
      }
  }
 
	var ecran = $(this).next(".video"); // video du bt sur lequel on clique
	var iframeYT = $('.video:visible iframe');
	var url = $(iframeYT).attr('src');
 
 
	if ( ecran.is( ":hidden" ) ) {
		$(".video:visible").slideUp(200); // referme l'autre video visible
		$(iframeYT).attr('src', ''); // supprime l'url active de l'iframe visible
		$(iframeYT).attr('src', url); // restaure l'url de l'iframe visible pour utilisations ultérieures
		// ouvre la video du bt ET lance le scroll si besoin
		$( ecran ).slideDown(200, function() {
		scrollToBottom(ecran);
		});
 
 
  	} else {
    	$( ecran ).slideUp(200);
	$(iframeYT).attr('src', '');
	$(iframeYT).attr('src', url);
  	}
 
})

Merci encore d'avoir pris le temps de vous pencher sur mon problème. C'est bon quand les brumes se dissipent et que ça marche enfin !!

[SpaceFrog]

Je ne sais pas si ça serait utile dans ton cas de figure, mais il m'est arrivé par le passé d'utiliser scrollIntoView

[cyberbelette]

Intéressant, merci pour le tuyau ! je ne connaissais pas.
Mais la compatibilité IE n'a pas l'air top.

[NoSmoking]

Mais la compatibilité IE n'a pas l'air top.

Euh c'est reconnu depuis IE8 alors !!!

Il est vrai que si tu veux la possibilité d'utiliser les options et notamment oElem.scrollIntoView({behavior: 'smooth'}) il va te falloir continuer à passer par un effet/animation.