[POO] Placer un objet au centre de l'ecran meme avec scrollbar

Version imprimable

30/05/2008, 10h40
identifiant_bidon

[POO] Placer un objet au centre de l'ecran meme avec scrollbar
Bonjour

Voici mon problème. Je dispose d'un tableau de données. Ce tableau contient beaucoup de lignes et j'ai un lien "afficher" dans chaque ligne.

Je veux afficher un élément par clic sur ce lien. Le hic c'est que cet élément, je voudrais l'afficher au centre de ma page. Pour l'instant, avec ce code, je l'affiche toujours au même endroit. Ce qui fait que si je me trouve en bas du tableau, l'element affiché n'est pas visibkle puisqu'il est affiché en haut:
Code:

1 2 document.getElementById('lien_liste_noire').style.left = (document.body.offsetWidth-200)/2; document.getElementById('lien_liste_noire').style.top = (document.body.offsetHeight-180)/2;
Voila, j'espère avoir été assez clair. Merci
30/05/2008, 10h42
SpaceFrog

scrollTo ?
scrollTop
scrollLeft ...
30/05/2008, 10h45
le_chomeur

position fixed en css ??

Code:

1
2
3
document.getElementById('lien_liste_noire').style.position="fixed";
document.getElementById('lien_liste_noire').style.left = (document.body.offsetWidth-200)/2;
	document.getElementById('lien_liste_noire').style.top = (document.body.offsetHeight-180)/2;

Et avec un positinnement "fixed" ca ne fonctionne pas?

Edit: too late

30/05/2008, 10h54
le_chomeur

sinon créer une méthode récupérant le contenu , et tu l'affiche dans une div au centre ( en fixed ;) )
30/05/2008, 10h56
identifiant_bidon

Avec le dernier code donné, j'ai mon élément qui est affiché mais tout en bas de mon tableau. ( Je parle du code de Tussssss)

Tiens je vais essayer avec ScrollTo, scrollTop, et scrollLeft proposées par SpaceFrog
30/05/2008, 11h07
tusssss

Citation:

Envoyé par identifiant_bidon

Avec le dernier code donné, j'ai mon élément qui est affiché mais tout en bas de mon tableau. ( Je parle du code de Tussssss)

Tiens je vais essayer avec ScrollTo, scrollTop, et scrollLeft proposées par SpaceFrog

Avec mon code, il faut surement que tu redéfinisses ta distance top et ta distance left. J'ai repris les tiennes en copier/coller
30/05/2008, 11h48
le_chomeur

bon ... et ma solution ?

Ben c'est précisément ce que je fais en fait.

Voici l'element que j'affiche (avec un style.visibility a visible)

Code:

1
2
3
<div id='lien_liste_noire' style='border:0px; background-color:transparent; width:330; height:180; position:absolute; visibility:hidden;left:0;top:0;'>
					<Iframe id='frame_liste_noire' ALLOWTRANSPARENCY='true' width='100%' height='95%' scrolling='no' name='frame_liste_noire' frameborder='0' src=''></Iframe>
				</div>

30/05/2008, 12h25
identifiant_bidon

Et meme en mettant

Code:

style='border:0px; background-color:transparent; width:330; height:180; position:fixed;

Ca me met mon element tout en bas de page
30/05/2008, 13h22
SpaceFrog

Code:

position: absolute
30/05/2008, 13h41
le_chomeur

bon ... j'dois sentir le poisson aujourd'hui ...
30/05/2008, 13h43
tusssss

Citation:

Envoyé par le_chomeur

bon ... j'dois sentir le poisson aujourd'hui ...

Maintenant que tu le dis :lol:
30/05/2008, 13h46
identifiant_bidon

Ben je t'ai répondu le_chomeur ;) mais aucune de vos solutions ne marche malheureusement .. :cry:
30/05/2008, 14h02
le_chomeur

le parent de la div doit être en position relative , OU
ta div doit être directement dans le document.
autre point , si tu veux centrer ta div verticalement tu dois récupérer sa hauteur en fonction du contenu ...
30/05/2008, 14h10
SpaceFrog

ha j'avais pas compris ça dans ce sens là ...
je pensais qu'il fallait scroller la page de façon à centrer un élement et pas positionner l'élement au centre de la page quelque soit la position des scrollbars ...
30/05/2008, 15h01
identifiant_bidon

Ben ce qui est le plus agaçant c'est que j'ai l'impression que je fais deja tous ces trucs mais ca marche tout de meme pas ....
30/05/2008, 15h03
identifiant_bidon

Citation:

Envoyé par SpaceFrog

ha j'avais pas compris ça dans ce sens là ...
je pensais qu'il fallait scroller la page de façon à centrer un élement et pas positionner l'élement au centre de la page quelque soit la position des scrollbars ...

oui c'est plutot ca que je voulais mais toujours pas de soluce ....
30/05/2008, 15h19
SpaceFrog

ben avec scrollTo() ou le en fixant le scrollTop et scrollLeft de la page ...

en calculant le screen.heigh
le obj.offsetHeight

et du coup il faut scroller le body
obj.offsetTop +(screen.height-obj.offsetHeight)/2

pour le centrage en hauteur et pareil pour le centrage en largeur ...

Euh ouais j'ai pas tout bien compris mais apparemment ma première façon de faire est pas top. Je ne peux plus utiliser un truc du genre ?? :

Code:

1
2
	document.getElementById('lien_liste_noire').style.left = (document.body.offsetWidth-200)/2;
	document.getElementById('lien_liste_noire').style.top = (document.body.offsetHeight-180)/2;

ou ligne_liste_noire est l'id du div que j'affiche

Code:

1
2
3
<div id='lien_liste_noire' style='border:0px; background-color:transparent; width:330; height:180; position:absolute; visibility:hidden;left:0;top:0;'>
     <Iframe id='frame_liste_noire' ALLOWTRANSPARENCY='true' width='100%' height='95%' scrolling='no' name='frame_liste_noire' frameborder='0' src=''></Iframe>
</div>

30/05/2008, 15h29
le_chomeur

et pourquoi pas une position fixed ?????
30/05/2008, 15h33
SpaceFrog

c'est crossbrowser ça ? :?
30/05/2008, 15h44
le_chomeur

oui ie6 /7 / FF /SAFARI & co ^^
voir contribution des css ;)
30/05/2008, 15h48
SpaceFrog

mais à priori ça ne répond pas à son attente ???
enfin d'après ce que j'ai compris, il ne cherche pas une div flottant, mais juste à centrer le div dans l'écran
30/05/2008, 15h50
identifiant_bidon

C'est désespérant, j'ai essayé avec position a fixed mais la div s'affiche toujours tout en bas de ma page
30/05/2008, 15h52
identifiant_bidon

Citation:

Envoyé par SpaceFrog

mais à priori ça ne répond pas à son attente ???
enfin d'après ce que j'ai compris, il ne cherche pas une div flottant, mais juste à centrer le div dans l'écran

oui c'est tout ce que je veux
30/05/2008, 15h55
le_chomeur

heu oui mais qu'elle soit tout le temps centrée ?
donc fixed répond a la problématique ....

de plus si ton objet apparait tout en bas , cela veut dire qu'il est a l'intérieur d'un élément qui lui n'a pas les bonne propriété , montre nous le code complet :)
30/05/2008, 16h06
tusssss

Citation:

Envoyé par le_chomeur

heu oui mais qu'elle soit tout le temps centrée ?
donc fixed répond a la problématique ....

de plus si ton objet apparait tout en bas , cela veut dire qu'il est a l'intérieur d'un élément qui lui n'a pas les bonne propriété , montre nous le code complet :)

Si quelque soit la méthode utilisée, le div apparait en bas, en effet, l'erreur doit surement venir du div conteneur de celui-ci.
30/05/2008, 16h17
SpaceFrog

qu'entends tu par en bas de page ??? les scrollbars sont à fond en bas et le div est collé au bas de la page ou il y a encore du scroll vertical en dessous ?
30/05/2008, 16h18
le_chomeur

haaa j'me sens moins seul d'un tout d'un seul :yaisse2::yaisse2:

peut être un début d'eclaircissement :

Code:

1
2
3
4
5
<body style="height:2000;width:2000;overflow:auto">
 
<div style="position:absolute;top:1000;left:1000;width:200;height:200;background-color:red">&nbsp;</div>
 
</body>

et du coup il faut mettre un div fake en bas à gauche:

Code:

1
2
3
4
5
6
<body style="height:2000;width:2000;overflow:auto">
 
<div style="position:absolute;top:1000px;left:1000px;width:200;height:200;background-color:red">&nbsp;</div>
<div style="position:absolute;top:2000;left:2000;width:1px;height:1px;">&nbsp;</div>
 
</body>

29/10/2008, 19h01
cyrilskof

Ptite question

Ayant le même problème, je suis trés proche de la réponse, il me manque juste une donnée :
Comment obtenir le scrollTop du navigateur ?

Je m'explique : lorsqu'on scroll une page web vers le bas, il y a une valeur de scroll ( par exemple : 500 px du haut du document).

J'ai essayé avec la fonction :
document.scrollTop ou encore document.body.scrollTop mais ça ne fonctionne pas.

Une idée???

Début de solution

Bon voilà, aprés de nombreuses recherches je suis arrivé à faire quelquechose qui fonctionne assez correctement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 var largeur = 800; // largeur du div a afficher
     var hauteur = 600;	 // hauteur du div
	 var top=0; // initialisation
 
		if (navigator.appName == "Microsoft Internet Explorer") // si c'est MIE 
                {
                top=((screen.availHeight-  hauteur)/2) +document.body['scrollTop']; // on calcul la marge du haut : 
				}
            else
                {				
				top=((screen.availHeight-hauteur)/2)+window.pageYOffset;  /// autre methode pour ! de IE
                }
var left=(screen.width-largeur)/2; /// marge gauche
 
cadre.set('margin-top', top); /// on affect le style à l'element souhaité (div)
		cadre.set('margin-left', left);

Voilà j'espère que ça pourra en aider certains.

Au fait pour le css :

Code:

1
2
position: absolute;
z-index:200;

++:king:

29/10/2008, 20h40
Sub0

Salut! ;)

Je n'ai pas lu le sujet en entier, je ne sais pas si votre problème est maintenant résolu...
J'ai réalisé ceci sous Firefox si ça peut vous aider (sait-on jamais) :

http://sub0.developpez.com/html/popup.htm

A+

Fuseau horaire GMT +2. Il est actuellement 10h54.