[Résolu] Atteindre une ancre dans un tableau au chargement d'une page

Bonjour,

Sur la page d'accueil de mon site, se trouve un tableau (lui-même contenu dans une div).

Ce tableau à la forme d'un agenda, colonne de gauche les horaires par tranche de 30 minutes, colonne de droite les rendez-vous.

J'aimerai que lorsque la page se recharge (toutes les 5 minutes) ou lorsque quelqu'un revient sur cette page d'accueil, le tableau se positionne (avec un scroll ça serait bien, sinon tant pis) directement sur l'horaire du moment.

Exemple : Si je reviens sur la page d'accueil à 15h30, le tableau se positionne sur la ligne 15h30.

Merci pour votre aide.

Abyssale a écrit :
Ce que je ne parviens pas à faire, c'est justement le défilement du tableau jusqu'à la dite heure au mieux, voire le positionnement à cette heure.

[...]

Car c'est le tableau qui doit défiler, non la page contenant le tableau.

Oh ben ça doit encore plus simple que prévu, tu joues sur le CSS du tableau, par exemple un "top", après ça dépend de ton code (html/css).

salut,
ça m'avait l'air amusant ton truc alors je me suis amusé.
Tu pourrais ajouter l'animation de scroll avec JQuery je ne sait pas trop ce que ça donenrait peut être

$("div").scrollTo(scrollToThisPosition);

Je te laisse voir.

@Zelalsan : Joli !

Merci
J'avais un peu la flemme tout à l'heure.
En fait y'a rien de bien méchant.
On récupère l'heure et les minutes actuelles avec l'objet "Date" (getHours() et getMinutes() sont les méthodes de cet objet). On fait ensuite une boucle pour lire le contenu de chaque case de la première colonne du tableau HTML (les tranches horraires).
En convertissant le contenu textuel (innerHTML) de ces cases en un entier (parseInt), la valeur retournée correspond à l'heure.
On compare ensuite avec l'heure actuelle. On repère ainsi la case qui correspond à cette valeur (hh:00).
Il s'agit par la suite d'un simple calcul : si le nombre de minutes divisé par 30 est inférieur à 1, on est donc dans la tranche (hh:00), c'est donc la première case retournée par la condition dans la boucle. Si non c'est (hh:30) et c'est la case retournée +1 (je ne sais pas si c'est clair).
Il est ensuite très simple de récupérer sa position verticale (offsetTop) et de dire à notre <div> de scroller jusqu'à cette position.
Par contre tout ça c'est du JS et l'heure retournée est celle de l'utilisateur. Ça ne restera donc pas fiable vu qu'elle peut être modifiée à chaque fois.

NB : c'est une solution parmi tant d'autres et il faudra l'adapter pour un code HTML différent.

Y a-t-il une contrainte avec la version 1.9.1 de jquery ?
J'ai droit à : Cet objet ne gère par cette propriété ou cette méthode.

La ligne concernée :

		if ( this.options.duration ) {
			[b]this.pos = eased = jQuery.easing[ this.easing ]([/b]
				percent, this.options.duration * percent, 0, 1, this.options.duration
			);
		} else {
			this.pos = eased = percent;
		}

En tous cas, merci.

Edit : Bin, rien ne fonctionne en fait. Pas d'erreur, rien, c'est tout.

Est-ce qu'en recopiant simplement votre code, cela doit fonctionner ou dois-je l'adpater, je pense à cette ligne :

colonneHoraires = $("td:first-child");

Merci.
Modifié par Abyssale (17 Sep 2014 - 15:45)

SolidSnake a écrit :
Bon, mode jQuery activé (animation POWAA) !
(d'après le code de Zelasan)

Pas besoin de scrollTo() en fait.

woooooooooaaaaaa
J'ai actualisé la page 2 ou 3 fois juste pour revoir.
Honnêtement je ne maîtrise pas JQuery mais je crois que .scrollTo est un raccourci d'animation (enfin je dis peut être une grosse connerie).
On pourrait aussi se passer de JQuery et faire une jolie animation. C'est relativement plus complexe (il faut maîtriser le "tweening") mais ça évite une bibliothèque en plus (sans parler du fait qu'un code JS pure est plus "efficace" m'enfin c'est tout un débat).

Le mieux serait de faire l'appel à la fonction avec un évènement "onload". Je ne l'ai pas fait parce que ça ne marcherait pas sur JSField.