scrollTo avec jQuery

Version imprimable

Bonjour à vous, voilà, j'ai 2 div :
- le premier (salle) pour afficher des images de personnages sur un fond de soirée genre fête entre amis (environ 2000 personnes donc grand div avec un overflow obligé).
-le deuxième (liste) pour lister les potes qui sont à cette soirée avec une requête mysql.

Ma salle est en fait composé de 50 lignes avec chacune 50 cases (90px * 50px) où je stocke mes personnage.

Je souhaiterai que lorsque je clique sur un nom d'un de mes amis cela m'amène à son avatar qui se situe dans l'autre div.

Voilà mon code dans mon <head> :
Code:

1 2 3 4 5 6 7 <script type="text/javascript"> // On fait bouger la salle en fonction des coordonnes du personnage function scroll(l, c){ $('#salle').scrollTo({top:((l*40)+"px"), left:((c*30)+"px")}, 800 ); } </script>
et mon code dans le <body> :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <div id="liste"> <ul id="liste_recherche"> <?php $sql = "SELECT id,nom,num_ligne,num_case FROM fetard ORDER BY nom"; $res = mysql_query($sql); $nb_persos = mysql_num_rows($res); while ($tab = mysql_fetch_array($res)) { $id = $tab['id']; $nom = $tab['nom']; $l = $tab['num_ligne']; $c = $tab['num_case']; echo '<li><a href="#'.$id.'" onclick="scroll('.$l.', '.$c.')" >'.$nom.'</a></li>'; ?> </ul> </div>
Le problème c''est que je ne suis pas du tout précis et que je suis donc obligé de corrigé sa mais la correction n'est pas du tout la même partout. Donc en clair sa m'amène à 10m à coté de mon perso.

Pouvez vous m'aider s'il vous plait ???:cry:

Merci d'avance.

14/11/2008, 16h34
SpaceFrog

pourquoi ne pas plutot mettre un ancre ?
14/11/2008, 16h39
LordCube

re

Ben j'ai essayé avec une ancre mais sa marche pas :?
14/11/2008, 16h46
SpaceFrog

on peut voir comment tu as essayé avec une ancre ?
14/11/2008, 16h51
LordCube

re

Ben quand je fais

Code:

<a href="#'.$id.' ">'.$nom.'</a>

c'est une ancre vers un personnage dont l'id est $id non ???
14/11/2008, 16h54
SpaceFrog

y'a un echo quelque part ?

arf oui ...

tu es sur de la taille de tes cases ?
14/11/2008, 18h43
JeitEmgie

Citation:

Envoyé par LordCube

Ben quand je fais

Code:

<a href="#'.$id.' ">'.$nom.'</a>

c'est une ancre vers un personnage dont l'id est $id non ???

de mémoire :
c'est une ancre vers une balise

Code:

"<a name='".$id."'>"

le name est révolu ...

sinon au lieu de scrollTo utilise plutot scrollTop et scrollLeft,
scrollTo étant pour le body

la fonction devient
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> // On fait bouger la salle en fonction des coordonnes du personnage function scroll(l, c){ $('#salle').scrollTop=(l*40)+"px"; $('#salle').scrollLeft=(c*30)+"px"; } </script>

17/11/2008, 10h28
talvins

Non seulement name est obsolète mais j'en profite également pour dire que id, qui doit être utilisé à la place, fonctionne donc sur n'importe quel élément.

Inutile donc de mettre des éléments <a> pour définir une ancre : on peut très bien se rendre sur les titres de niveau 2 du document (<h2 id="monancre">)

Ca fonctionne même sous IE6, donc pas d'excuse.