Forcer mes scrollbar à la fin.

Sujet résolu

27 juillet 2009 à 2:28:52

Bonjour,

J'ai dans une même page deux tableaux avec plusieurs cellules qui ont une scrollbar horizontales.

Je cherche à faire afficher les éléments se trouvant à la fin de tous ces scrollbar.

Donc, j'ai pensez faire un :

<body onload="document.getElementsByClassName('scroll').scrollTo(20,0);">

Sachant que le bloc où se trouve ma scrollbar à pour class scroll.

Malheureusement, ça ne fonctionne pas.

Auriez-vous d'autre idée pour obtenir un effet similaire?

Merci d'avance,
Sulfa

Darkodam

27 juillet 2009 à 3:29:02

document.getElementsByClassName renvoit une collection d'objets, autrement dit une liste numérotée. Il faut donc la parcourir.

for(	var i = 0, sc = document.getElementsByClassName('scroll');
	i < sc.length;
	i++
) {
	sc[i].scrollTo(20,0);
	// ou
	sc[i].scrollTop = sc[i].scrollHeight; // Pour scroller jusqu'en bas
}

document.getElementsByTagName (Mozilla Developer Center)

birdy42

27 juillet 2009 à 8:58:46

+1 et surtout, il faudrait utiliser une méthode cross-browser, parce que gebcn ne fonctionne pas sur IE...(6/7)

// getElementsByClassName compatible tous browsers
// paramètre cl : class recherchée(s)
// paramètre par : noeud parent (optionnel)
 
// MAJ 24/06/09 : Prend en compte la recherche de plusieurs class.
 
function gebcn(cl,par) {
 
  par = par || document; // Si aucun noeud parent précisé, on prend le document
 
  if(par.getElementsByClassName){ // Si la méthode getElementsByClassName est implémentée
    return par.getElementsByClassName(cl); // On l'utilise pour renvoyer le résultat
  } else { // sinon
    var all = par.getElementsByTagName("*"), // On récupère tous les noeuds enfants du parent
    arr_cl = cl.split(" "), // On crée un tableau contenant les class recherchées
    res = []; // On crée un tableau vide pour accueillir les résultats
 
    for(var i=0,l=all.length;i<l;i++) { // Pour chaque noeud enfant
   
      var ok = true; // On initialise un booléen de vérification
      for(var j=0,m=arr_cl.length;j<m;j++) { // Pour chaque class recherchée
        var reg = new RegExp("\s?"+arr_cl[j]+"\s?"); // on crée une RegExp adaptée
        if(!reg.test(all[i].className)) { // on teste la RegExp sur l'attribut class et s'il ne contient pas la class recherchée
          ok = false; // on passe le booléen à false
          break; // et on sort de la boucle
        }
      }
      if(ok) { // Si le noeud possède toutes les class recherchées
        res.push(all[i]); // on l'ajoute au résultat
      }
    }
    return res; // A la fin, on renvoie le résultat
  }
}

Sulfa

27 juillet 2009 à 9:35:01

Bonjour,

merci beaucoup pour vos réponses, cela fait un moment que je n'ai pas retouché au JavaScript et la mise au point ne fonctionne pas.

Je vais donc vous donner les détails au cas où vous verriez quelque chose qui cloche :

<script type="text/javascript">[...]
		function scrollAll
			{
			for(var i = 0, sc = document.getElementsByClassName('scroll');
			i < sc.length;
			i++)
				{
				sc[i].scrollTo(20,0);
				}
			}
</script>
</head>
<body onload="scrollAll();">

voila pour l'implantation du code JS, puis ci après le code HTML résumé :

<div id="corp">
<fieldset>
<table>

<tr style="border:1px solid white;">
	<td>
	XXXX<br />

	XXX
	</td>
	<td>
	XXX
	</td>
			
	<td>
		<div class="case_episode">
			<div class="scroll">
				<a class="watched" href="../aaa.php?unwatched=101&amp;id=5" title="cliquez." >101<img src="ok.png" alt="ok" /></a> 
			</div>
		</div>
	</td>
</tr>
</table>
</body>

Pour moi cela devrait fonctionner, sauf s'il faudrait un chemin plus précis, mais ça me semble étonnant.

Merci d'avance,
Sulfa

louf404

27 juillet 2009 à 9:43:00

Il manque des parenthèses... :-°

function scrollAll ()
{
	for(var i = 0, sc = document.getElementsByClassName('scroll'); i < sc.length; i++) {
		sc[i].scrollTo(20,0);
	}
}

birdy42

27 juillet 2009 à 9:45:35

Citation : birdy42

+1 et surtout, il faudrait utiliser une méthode cross-browser, parce que gebcn ne fonctionne pas sur IE...(6/7)

Comme une impression qu'on lit pas ce que je dis quoi :lol:

Sulfa

27 juillet 2009 à 23:50:36

Mais non, mais comme je code d'abord sur Firefox, j'essaye d'abord de faire fonctionner ma fonction normalement.

Et j'adapte après pour IE.

Merci pour toutes vos réponses.

@ Louf404 : bien vu! Le pire c'est que je l'avais vu corrigé une première fois. Puis ctrl+z m'a tué.

Bon, ça ne fonctionne pas encore, mais je cherche.

Edit : en fait, mon FireBug me signal :
document.getElementsByClassName("scroll")[0].scrollTo is not a function.

Edit 2 : fonctionne sans erreur pour :
window.scrollTo(10,100);

Est-ce que scrollTo() serait réservé à window?
Qu'en dites vous?

Golmote

28 juillet 2009 à 0:15:31

Oui, je crois que scrollTo est en effet une méthode de window uniquement. Pas une méthode des noeuds du DOM.

Sulfa

28 juillet 2009 à 0:17:13

NNNNNOOOOOOOOOoooooooonnnnnnn.

Je craignais cette réponse. N'y a-t-il donc aucun moyen de forcer mes scrollbar à se mettre à la fin des le chargement de la page? :'(

Darkodam

28 juillet 2009 à 0:50:57

Citation : Darkodam

for(	var i = 0, sc = document.getElementsByClassName('scroll');
	i < sc.length;
	i++
) {
	sc[i].scrollTop = sc[i].scrollHeight; // Pour scroller jusqu'en bas
}

Sulfa

28 juillet 2009 à 1:10:40

T'as méthode n'a pas fonctionné Darkodam, peut-être parce que je n'ai que des scroll horizontale (c'est le but recherché).

En revanche, je viens de trouver une solution pour FF pour l'instant :

function scrollAll()
	{
	for (
		var i = 0, sc = document.getElementsByClassName('scroll');
		i < sc.length;
		i++
		)
			{
			sc[i].scrollLeft = 10000;
			}
	}

Edit : Effectivement birdy42 a raison, il faut donc utiliser sa méthode pour que le code fonctionne pour tous les navigateurs.

Voici le code définitif :

<script type="text/javascript">
	// getElementsByClassName compatible tous browsers
	// paramètre cl : class recherchée(s)
	// paramètre par : noeud parent (optionnel)
	 
	// MAJ 24/06/09 : Prend en compte la recherche de plusieurs class.
	 
	function gebcn(cl,par) 
		{
		par = par || document; // Si aucun noeud parent précisé, on prend le document
	 
		if(par.getElementsByClassName)// Si la méthode getElementsByClassName est implémentée
			{ 
			return par.getElementsByClassName(cl); // On l'utilise pour renvoyer le résultat
			}
		else // sinon
			{
			var all = par.getElementsByTagName("*"), // On récupère tous les noeuds enfants du parent
			arr_cl = cl.split(" "), // On crée un tableau contenant les class recherchées
			res = []; // On crée un tableau vide pour accueillir les résultats
	 
			for(var i=0,l=all.length;i<l;i++) // Pour chaque noeud enfant
				{
				var ok = true; // On initialise un booléen de vérification
				for(var j=0,m=arr_cl.length;j<m;j++) // Pour chaque class recherchée
					{ 
					var reg = new RegExp("\s?"+arr_cl[j]+"\s?"); // on crée une RegExp adaptée
					
					if(!reg.test(all[i].className)) // on teste la RegExp sur l'attribut class et s'il ne contient pas la class recherchée
						{
						ok = false; // on passe le booléen à false
						break; // et on sort de la boucle
						}
					}
					
					if(ok) // Si le noeud possède toutes les class recherchées
						{
						res.push(all[i]); // on l'ajoute au résultat
						}
				}
				return res; // A la fin, on renvoie le résultat
			}
		}

	
	
	function scrollAll()
		{
		for (
			
			var i = 0, sc = gebcn('scroll');
			i < sc.length;
			i++
			)
				{
				sc[i].scrollLeft = 10000;
				}
		}
		
</script>
	</head>
	<body onload="scrollAll();">

Merci à tous de votre aide,
Je passe ce sujet en résolu.

Sulfa

NB : Je n'ai pas trouvé de précédent sur le net quant à ce sujet. Il deviendra peut-être une référence.

Darkodam

28 juillet 2009 à 3:19:44

Citation : SulfaTueuR

T'as méthode n'a pas fonctionné Darkodam, peut-être parce que je n'ai que des scroll horizontale (c'est le but recherché).

Avais pas fait attention que c'était pour des scrollbars horizontales : tu remplaces scrollTop et scrollHeight par scrollLeft et scrollWidth

for(	var i = 0, sc = document.getElementsByClassName('scroll');
	i < sc.length;
	i++
) {
	sc[i].scrollLeft = sc[i].scrollWidth; // Pour scroller jusqu'en bas
}