dimensions de la fenêtre du butineur ?

Le
Une Bévue
Bon j'ai réalisé un ch'ti script d'essai, pour voir ;-)

var body = document.body, html = document.documentElement;
var widths = "clientWidth scrollWidth offsetWidth".split(' ');
var heights = "clientHeight scrollHeight offsetHeight".split(' ');
for(var i = 0, l = widths.length; i < l; i++) {
var width = widths[i];
console.log("body." + width + " = " + body[width]);
console.log("html." + width + " = " + html[width]);
}
for(var i = 0, l = heights.length; i < l; i++) {
var height = heights[i];
console.log("body." + height + " = " + body[height]);
console.log("html." + height + " = " + html[height]);
}


ce qui me donne dans la console :
body.clientWidth = 1332
html.clientWidth = 1347
body.scrollWidth = 1347
html.scrollWidth = 1347
body.offsetWidth = 1332
html.offsetWidth = 1348
body.clientHeight = 0
html.clientHeight = 522
body.scrollHeight = 522
html.scrollHeight = 12
body.offsetHeight = 0
html.offsetHeight = 13

si je "mesure", avec FreeRuler les dimensions de la fenêtre (avec
l'Inspecteur en bas sur Opera Next) j'obtiens :
largeur : 1214 (mon écran de portable fait 1280 pixels de large)
hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network" de l'insp.
^__ uniquement le "body" de mon document

alors c'est comment qu'on a les -*-bonnes-*- valeurs ?

c'est pour zoomer une image au max.
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses Page 1 / 2
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
SAM
Le #26314432
Le 11/10/14 19:58, Une Bévue a écrit :

c'est pour zoomer une image au max.



<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26314434
Le 13/10/14 01:29, SAM a écrit :
Le 11/10/14 19:58, Une Bévue a écrit :

c'est pour zoomer une image au max.



<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">




<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="var s=[this.offsetWidth,this.offsetHeight], vh = s[0]>s[1];
if(!this.taille) this.taille=s; // mémorisation affichage originel
if(s[0]>this.taille[0]) { // pour dé-zoomer à taille originale
this.style.width=this.taille[0]+'px';
this.style.height=this.taille[1]+'px';
}
else { // zoom maxi
if(vh){this.style.width='100%';this.style.height='auto';alert('horizontal')}
else {this.style.height='100%';this.style.width='auto';alert('vertical') }
}
// re-positionnement à l'écran
this.id='stef'+Math.random();location='#'+this.id;">


et on s'appuiera sur les css3 pour zoomer progressivement



Pas testé autre que Fx

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
SAM
Le #26314438
Le 11/10/14 19:58, Une Bévue a écrit :

hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network..." de l'insp.
^__ uniquement le "body" de mon document



Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #26314665
Le 13/10/14 01:29, SAM a écrit :

<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">



AH ouais, pas con, merci beaucoup !

MAIS, ça ne marchera pas dans mon cas car mes images sont générées en
php, prévisualisation, en 600x400.

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.
SAM
Le #26314670
Le 13/10/14 16:59, Une Bévue a écrit :
Le 13/10/14 01:29, SAM a écrit :

<img src="1.jpg" style="width:50px;cursor:pointer" alt="image"
onclick="this.style.width='100%'" title="cliquez-moi">



AH ouais, pas con, merci beaucoup !

MAIS, ça ne marchera pas dans mon cas car mes images sont générées en
php, prévisualisation, en 600x400.



et ????

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.



Why ?
une image 600/400 affichée/zoomée à 900/600 ça va ne pas être si si
vilain, non ?
(à mon idée)

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.



Ha! en plus elles ne sont pas pré-orientées !
T'exagères !


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #26314674
Le 13/10/14 17:09, SAM a écrit :
une image 600/400 affichée/zoomée à 900/600 ça va ne pas être si si
vilain, non ?
(à mon idée)



ben, non, ce sont des photos tout de même !

Ceci à partir d'images (photos) qui font en réalité 4288x2848 et que je
dois tourner en fonction de la valeur de EXIF:Orientation.



Ha! en plus elles ne sont pas pré-orientées !
T'exagères !



ben il n'y a aucune raison de les pré-orienter vu que la pluspart des
logiciels font ça tout seul...
Une Bévue
Le #26314673
Le 13/10/14 02:29, SAM a écrit :
Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)




ben aucune des dimensions lues ne correspond à une dimension
=*ïfective=*= ...

même la largeur de la fenêtre est donnée plus grande que celle de mon
écran @#&$ !!!
Baton .rouge
Le #26314681
On Sat, 11 Oct 2014 19:58:37 +0200, Une Bévue

Bon j'ai réalisé un ch'ti script d'essai, pour voir ;-)

var body = document.body, html = document.documentElement;
var widths = "clientWidth scrollWidth offsetWidth".split(' ');
var heights = "clientHeight scrollHeight offsetHeight".split(' ');
for(var i = 0, l = widths.length; i < l; i++) {
var width = widths[i];
console.log("body." + width + " = " + body[width]);
console.log("html." + width + " = " + html[width]);
}
for(var i = 0, l = heights.length; i < l; i++) {
var height = heights[i];
console.log("body." + height + " = " + body[height]);
console.log("html." + height + " = " + html[height]);
}


ce qui me donne dans la console :
body.clientWidth = 1332
html.clientWidth = 1347
body.scrollWidth = 1347
html.scrollWidth = 1347
body.offsetWidth = 1332
html.offsetWidth = 1348
body.clientHeight = 0
html.clientHeight = 522
body.scrollHeight = 522
html.scrollHeight = 12
body.offsetHeight = 0
html.offsetHeight = 13

si je "mesure", avec FreeRuler les dimensions de la fenêtre (avec
l'Inspecteur en bas sur Opera Next) j'obtiens :
largeur : 1214 (mon écran de portable fait 1280 pixels de large)
hauteur : 471 / 494 / 519
^__ incluant la barre "top frame" de l'inspecteur
^__ incluant la barre "Elements Network..." de l'insp.
^__ uniquement le "body" de mon document

alors c'est comment qu'on a les -*-bonnes-*- valeurs ?

c'est pour zoomer une image au max.



Pour commencer, faire une capture d'écran à 100% et mesurer le nombre
de pixels pour connaitre la bonne valeur

--
Les assistés du CAC 40 :
http://www.youtube.com/watch?feature=player_detailpage&v=W5Yx_diRxA8#tH
SAM
Le #26314680
Le 13/10/14 16:59, Une Bévue a écrit :

Il faut donc que je génère une image temporaire qui fasse, au moins, la
taille de l'écran.



Pour mesurer le viewPort, un truc comme :
<img src="vide.gif"
onload="this.style.width='100%';this.style.height='100%';window.taille=[this.offsetWidth;this.offsetHeight];">

Pas testé, mais yapa d'raison.

Sinon ... un connaisseur :


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Une Bévue
Le #26314679
Le 13/10/14 02:29, SAM a écrit :
Heu ...
n'est-ce point
^__ le "view port" ? (la zone d'affichage)




Bon, je reprends ce binz, d'après (sans jQuery) :

il "faudrait" faire :
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

ce qui me donne :
1347 × 641

avec 1347 + grand que mon écran
et 641 qui ne correspond à rien

...
Publicité
Poster une réponse
Anonyme