JeuWeb - Crée ton jeu par navigateur
[JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [JS] Positionner la windows où l'on veux avec des scrolls désactivées? (/showthread.php?tid=6728)

Pages : 1 2


[JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Argorate - 22-03-2013

Bonsoir,

j'aurais bien besoin d'un coup de pouce pour trouver un truc que je n'arrive pas a faire. Pour faire très concret, ouvrez la page suivante: http://rpgmaker.net/media/content/games/4480/screenshots/Kaire.png , puis ouvrez firebug et ajouter un "overflow:hidden" sur le body.

A cause de cette contrainte, le scrollTo() ne marche pas. Comment faire pour voir le bas de l'image qui ne rentre pas dans l'écran à la base (si vous avez un trop gros écran, prenez une image plus grande que celui-ci)?

Le but est d'améliorer les performances en ne touchant pas au positionnement de l'image elle même, j'aimerais juste déplacer la vu qu'on a du navigateur vers les coordonnées X, Y de mon choix.

Firefox permet de zoomer/désomer en cliquant sur l'image, ce qui ma permis de voir que dans l'objet window, il semble que les propriété window.pageXOffset et pageYOffset jouent un role (enfin je pense).

Le problème c'est que window.pageXOffset = X ou window.pageXOffset.value = X ne marche pas (vous pouvez tester avec la console firebug)...

Bref, je ne sais donc pas comment faire pour placer l'écran aux coordonnées où je veux avec des scroll désactiver (overflow:hidden) sur une image plus grande que l'écran, quelqu'un à une idée/solution?!


merci.


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - starmindfr - 22-03-2013

marche pas le lien


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Etienne - 22-03-2013

Il suffit d'enlever la virgule parasite à la fin du lien.

heuu je suis pas certain d'avoir saisi ton problème en tout cas, mais pourquoi ne pas partir sur une Lightbox tu aurais ainsi la liberté que tu veux pour ton traitement non?


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Xenos - 22-03-2013

Pourquoi ne veux-tu pas déplacer l'image? C'est je pense la seule solution vraiment valable et fiable, car dans les specs des différents langages, c'est plutôt l'écran qui est fixe et le contenu de l'écran qui bouge, que le contraire... Quand on a un scroll, c'est le contenu qui scroll, et non l'écran qui se ballade au-dessus du contenu scrollé.

Donc, sans scroll, je pense que ce n'est pas possible. Ensuite, si tu ne veux pas déplacer l'image au sens "top/right/bottom/left" constants, rabats-toi sur les margin/padding, ou imbrique deux éléments: une "div" (ou autre display) qui sera la "fenêtre d'affichage", fixe, et une image dedans, qui se ballade librement.


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Argorate - 22-03-2013

saleté de virgule, je me fais avoir a chaque fois^^

Sinon le problème est que le déplacement de la map en temps réel cause des lags car y a d'autres traitement en même temps, du coup déplacer une grosse image c'est recalculé la position de chaque pixel c'est pour ça que c'est lent, alors que déplacer l'endroit où on voit c'est plus rapide.

D'ailleurs, si vous désoomer en cliquant sur l'image et que vous reclicker pour zoomer, cela va zoomer là où vous avez clické, ça montre bien que c'est possible, même sans scroll !


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Xenos - 23-03-2013

Alors, dans ce cas, je peux te proposer une méthode très moche, mais potentiellement efficace: les hash.
Un élément HTML avec un identifiant est à placer dans le même conteneur que l'image. Cet élément doit être non-visible (display none? ou opacity 0...) et posséder un identifiant, @id=truc.
Cet élément est alors à positionner au point où tu veux le focus (je ne sais pas si le focus sera centré sur l'élément, ou si l'élément sera aligné en haut à gauche de l'écran: à tester). Je te conseil donc de passer l'élément en question en "position: absolute", ce qui te permettra de le placer tranquilement dans le cadre contenant l'image.
Une fois l'élément placé, un simple clic sur le lien href="#truc" renverra le navigateur sur l'élément d'identifiant "truc", et donc si celui-ci est placé au bon endroit dans l'image, l'utilisateur "sautera" à cet endroit dans l'image.


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Argorate - 25-03-2013

Effectivement c'est "moche"^^

j'aurais préféré pouvoir touché a un élément window, screen ou ducoment en JS pour qu'il déplace l'endroit affiché...


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - t.bodeux - 25-03-2013

tu met ton positionnement absolu en CSS (il existe pas mal de moyen de centrer une fenêtre de manière absolue en crossbrowser). Ensuite le but de ton JS est d'animer cette boite pour que lorsque l'utilisateur clique sur un lien. Il déplace cette boite invisible au centre et face par exemple un fondu dessus Smile


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Xenos - 25-03-2013

A part via via top/right/left/bottom ou la méthode moche du hash, je n'ai pas d'alternative, Argorate.


RE: [JS] Positionner la windows où l'on veux avec des scrolls désactivées? - Argorate - 25-03-2013

t.bodeux : je suis pas sur que tu es bien saisie mon problème^^

Xenos, comment tu expliques qu'avec le zoom/dézoom en cliquant sur l'image (voir mon lien du premier topic), la window se positionne là où tu as cliquer (meme avec le overflow:hidden sur le body)!
Ca montre bien qu'il y a un truc pour le faire non?!