Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage JavaScript popup onload resizeBy - problème!

popup onload resizeBy - problème!

11 réponses
Avatar
Grégoire Gerardin
Bonjour,

J'ai mis en place une petite fonction pour "resizer" automatiquement une
popup à la dimension d'une image. Cette fonction est appelée sur le onload
du body, mais un bug étrange survient. Il semblerait que le resizeBy agit
avant que l'image soit complètement chargée, puisque la popup est souvent
trop petite, généralement en hauteur. Par exemple, sur une image qui fait
460x650 pixels, la popup se resize à 460x535 pixels systématiquement! Je
suis certain que ma fonction est tout-à-fait correcte (voir plus bas), le
problème vient donc probablement de IE 6 (win XP sp2).

Mon intuition est que le format JPEG divise l'image en plusieurs zones, et
que le signal est donné au onLoad lorsque le chargement de la dernière zone
*débute*, au lieu de lorsque celui-ci se termine. En tout cas, une fois la
popup resizée à la mauvaise taille, si je fais un refresh (F5) de la popup,
elle se resize finalement à la bonne dimension...

Avez-vous une idée du problème, mon intuition est-elle bonne, et avez-vous
une solution?

Merci!
Grégoire

ps: voici la page html en question (réduite à l'essentiel... ma page
contient bel et bien le <html>, <head>, etc...) :

<script language='javascript'>
function fitpic() {
iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
window.resizeBy(iWidth, iHeight);
self.focus();
}
</script>

<body onload="fitpic()" style="margin:0px">
<script language='javascript'>
document.write( "<img src='portfolio/" + picUrl + "' border=0>" );
</script>
</body>
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
ASM

voici la page html en question (réduite à l'essentiel... ma page
contient bel et bien le <html>, <head>, etc...) :

<script language='javascript'>
function fitpic() {


// tout çà ne sert à rien (à mon idée)
/*

iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
*/

// et je ferais direct :
iWidth = document.images[0].width;
iHeight = document.images[0].height;
// on peut rajouter (au cas ou le style de balise body ne suffirait pas)
document.getElementsByTagName('BODY')[0].style.margin='0px';

window.resizeBy(iWidth,iHeight); // pas d'espace svp
self.focus();
}
</script>

<body onload="fitpic()" style="margin:0px">


Non ! Erreur !
le onload du body n'attend pas que les images soient finies de charger
Heureusement !
comme ça on peut commencer à lire même si on n'a pas ttes les illustrations.

<script language='javascript'>
document.write( "<img src='portfolio/" + picUrl + "' border=0>" );
</script>
</body>


Préférer :

<body style="margin:0px">
<script type="text/javascript">
document.write('<img src="portfolio/' + picUrl + '" border=0 onload="fitpic();">');
</script>
</body>



--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Grégoire Gerardin
"ASM" a écrit dans le message de news:




voici la page html en question (réduite à l'essentiel... ma page
contient bel et bien le <html>, <head>, etc...) :

<script language='javascript'>
function fitpic() {


// tout çà ne sert à rien (à mon idée)


Salut,

Merci pour ta réponse! Malheureusement tu sembles avoir lu trop rapidement
;-) "tout ça" ne sert justement pas à rien! Je t'explique. On peut
utiliser :

soit : resizeTo(total_width, total_height);
soit : resizeBy(added_width, added_height);

Ta solution d'utiliser directement la taille de l'image sans mes calculs
s'utiliserait donc avec resizeTo(w,h). Le problème est que cette fonction
défini la dimension *totale* de la popup (avec le cadre, la barre de titre,
et le status s'il y en a un). Il faudrait donc calculer l'épaisseur du cadre
et l'ajouter aux dimensions de l'image pour que ça fonctionne, et puisque
cette épaisseur varie selon les navigateurs, c'est très compliqué pour rien.
Du coup, ma technique est plus simple : je calcule la dimension intérieure
de la popup (par exemple 200x200), que je soustrait à la dimension de
l'image. Par exemple pour le width, j'obtiens la valeur 260px pour une
image de 460px (460-200). Et ensuite, il me suffit de faire un *resizeBy*
(ca ajoute les valeurs à la dimension actuelle) et la popup se redimensionne
à la bonne taille.

Pour ton autre suggestion, de mettre le onload dans le tag <img>, ça semble
pas mal, mais ton explication n'est pas exacte. Le onLoad du body attend
bel et bien le chargement des images avant de s'activer. D'aileurs ce n'est
pas le onLoad qui lance l'affichage du texte. Ca n'a rien à voir avec ça.
Le texte s'affiche au fur et à mesure du téléchargement de la page, tout
simplement. Et de toute manière, j'ai testé ta solution qui malgré tout
devrait effectivement être plus efficace, mais ça ne fonctionne toujours
pas!! Je m'arrache les cheveux! Le plus étrange c'est que j'ai placé un
alert(iHeight) avant le resizeBy(iWidth,iHeight), et j'obtiens la bonne
valeur! C'est comme si c'était la fonction resizeBy qui était défectueuse.

Je continue de chercher. Si t'as d'autres idées, n'hésite pas!

Merci encore,
Grégoire



/*

iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
*/

// et je ferais direct :
iWidth = document.images[0].width;
iHeight = document.images[0].height;
// on peut rajouter (au cas ou le style de balise body ne suffirait pas)
document.getElementsByTagName('BODY')[0].style.margin='0px';

window.resizeBy(iWidth,iHeight); // pas d'espace svp
self.focus();
}
</script>

<body onload="fitpic()" style="margin:0px">


Non ! Erreur !
le onload du body n'attend pas que les images soient finies de charger
Heureusement !
comme ça on peut commencer à lire même si on n'a pas ttes les
illustrations.

<script language='javascript'>
document.write( "<img src='portfolio/" + picUrl + "' border=0>" );
</script>
</body>


Préférer :

<body style="margin:0px">
<script type="text/javascript">
document.write('<img src="portfolio/' + picUrl + '" border=0
onload="fitpic();">');
</script>
</body>



--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



Avatar
Grégoire Gerardin
J'ai trouvé la solution!
La fonction resizeBy refuse d'aggrandir une popup au-dela des limites de
l'écran. Dans ma fonction fitpic, je faisais un resizeBy, puis *après* je
centrais ma popup. Maintenant je centre avant tout, pour libérer l'espace
du bas, et je resizeBy après, et tout marche nickel.


"ASM" a écrit dans le message de news:




voici la page html en question (réduite à l'essentiel... ma page
contient bel et bien le <html>, <head>, etc...) :

<script language='javascript'>
function fitpic() {


// tout çà ne sert à rien (à mon idée)
/*

iWidth = (NS)?window.innerWidth:document.body.clientWidth;
iHeight = (NS)?window.innerHeight:document.body.clientHeight;
iWidth = document.images[0].width - iWidth;
iHeight = document.images[0].height - iHeight;
*/

// et je ferais direct :
iWidth = document.images[0].width;
iHeight = document.images[0].height;
// on peut rajouter (au cas ou le style de balise body ne suffirait pas)
document.getElementsByTagName('BODY')[0].style.margin='0px';

window.resizeBy(iWidth,iHeight); // pas d'espace svp
self.focus();
}
</script>

<body onload="fitpic()" style="margin:0px">


Non ! Erreur !
le onload du body n'attend pas que les images soient finies de charger
Heureusement !
comme ça on peut commencer à lire même si on n'a pas ttes les
illustrations.

<script language='javascript'>
document.write( "<img src='portfolio/" + picUrl + "' border=0>" );
</script>
</body>


Préférer :

<body style="margin:0px">
<script type="text/javascript">
document.write('<img src="portfolio/' + picUrl + '" border=0
onload="fitpic();">');
</script>
</body>



--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



Avatar
ASM

"ASM" a écrit dans le message de news:




voici la page html en question (réduite à l'essentiel... ma page
contient bel et bien le <html>, <head>, etc...) :

<script language='javascript'>
function fitpic() {


// tout çà ne sert à rien (à mon idée)


Salut,

Merci pour ta réponse! Malheureusement tu sembles avoir lu trop rapidement
;-)


vu l'heure de mon post ... un peu fatigué ?

"tout ça" ne sert justement pas à rien! Je t'explique. On peut
utiliser :

soit : resizeTo(total_width, total_height);
soit : resizeBy(added_width, added_height);



Ha! ben celle là ! si je m'attendais !
je n'ai même pas imaginé le resize by ...
(qui veut dire agrandir de ...)
et comme tu veux (à ce que je crois) tailler à xxx yyy
c'est donc resizeTo() qui est le bon (et sans compliquer inutilement)

Le problème est que cette fonction
défini la dimension *totale* de la popup (avec le cadre, la barre de titre,
et le status s'il y en a un).


Ben ... chez moi ...
ça considère bien la dimension de l'affichage interne
(tous navigateurs + vieux Mac)

http://perso.wanadoo.fr/stephane.moriaux/internet/web_htm/java/fenetr/
on doit y trouver des pop-ups avec une image qui montre la taille affichée

[snip]
la popup (par exemple 200x200), que je soustrait à la dimension de
l'image. Par exemple pour le width, j'obtiens la valeur 260px pour une
image de 460px (460-200). Et ensuite, il me suffit de faire un *resizeBy*


Parceque ... cette fois le resizeBy ne s'interesse qu'à l'interieur ?
C'est sans doute encore un particularisme de IE Win ?
(un coup dehors un coup dedans ... à vot' bon coeur)

onload dans le tag <img> ça ne fonctionne toujours
pas!! Je m'arrache les cheveux! Le plus étrange c'est que j'ai placé un
alert(iHeight) avant le resizeBy(iWidth,iHeight), et j'obtiens la bonne
valeur! C'est comme si c'était la fonction resizeBy qui était défectueuse.


Sans doute ... :-/
à force de simplifier en compliquant ;-))


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



Avatar
ASM

J'ai trouvé la solution!
La fonction resizeBy refuse d'aggrandir une popup au-dela des limites de
l'écran. Dans ma fonction fitpic, je faisais un resizeBy, puis *après* je
centrais ma popup. Maintenant je centre avant tout, pour libérer l'espace
du bas, et je resizeBy après, et tout marche nickel.


Quand je disais ...

pourquoi faire simple quand on peut faire compliqué !


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Grégoire Gerardin
"ASM" a écrit dans le message de news:


Ha! ben celle là ! si je m'attendais !
je n'ai même pas imaginé le resize by ...
(qui veut dire agrandir de ...)
et comme tu veux (à ce que je crois) tailler à xxx yyy
c'est donc resizeTo() qui est le bon (et sans compliquer inutilement)

Le problème est que cette fonction
défini la dimension *totale* de la popup (avec le cadre, la barre de
titre,
et le status s'il y en a un).


Ben ... chez moi ...
ça considère bien la dimension de l'affichage interne
(tous navigateurs + vieux Mac)


hmm hmm... permet moi d'en douter! Sur PC, pour tous les navigateurs
(mozilla, IE, ...) ça fonctionne sur la dimension totale, et je suis pas mal
certain que c'est comme ça sur Mac aussi. Par exemple, pour faire une popup
plein-écran, il suffit de faire un resizeTo(window.screen.availWidth, ...);
Les cadres ne se situeront pas à l'extérieur de l'écran mais bien à
l'intérieur.

http://perso.wanadoo.fr/stephane.moriaux/internet/web_htm/java/fenetr/
on doit y trouver des pop-ups avec une image qui montre la taille affichée


404! ;)

[snip]
la popup (par exemple 200x200), que je soustrait à la dimension de
l'image. Par exemple pour le width, j'obtiens la valeur 260px pour une
image de 460px (460-200). Et ensuite, il me suffit de faire un
*resizeBy*


Parceque ... cette fois le resizeBy ne s'interesse qu'à l'interieur ?
C'est sans doute encore un particularisme de IE Win ?
(un coup dehors un coup dedans ... à vot' bon coeur)


bah non, resizeBy ajoute les valeurs spécifiées à la dimension actuelle.
Donc que ça soit la dimension totale ou intérieure, le résultat est le même!
(dimension intérieur : 200, on ajoute 260, nouvelle dimension intérieure :
460; OU dimensien totale : 212, on ajoute 260, nouvelle dimension totale :
472 -> donc dimension intérieure 460 aussi)


onload dans le tag <img> ça ne fonctionne toujours
pas!! Je m'arrache les cheveux! Le plus étrange c'est que j'ai placé un
alert(iHeight) avant le resizeBy(iWidth,iHeight), et j'obtiens la bonne
valeur! C'est comme si c'était la fonction resizeBy qui était
défectueuse.


Sans doute ... :-/
à force de simplifier en compliquant ;-))


hmm hmm...
;)

Greg


Avatar
Grégoire Gerardin
"ASM" a écrit dans le message de news:


J'ai trouvé la solution!
La fonction resizeBy refuse d'aggrandir une popup au-dela des limites de
l'écran. Dans ma fonction fitpic, je faisais un resizeBy, puis *après*
je
centrais ma popup. Maintenant je centre avant tout, pour libérer
l'espace
du bas, et je resizeBy après, et tout marche nickel.


Quand je disais ...

pourquoi faire simple quand on peut faire compliqué !


l'un ou l'autre, c'est aussi compliqué, mais ce coup-ci je dois admettre que
c'est microsoft qui casse les couilles!!! ;)




--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



Avatar
ASM

"ASM" a écrit dans le message de news:


Ben ... chez moi ...
ça considère bien la dimension de l'affichage interne
(tous navigateurs + vieux Mac)



Je re-regarde ...

Ben ! plus fort que du roquefort !
les resizes ne s'apliquent pas à la même zone que l'open direct ? !

NC 4.5 Zone demandée + la place pour ascenseurs (même si y en a pas)
IE 5.1 Zone demandée bouffée par toutes les barres (état, favoris, etc ...)
Mozilla 1.2 idem IE 5

hmm hmm... permet moi d'en douter! Sur PC, pour tous les navigateurs
(mozilla, IE, ...) ça fonctionne sur la dimension totale,


Si tu entends par "totale" : avec les barres (sur Mac le menu s'y ajoute)
Si tu entends par "tous navigateurs" que ceux un peu récents
oui je dois bien avouer :-(

http://perso.wanadoo.fr/stephane.moriaux/internet/web_htm/java/fenetr/
on doit y trouver des pop-ups avec une image qui montre la taille affichée


404! ;)


bon c'était :
http://perso.wanadoo.fr/stephane.moriaux/internet/web_html/java/fenetr/
et y encore rien sur le resize

reste plus qu'à ... :-)


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************


Avatar
ASM

l'un ou l'autre, c'est aussi compliqué, mais ce coup-ci je dois admettre que
c'est microsoft qui casse les couilles!!! ;)


En général c'est le cas ;-)

Ceci-dit, et si j'ai bien compris ton histoire de resize,

Tu fais ouvrir le pop-up avec une dimension 100,100

truc=window.open('','','top='+(screen.height-100)/2+',left='+
(sreen.width-100)/2+',width0,height0,resizable=1');
truc.blur();

Tu y fais écrire via JS depuis la fenetre appelante

with(truc.document) {
open():
write('<img src="'+monfic+'.jpg" width 0 height 0 '+
onload="self.resizeBy(this.width-100,this.height-100);'+
'self.moveBy((this.width-100)/(-2),(this.height-100)/(-2));'+
'self.focus();">';
close();
}

et c'est bon ? on n'est pas em...é par toutes les barres ?


--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************

Avatar
Grégoire Gerardin
"ASM" a écrit dans le message de news:


l'un ou l'autre, c'est aussi compliqué, mais ce coup-ci je dois admettre
que
c'est microsoft qui casse les couilles!!! ;)


En général c'est le cas ;-)

Ceci-dit, et si j'ai bien compris ton histoire de resize,

Tu fais ouvrir le pop-up avec une dimension 100,100

truc=window.open('','','top='+(screen.height-100)/2+',left='+
(sreen.width-100)/2+',width0,height0,resizable=1');
truc.blur();

Tu y fais écrire via JS depuis la fenetre appelante

with(truc.document) {
open():
write('<img src="'+monfic+'.jpg" width 0 height 0 '+
onload="self.resizeBy(this.width-100,this.height-100);'+
'self.moveBy((this.width-100)/(-2),(this.height-100)/(-2));'+
'self.focus();">';
close();
}

et c'est bon ? on n'est pas em...é par toutes les barres ?



oui c'est à peu près ça. En fait j'ai mis mon javascript dans une fonction
plutot que de l'écrire directement dans le onload mais ça revient au même.
Puis j'ouvre la popup à 200x200 à partir d'un movie flash, mais voilà, t'as
bien compris. Pour les barres et tout le reste, je spécifie de ne pas en
mettre à partir de ma fonction de popup
(directories=0,location=0,menubar=0,scrollbars=0,status=0,toolbar=0,resize=0).

si tu veux voir le résultat, plugin flash 7 requis, 1024x768 minimum :
http://www.1pslb.com/1pslb/
tu choisis un boulot avec les chiffres du haut, et tu fais "agrandir" pour
ouvrir la popup. Si t'as un vieux mac ça risque de ramer à fond, c'est
plein d'actionscript 2 ;)

a+
Greg



--
*******************************************************
Stéphane MORIAUX et son vieux Mac
Aide Pages Perso (images & couleurs, formulaire, CHP)
http://perso.wanadoo.fr/stephane.moriaux/internet/
*******************************************************



1 2