Scrollbar IE9/10 avec slideToggle
Hello tout le monde !
Je me permets de venir sur ce forum pour exposer un problème que je rencontre avec la fonction slideToggle et IE9/IE10.
Le principe de base est assez simple : j'ai une page avec un container qui présente une liste de tableaux alignés les uns en-dessous des autres. L'idée est que lorsque l'utilisateur click sur un déclencheur, par exemple le titre du tableau, ce dernier s'ouvre ou se referme en accordéon.
Tout fonctionne ! D'ailleurs, je stocke aussi ces informations dans une BDD de manière à ce que lorsque l'utilisateur se reconnecte sur cette page la prochaine fois, les tableaux fermés précédemment le soient toujours.
Sous FF, Chrome et Opera, je ne rencontre aucun soucis. Le système est fluide et la présentation n'est pas altérée. Sous IE, c'est un peu différent : le système fonctionne, seulement, IE garde en mémoire l'ancienne hauteur de page lors qu'un accordéon est refermé, ce qui fait que l'utilisateur peut scroller plus loin que le contenu, chose qui n'est pas dramatique mais un peu gênante. Chose étrange, si je réduis la fenêtre IE et la ragrandit, la hauteur de page est bonne. C'est comme si IE ne recalculait pas la hauteur de la fenêtre ou qu'il y avait une latence.
Pour le slide, j'utilise simplement le bout de code suivant :
Code:
1
2
3
4
5
| $(thisId + "title").bind('click', function() {
$(thisId + "span div:not(" + thisId + "title)").each(function() {
$(this).slideToggle("medium");
});
}) |
J'ai d'abord pensé donner un "coup de pousse" à IE en recalculant moi-même la hauteur de la fenêtre mais cela ne change rien. J'ai aussi tenté de fermer tous les tableaux au chargement et d'ouvrir seulement ceux qui doivent l'être mais, bien que la hauteur de fenêtre au départ soit correcte, elle ne l'est plus dès que je réduis un autre tableau. J'ai aussi essayé de masquer la barre de scroll au click et de la ré-afficher une fois les opérations terminé mais sans succès. Le problème se pose aussi si je remplace slideToggle par un simple .css("display","none") ou show()/hide().
Pour le calcul de la hauteur de fenêtre, je fais simplement ceci :
Code:
1
2
| var newHeight = $(window).height() - $(this).height();
$(window).height(newHeight); |
C'est très étrange. Je n'ai jamais eu ce problème avant et j'avoue tourner en rond. Malheureusement, je ne peux pas donner de lien pour l'exemple.
Est-ce que quelqu'un aurait une suggestion ?
Merci d'avance pour votre attention et vos éventuelles suggestions.
A+
EDIT :
Bon, en désespoir de cause, j'ai refait un test avec les fonctions .show() and .hide() et j'ai ajouté ces quelques lignes après qu'un tableau ait été fermé :
Code:
1
2
3
4
| var newWinHeight = $(window).height() - tempHeight;
$(window).height(newWinHeight);
$("body").css("overflow-y","hidden","important");
$("body").css("overflow-y","auto","important"); |
Cela fonctionne sous FF, Chrome, Opera et IE9 mais pas sous IE10. On dirait que IE a besoin de recharger le "truc" dans son ensemble pour que cela fonctionne.
