Discussion :

[cyberbelette]

Bonjour,
Suite à la discussion résolue ci-dessous:
http://www.developpez.net/forums/d13...t/#post7556194
J'aurais encore bien besoin de vos lumières.
Je sais maintenant comment faire scroller horizontalement avec un bouton (#innerD) un bandeau (#div1) d'images de largeurs différentes de la valeur de la window.innerWidth, mais un détail me gêne: après le scroll, on se retrouve avec des images tronquées en bordures gauche et droite de fenêtre.
J'essaye donc d'ajouter à mon bouton de scroll une fonction qui demande, lorsqu'une image est visible dans la fenêtre ET que son extrémité gauche est cachée en x négatif, de la recaler en x=0.
Le résultat souhaité est donc, à chaque scroll, que la première image visible à gauche soit entièrement visible.
J'ai regardé les spécification jquery sur :
http://api.jquery.com/scrollLeft et http://api.jquery.com/visible-selector
Mais il doit tout de même y avoir un pb de syntaxe dans ma fonction :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function (){
            $("#innerD").click(function (){
                    $('html, body').animate({
                        scrollLeft: '+='+window.innerWidth // va à droite de la valeur du viewport//
                    }, 1000);
			if($("#div1 img:visible") && $("#div1 img").scrollLeft()<0){ // censé caler le bord gauche de l'image de gauche contre la gauche du viewport si elle est coupée
				$("#div1 img").scrollLeft(0)
			}
					return false;
            });
        });

Parce que ça ne marche pas : ça scroll de la largeur de la fenêtre, mais l'image de gauche ne se cale pas comme il faut.
Encore un guillemet mal placé, ou bien ?…

[cyberbelette]

Un petit coup de main SVP ?
Ne serait-ce que pour me dire s'il y a une erreur de syntaxe dans cette partie de fonction:

Code :

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

1
2
3
if($("#div1 img:visible") && $("#div1 img").scrollLeft()<0){ // censé caler le bord gauche de l'image de gauche contre la gauche du viewport si elle est coupée
				$("#div1 img").scrollLeft(0)
			}

Avec mes remerciements anticipés…

[SpaceFrog]

Code :

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

 $("#div1 img").scrollLeft()<0

un scroll négatif ?

[cyberbelette]

Non, c'est la position de l'image (après un scroll du div vers la droite) dont le bord gauche est en négatif: si une image est (partiellement) visible dans le viewport et avec sa partie gauche en négatif = non visible dans le viewport… Alors: la caler en position x0.
Ça me paraissait logique, mais un truc doit m'échapper.
Ou peut-être y a-t-il une erreur dans la façon de lier cette instruction conditonnelle au reste de la fonction?

[SpaceFrog]

tu ne confonds pas avec offset().left ?

[cyberbelette]

offset().left c'est le point le plus à gauche du document, mais là il s'agit du point le plus à gauche visible dans le viewport; l'offset().left a déja filé à gauche en négatif pour faire apparaitre la suite des images qui sont à droite.
Le but c'est de slider horizontalement au click des images de largeurs différentes et quelle que soit la largeur de la fenêtre du navigateur: ça c'est fait, mais j'essaye de faire en sorte qu'à chaque fois qu'on clicke/scrolle: la première image visible à gauche soit entière.