Sujet Précédent Sujet Suivant

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

loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011 - 2 sept. 2008 à 17:39
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011 - 5 sept. 2008 à 19:51
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 :

<SCRIPT>
function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
document.getElementById('oxo').style.top=igrec+'px';
document.getElementById('oxo').style.left=ixe+'px';
}
 </SCRIPT>&nbsp;

Merci d'avance pour votre aide !

26 réponses

  • 1
  • 2
Réponse 1 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 08:48
>>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], <!--
0
Réponse 2 / 26
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
3 sept. 2008 à 10:10
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.
0
Réponse 3 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 14:19
Merci pour vos informations mais cela ne m'aide pas, vous ne répondez pas à ma question.

<SCRIPT>
function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
document.getElementById('oxo').style.top=igrec+'px';
document.getElementById('oxo').style.left=ixe+'px';
}
 </SCRIPT>

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é.
0
Réponse 4 / 26
XtremDuke Messages postés 626 Date d'inscription samedi 28 septembre 2002 Statut Membre Dernière intervention 18 mai 2009 4
3 sept. 2008 à 14:46
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 15:47
<SCRIPT>
function deplace(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
windows.moveTo(ixe-(document.height/2), igrec-(document.width/2));
}
 </SCRIPT>

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...
0
Réponse 6 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 15:49
oups, j'ai rajouté un s à window mais même sans "s" cela ne change rien.
0
Réponse 7 / 26
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 sept. 2008 à 15:51
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
0
Réponse 8 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 15:51
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] |
0
Réponse 9 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:04
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ù.
0
Réponse 10 / 26
@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
3 sept. 2008 à 16:14
re
autre exemple pour mettre une image au milieux d'un div

<HTML>
<HEAD>
<TITLE>coucou</TITLE>

<script>

function centrer(monelement){
bibi=document.getElementById(monelement)
bibi.style.left=document.getElementById('monid').offsetLeft+((document.getElementById('monid').offsetWidth-bibi.offsetWidth)/2)
bibi.style.top=document.getElementById('monid').offsetTop+((document.getElementById('monid').offsetHeight-bibi.offsetHeight)/2)
}
</script>
</HEAD>

</HTML>
0
Réponse 11 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 16:20
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] |
0
Réponse 12 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:20
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...
0
Réponse 13 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:35
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 ?
0
Réponse 14 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:37
Si j'oublie de mettre le lien de la vidéo ça ne vas pas le faire : http://fr.youtube.com/watch?v=iMpnKyyAhUI
0
Réponse 15 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 16:38
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] |
0
Réponse 16 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:42
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).
0
Réponse 17 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 16:45
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] |
0
Réponse 18 / 26
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
3 sept. 2008 à 16:51
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] |
0
Réponse 19 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:53
Je ne met pas tant de lignes ^^
0
Réponse 20 / 26
loicseg Messages postés 168 Date d'inscription dimanche 26 février 2006 Statut Membre Dernière intervention 30 septembre 2011
3 sept. 2008 à 16:59
et bien j'ai ça :

<SCRIPT>
function centrer(){
var igrec=window.event.offsetY
var ixe=window.event.offsetX
ixe.style.left=((document.body.clientWidth-bibi.offsetWidth)/2)+document.body.scrollLeft
igrec.style.top=((document.body.clientHeight-bibi.offsetHeight)/2)+document.body.scrollTop
}
</SCRIPT>
Je n'y arrive vraiment pas, pourtant j'utilise votre aide. Au secours ^^
0

Discussions similaires

Lien vers site internet
cs_giorgio08 -
Whismeril -

12 réponses
Adresse URL de provenance des visiteurs
cs_bmag -
bmag -

8 réponses
Signaler un lien mort
cs_Rimb0 -
ImmortalPC -

6 réponses
paiement sécurisé en ligne
payetonju -
Whismeril -

7 réponses
mettre une variable dans un lien
David78390 -
Hermios -

5 réponses
Rejoignez-nous