JQuery, ScrollTo, et position

Version imprimable

Bonjour à tous.
Après avoir longuement cherché, je donne ma langue au chat.
Voila mon problème
J'ai une sorte de carte (cf image)
Je veux tracer des lignes de case en case.
Pour celà il me faut la postion relative de la map avec son conteneur. Je ne trouve aucun moyen de l'obtenir. (jQuery.position donne toujours 0,etc..)

Pour indic, j'utilise scrollTo comme ceci :

Code:

$('#galaxie-container').stop().scrollTo({ élément de la liste},vitesse,{ offset:{ top: dep_y,left: dep_x }});

Structure : (faites pas gaffe aux éléménts de template entre les accolades)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
        <div id="galaxie_boite_d" style="position:absolute;width:100%;overflow:hidden;top:0px;left:0px;height:100%">
            <div id="galaxie_fleche_gauche"><img id="galaxie_deplace_gauche" alt="Fleche gauche" src="{path}images/galaxie/fleche_gauche.png" /></div>
            <div id="galaxie_fleche_haut"><img id="galaxie_deplace_haut" alt="Fleche haut" src="{path}images/galaxie/fleche_haut.png" /></div>
            <div id="galaxie_fleche_bas"><img id="galaxie_deplace_bas" alt="Fleche bas" src="{path}images/galaxie/fleche_bas.png" /></div>
            <div id="galaxie_fleche_droite"><img id="galaxie_deplace_droite" alt="Fleche droite" src="{path}images/galaxie/fleche_droite.png" /></div>
            <div id="galaxie_fleche_basgauche"><img id="galaxie_deplace_basgauche" alt="Fleche basgauche" src="{path}images/galaxie/fleche_basgauche.png" /></div>
            <div id="galaxie_fleche_hautgauche"><img id="galaxie_deplace_hautgauche" alt="Fleche hautgauche" src="{path}images/galaxie/fleche_hautgauche.png" /></div>
            <div id="galaxie_fleche_hautdroite"><img id="galaxie_deplace_hautdroite" alt="Fleche hautdroite" src="{path}images/galaxie/fleche_droite.png" /></div>
            <div id="galaxie_fleche_basdroite"><img id="galaxie_deplace_basdroite" alt="Fleche basdroite" src="{path}images/galaxie/fleche_basdroite.png" /></div>
            <div id="galaxie-container" >
                <ul id="galaxie_liste" style="width: {taille}">
                    {tableau}
                </ul>
                <div id="galaxie_ligne">
 
                </div>
            </div>
        </div>

Css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
	#galaxie-container{
		overflow:hidden;
		overflow-x: hidden;
		overflow-y: hidden;
		clear:both;
		position:inherit;
 
		width:100%;
		height:100%;
		z-index:40;         
	}
        #galaxie_liste{                
                padding:0px;padding-top:-800px;
		margin:0px;
                list-style-type:none;		
        }

http://img132.imageshack.us/img132/4818/capturejmw.png

Merci d'avance !

04/02/2011, 14h09
nico78200

Salut,

Essaye avec "$(ton_element).offset()", ca te renvoi un objet qui contient deux attributs (top et left).

Nico
04/02/2011, 14h38
apoteose

Non plus, il ne change pas lorsque mon div bouge.:(

Tiens inspire toi de ça, je ne comprend pas vraiment ce que tu veux faire.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
	var menu = $('#menu');
        // L element cible
        var targetPos = $('#target').offset();
	$(window).scroll(function(w) {
                // L'element doit etre en position: absolute
		menu.css('position', 'absolute');
		      menu.stop().animate({
				top: targetPos.top,
				left: targetPos.left
			});
	});

07/02/2011, 11h33
apoteose

Mon problème est que offset() est toujours à 0 quelle que soit la position de la souris,
position() renvoie une valeur absolute, elle ne change pas quand mon div se déplace.
Je pense que le div se déplace en modifiant la marge 'margin', jquery ne propose rien pour l'avoir "dynamiquement".

J'ai réussi à faire ce que je veux, car je sais combien il y a de cases avant et leur taille, mais c'est pas une solution très propre ni optimisée. Je pense que je m'y mettrais plus tard.

Merci quand même de ta réponse.
08/02/2011, 02h21
nico78200

Ton problème est logique, si tu déplace ton div en modifiant sa propriété margin alors le div ne se déplace pas, il reste au même endroit c'est simplement sa marge qui augmente ou se réduis.

Pour contourner, modifie directement ses attributs "top" et "left" avec jQuery animate() pour le déplacer ainsi tu auras toujours la position correct de ton div.