Dimensions de la page, scroll inclus

Bonjour à tous.

Je suis nouveau sur ce forum, que j'ai découvert en me mettant de plus en plus activement aux technologies côté client (Javascript, quoi). Malgré l'excellence d'Alsacréations, je n'arrive pas à trouver (ni ici ni ailleurs) la solution à mon problème.

J'ai développé une petite classe Javascript qui vise à simuler des "popups internes", à savoir un <div> semi-transparent qui couvre l'ensemble de la page, et par devant un <div> centré, contenant informations, formulaires, etc.
Tout va pour le mieux, mais hélas, je ne parviens pas à trouver ni dans l'objet window, ni document, ni document.body ni quoique ce soit la ou les propriétés me permettant de retrouver la largeur et la hauteur totale de la page, scroll inclus, le but étant pour mon <div> masqueur de couvrir la totalité de la page, même aux delà d'éventuels scrolls (i.e. zones visible et invisibles).

De plus, pour ajouter du piment, j'ai réussi à résoudre le problème sous Internet Explorer - mais je ne trouve plus le code miracle, cela doit être document.offsetWidth de mémoire -, mais je ne trouve aucune solution qui marche sous Firefox, toutes ne me couvrant que la zone visible de la page.

Donc voila, si quelqu'un pouvait apporter ses lumières sur ce sujet, ce serait über-sympa.

bonjour,

je n'ai pas la solution et pas envie de chercher , pourtant en css ce n'est pas bien compliqué ..... , les seules fois ou j'ai vu des div masqueurs , c'etait pour imposer une pub et un click, , autant dire que le click je le fait directement sur la petite croix rouge de mon onglet de page dans firefoxe ! .... , la télé je zappe ou je boycott la chaine , idem pour la radio , quand au pub affiche , je ne prends pas la peine de les lires , trop c'est trop .

Expliquez quand-même si il s'agit d'autre chose pour obtenir aide ou conseils .

++

Le problème n'est pas le fait de "masquer" en lui-même (l'opacité, tout ça), mais de récupérer la totalité de la page. Dans le cas de pub, je ne pense pas qu'ils se préoccupent trop de connaître les dimensions totales, ce qui les intéressent c'est d'être en plein milieu de l'écran...

Ici, le souci est de trouver les valeurs de la largeur et de la hauteur de la page visible et invisible.
Par exemple, si la page fait 3000*3000 pixels, et qu'elle est visionnée dans une fenêtre de 500*500 pixels, j'ai besoin de trouver l'information "3000" même, alors que la plupart des propriétés de window.document vont me donner 500 ...

quelques elements de reponses ici :
http://www.quirksmode.org/js/doctypes.html

++

on notes quand-mêmes quelques divergences de valeurs entre IE et firefoxe et selon le mode standard et le quirk mode d'IE , mais les valeurs en retours ne sont pas egales a zero , de la a faire un test et de pensée que les resultats seront ceux attendus , il n'y a probablement pas loin ...

D'ailleurs les dimensions donnée dans le fichiers css sont en EM et celles fournies par le javascript en pixel .... peut-etre est ce la la divergence de valeurs
Modifié par gcyrillus (12 Nov 2006 - 22:53)

Bonsoir à tous.

Finalement, j'ai trouvé une solution qui devrait fonctionner tout aussi bien : je cherche non plus la taille totale de la page, mais la taille de la fenêtre ainsi que la position du scroll ; pour créer mon masque total, je n'aurais plus qu'à créer un <div> de la taille de la fenêtre et placé au début du scroll.

Voici donc le code qui me permet de trouver mes informations :

var scrollH = 0;	// scrollY
var scrollW = 0;	// scrollX
var windowH = 0;	// largeur de la fenêtre
var windowW = 0;	// hauteur de la fenêtre
// document.doctype n'est pas nul seulement si nous sommes sous FF et
//qu'une doctype a été définie
// document.documentElement.clientHeight ne vaut 0 que sous IE et sans doctype ou avec doctype HTML 4.0
if (document.doctype == null || document.documentElement.clientHeight == 0)
{
	// IE -OU- pas de doctype
	// window.innerWidth n'est définie que sous FF
	// les deux paires d'égalité suivantes sont vérifiées sous IE en absence 
	// de doctype
	if (window.innerWidth 
	|| (document.body.offsetHeight == document.documentElement.offsetHeight 
&& document.body.offsetWidth == document.documentElement.offsetWidth))
	{
		// (A)
		// Firefox ou IE sans doctype -OU- IE avec doctype HTML 4.0
		scrollH = document.body.scrollTop;
		scrollW = document.body.scrollLeft;
		windowH = document.body.clientHeight;
		windowW = document.body.clientWidth;
	}
	else
	{
		// (B)
		// IE avec doctype XHTML 1.0
		scrollH = document.documentElement.scrollTop;
		scrollW = document.documentElement.scrollLeft;
		windowH = document.documentElement.clientHeight;
		windowW = document.documentElement.clientWidth;
	}
}
else
{
	// Firefox
	if (document.doctype.publicId.search(/xhtml/i) != -1)
	{
		// (C)
		// Firefox doctype XHTML 1.0
		scrollH = document.documentElement.scrollTop;
		scrollW = document.documentElement.scrollLeft;
	}
	else
	{
		// (D)
		// Firefox doctype HTML 4.0
		scrollH = document.body.scrollTop;
		scrollW = document.body.scrollLeft;
	}
}
// FireFox
if (window.innerWidth && window.innerHeight)
{
	// (E)
	windowH = window.innerHeight;
	windowW = window.innerWidth;
}

Petites explications complémentaires.

Nous allons entrer dans :
a) si nous n'avons pas de doctype (FF ou IE), ou si nous sommes sous IE avec une doctype HTML 4.0
b) si nous somme sous IE avec une doctype XHTML 1.0
c) si nous sommes sous FireFox et avec une doctype XHTML 1.0
d) si nous sommes sous FireFox et avec une doctype HTML 4.0
e) pour Firefox, afin de récupérer une valeur sûre de la dimension de la fenêtre

Voila voila. Alors évidemment, le gros problème, c'est que tout ça n'a été testé que sous Firefox 1.5 et IE 6.0, et que je sens que sous IE 5.0, IE 7.0, Opera et autres tout ça retombe à l'eau en partie...
edit : non, je viens d'installer Opera, et ça tourne bien apparemment, dans les 3 cas (sans dt, html 4.0 et xhtml 1.0)

Je ferai donc signe lorsque j'aurais complété l'algorithme.

Enfin, une petite remarque sur http://www.quirksmode.org/js/doctypes.html, c'est qu'il gère avec ou sans doctype, alors qu'il faut parfois distinguer doctype HTML 4.0 et HTML 1.0 ...

Je sens que je vais devenir fouuuuu
Modifié par xportebois (14 Nov 2006 - 23:01)