Centrer la page à l'endroit où l'on a cliqué

Question

Bonjour à tous, j'aimerais que vous m'aidiez à réaliser un code qui permettrait de centrer la page à l'endroit où l'on clique. Par exemple : si l'on clique à un endroit de la page où se trouve la lettre "a", il faut que cette lettre soit centré verticalement et horizontalement. Ma page posséde de grande barre de scrolling (détail important il me semble). Pour l'instant j'ai ce code mais ce n'est pas le bon, je pense qu'il y a ici une base mais je n'arrive pas à faire en sorte que la fonction s'applique à la page et non à l'image : Merci d'avance pour votre aide !

cs_bultez · Answer

>>left: 1000000000000000;op:1000000000000000
>>top:500300;left:499600;
qu'est-ce que c'est que cela ?
déjà, il faut mettre px, et tes images ne seront pas visibles
à moins de scroller pendant 2 heures !    quel est le but ?

sinon ton script doit fonctionner, enfin... avec IE uniquement.

Cordialement     Bul  [mon Site] [M'écrire], <!--

XtremDuke · Answer

Bultez a raison, et sans vouloir te décourager, il n'est pas envisageable d'avoir un document avec ces  dimensions et je ne te parle pas du poids de ce dernier... Il va falloir repenser ton système.
Si j'avais un conseil a te donner avant de te lancer, ce serait d'utiliser une librairie JS. Ces libs contiennent en generale toutes les fonctionnalités dont tu auras besoin (déplacement d'un élément, gestion des évènements, détermination des positions/dimensions, etc...) et ça t'évitra surtout de faire des erreurs.

loicseg · Answer

Merci pour vos informations mais cela ne m'aide pas, vous ne répondez pas à ma question. Pour le moment ce code permet de déplacer une image à l'endroit cliqué mais moi je voudrais que ce soit un endroit de la page qui soit centré verticalement et horizontalement en ce point. Merci encore pour l'aide que vous pourrez éventuellement m'apporter. PS : petite question; comment centrer les coordonnées où la souris est cliqué.

XtremDuke · Answer

Récupère la taille de ton document (y'a tout ce qu'il faut ici) et positionne ta fenêtre par :

window.moveTo(pointeurX-(HauteurDocument/2), pointeurY-(LargeurDocument/2));http://www.toutjavascript.com/reference/reference.php?ref=window

loicseg · Answer

Merci de mindiquer où il y a un problème, où me suis-je bien trompé ? windows.moveTo(ixe-(document.height/2), igrec-(document.width/2)); ?? Je veux que ce soit le contenu de la page qui soit centré et non la fenêtre donc ce n'est peut-être pas windows mais document...

loicseg · Answer

oups, j'ai rajouté un s à window mais même sans "s" cela ne change rien.

@karamel · Answer

bonjour
si tu doit centre l'image par rapport a l'ecran

la fonction:
function centrer(monelement){
bibi=document.getElementById(monelement)
bibi.style.left=((document.body.clientWidth-bibi.offsetWidth)/2)+document.body.scrollLeft
bibi.style.top=((document.body.clientHeight-bibi.offsetHeight)/2)+document.body.scrollTop
}

dans la page:

si cest un endroit precis il y aura d'autres calcule dans tous les car tu devra definr un point de repere

cs_bultez · Answer

ah ben... le script que tu nous a mis déplaçait l'objet
    vers là où on clique, je pensais que c'était cela ton souci...
    il te suffit de mettre le style top et left à ce que tu veux, par exemple :
    top = ( largeur de l'écran - largeur de l'écran ) / 2,  pareil pour left
pour les tailles et les positions, exemple ici
CordialementBul[mon Site][M'écrire] |

loicseg · Answer

function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX 
document.style.top.moveto(screen.availwidth-screen.availHeight)/2
document.style.left.moveto(screen.availwidth-screen.availHeight)/2
}
La fonctionne ne fonctionne pas. Je me suis trompé mais je ne sais pas où.

@karamel · Answer

re autre exemple pour mettre une image au milieux d'un div coucou

cs_bultez · Answer

1° moveto c'est pour une fenêtre... pas pour un objet
    fait objet.style.top ou left = valeur +"px" et c'est tout
    comme déjà dit.
2° XTremduke pensais probablement que là était ton souci,
     tu n'appliques pas comme il te montres.
3° tu devrais faire un ch'tiot effort... 
    faut-il centrer une fenêtre ? un objet ?
    quel rapport avec le script posté ? .... on s'y pomme !
CordialementBul[mon Site][M'écrire] |

loicseg · Answer

Je pense que je me suis mal exprimé : ce ue je veux c'est que lorsque l'on clique n'importe où dans la page, le pixel ou l'on aura cliqué se centre au milieu de l'écran du navigateur...

Exemple je clique sur le bouton "ajouter" (lors d'un ajout de message), il faudrait que celui-ci soit situé au milieu de l'écran du navigateur mais que toute la page bouge aussi. Comme dans Diablo...

loicseg · Answer

Voici une vidéo montrant un déplacement type dans Diablo 3, s'il est possible de faire ceci, j'aimerais bien mais si on ne s'occupe pas du personnage, imaginons u'il n'y soit pas, il faudrait ue comme dans la vidéo la page se centre à l'endroit où l'on aura cliqué sur la page. Vous comprenez mieu ?

loicseg · Answer

Si j'oublie de mettre le lien de la vidéo ça ne vas pas le faire : http://fr.youtube.com/watch?v=iMpnKyyAhUI

cs_bultez · Answer

ce que tu veux donc, c'est centrer la page en fonction du click d'un utilisateur sur cette même page ?
regarde alors ce que t'a donné XTremDuke, pour positionner une fenêtre 
c'est moveBy(); ou moveTo(); qu'il faut utiliser. 
CordialementBul[mon Site][M'écrire] |

loicseg · Answer

Peuxtu donner un exemple stp par ce que laà je n'arrive plus à suivre... désolé, je suis débutant (je préfére prévenir).

cs_bultez · Answer

ben... et celui de XTremDuke ?
essaye au moins, mets nous ce que tu fais si ça ne va pas !
Cordialement  Bul  [mon Site] [M'écrire] |

cs_bultez · Answer

et quand je dis met nous ce que tu fais, c'est pas 23658975 lignes !
on doit faire en une, allez...disons 3 !
Cordialement    Bul   [mon Site]  [M'écrire] |

loicseg · Answer

Je ne met pas tant de lignes ^^

loicseg · Answer

et bien j'ai ça : Je n'y arrive vraiment pas, pourtant j'utilise votre aide. Au secours ^^

XtremDuke · Answer

Ha ca y est j'ai compris... Essai ça : exemple ************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************ OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO OO ************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************

loicseg · Answer

Ho merci, c'est exactement cela ! Merci merci merci ! Vu le code je n'y serai jamais  arriver seul !
Merci encore pour votre aide !

cs_bultez · Answer

surtout que tu parlais de centrer une fenêtre alors qu'il s'agissait de centrer un objet !
CordialementBul[mon Site][M'écrire] |

loicseg · Answer

centrer un pixel de la page ce n'est pas une fenêtre si ?

cs_bultez · Answer

ton titre : Centrer la page à l'endroit où l'on a cliqué
    c'est pour ça qu'on t'avait proposé moveTo ou moveBy
ton js, positionnait un objet en fonction du clic,
    c'est pour ça que je te disais que ça fonctionnait ( avec IE )
ensuite tu affirmais : Je veux que ce soit le contenu de la page qui soit centré
    je t'ai dis :  il te suffit de mettre le style top et left à ce que tu veux, par exemple :
                      top = ( largeur de l'écran - largeur de l'écran ) / 2,  pareil pour left
                      et XTremDuke a fait mieux en te fournissant l'exemple complet.
moi, j'ai quand même  eu du mal à suivre....
CordialementBul[mon Site][M'écrire], <!--

loicseg · Answer

Ok bon c'est pas grave. Merci encore à tous !

Centrer la page à l'endroit où l'on a cliqué

26 réponses

Votre réponse

Discussions similaires