scrollTo avec jQuery

**LordCube** · 14/11/2008, 16h16

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 :

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

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 :

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
 
<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 ???

Merci d'avance.

**SpaceFrog** · 14/11/2008, 16h34

pourquoi ne pas plutot mettre un ancre ?

**LordCube** · 14/11/2008, 16h39

Ben j'ai essayé avec une ancre mais sa marche pas

**SpaceFrog** · 14/11/2008, 16h46

on peut voir comment tu as essayé avec une ancre ?

**LordCube** · 14/11/2008, 16h51

Ben quand je fais

Code :

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

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

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

**SpaceFrog** · 14/11/2008, 16h54

y'a un echo quelque part ?

arf oui ...

tu es sur de la taille de tes cases ?

**JeitEmgie** · 14/11/2008, 18h43

Envoyé par LordCube

Ben quand je fais

Code :

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

<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 :

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

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

**SpaceFrog** · 14/11/2008, 19h33

le name est révolu ...

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

la fonction devient

Code :

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

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>

**talvins** · 17/11/2008, 10h28

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.

scrollTo avec jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager