11548 sujets

JavaScript, DOM et API Web HTML5

Le lien entre l'évènement onresize et mes maux de tête...

Bonjour tout le monde,


J'essaye de faire marché l'évènement onresize, mais je n'y arrive pas du tout.

J'ai fait un script tout simple, qui ne fait qu'afficher la hauteur de la fenêtre, en y rajoutant un resize :


<body height="100%">
<script language="javascript">
var dom = net = iex = false;
if (document.getElementById) dom = true; // IE5+ ou Netscape6+/Mozilla
if (document.layers) net = true; // Netscape4
if (document.all) iex = true; // IE4+
if (iex) { var hauteur = document.body.offsetHeight; }
else if (dom || net) { var hauteur = window.innerHeight; }
else {}
document.write(hauteur);
window.onresize=reload();
</script>
</body>


Quelqu'un peut-il m'aider ?

Pour info, je suis en train de refaire une page web avec une petite animation flash en haut à gauche. La taille du site est actuellement fixe, mais j'aimerais la rendre proportionnelle.

http://www.celsius-online.com/accueil.htm

Le problème est que l'animation flash doit avoir une taille proportionnelle. Ca fonctionne bien pour l'animation en elle-même, mais l'objet qui la contient de veut pas accepter de valeur en pourcentage? Je suis donc obligé d'avoir recours à du javascript.

J'ai donc remplacer le
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="100" height="100">

Par :
<script language="JavaScript">
<!--
largeurwin = window.innerWidth; //ou équivalent pour msie
largeurflash = winH / 10; //détail : l'anim flash est un carré
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="'+largeurflash+'" height="'+largeurflash+'">');
//-->
</script>

Et miracle; ça marche! Le problème est que j'aimerais que la taille se réajuste quand la taille de la fenêtre est modifiée (fonction resize) Et là, c'est le drame! Ca marche pas du tout. J'ai essayé dans tous les sens et je n'y arrive pas. J'ai du mal comprendre son fonctionnement.

Merci pour avoir lu jusqu'ici et j'espère que vous aurez une petite réponse pour moi.

A+

Korben
Modifié par korben (19 Dec 2005 - 04:37)
Bonjour,
Juste une remarque, on n'écrit pas <script language="javascript"> mais <script type="text/javascript">

et peux-tu montrer le code de ta fonction reload ?
Merci beaucoup Thanh, je vais regarder ça dès que possible, mais demain, car il est déjà 6h du mat'. C'est vrai que si je peux me passer de JS, c'est tant mieux.

@Quentin (que je félicite au passage pour son site que j'avais trouvé lors de mes recherches) : ceic expliquerait peut-être cela. J'avais cru comprendre que reload était une fonction "intégré", qui recharge la page sans que l'on ait besoin de le définir. Mais apparemment, c'est pas le cas....

En fait, je cherche juste un moyen de modifier la taille du div en cas de changement de la taille de la fenêtre. Je te montre un autre exemple :
http://kellibickman.net/arab/main6.php
C'est un site auquel je viens tout juste de m'atteler (donc désolé si c'est laid et si ça bug de partout).
Le menu à droite doit avoir une taille fixe en pixel et qui s'ajuste automatiquement à la taille de l'écran, et là aussi, j'aurais besoin d'un onresize pour que cela se fasse en temps réel (quoi que, vu que ce menu bug un peu sur certains navigateurs, je vais sûrement le remplacer par un truc plus simple).

Mais revenons à la cause de mes maux de tête : si je comprends bien, il faut que je crée une fonction genre "reload", qui grâce que je lancerais grâce à l'instruction :
window.onresize=reload()

Et la fonction reload incluerait un truc du genre XMLHttpRequest qui rechargerait l'objet flash à chaque resize. A moins qu'il y ait une possibilité de modifier la taille sans recharger l'objet (mais il me semble que c'est impossible avec le JS, qui ne se lance qu'au chargement de la page...). A moins d'avoir un setInterval qui vérifierait régulièrement si la page a été oui ou non redimensionné, et si la réponse est positive, rechargerait la page. Mais ce serait un peu tordu...

En fait, je viens juste de me mettre au JS (Je m'en servais avant que pour les show/hide et les pop up), d'où mon niveau de m__de......
Modifié par korben (19 Dec 2005 - 06:34)
Tu ne peux pas modifier la taille de l'élément flash si l'animation est en train de se dérouler ? Je croyais que c'était possible...

Je te déconseille fortement de faire recharger la page à chaque fois que la taille de la fenêtre change. En effet, suivant le navigateur, l'évènement onresize est envoyé un grand nombre de fois, tant que le bouton de la souris est maintenu lors de l'opération de redimensionnement, et n'est donc pas forcément envoyé uniquement au relâchement final. Mais si tu veux recharger la page, la fonction c'est window.location.reload();
On peut modifier la taille de l'animation flash, mais pas celle de l'objet qui la contient. Mais apparemment, le lien donné pas Thanh donne la solution.

Alors si tu déconseilles de recharger la page (ou une aprtie), que me conseilles-tu de faire pour que la taille reste proportionnelle?
Ben, c'est simple : à chaque redimensionnement, tu modifies la taille de l'élément flash, un petit calcul devrait suffire à avoir les dimensions les plus grandes possibles. Par exemple, l'animation fait par défaut 200 par 100, si je resize la page en 300x300, les dimensions optimales seront : 300x150, et si je resize à 200x50, les dimensions optimales sront alors 100x50.
Pour la solution de Thanh, c'est intéressant mais cela ne répond pas à mon sujet : cela rend la taille de l'animation proportionnelle au font-size, mais pas à la taille de l'écran. Mais merci quand même pour le lien.
Modifié par korben (19 Dec 2005 - 23:57)
@QUentin et les autres : j'ai bien compris qu'il faille changer les dimensions de l'élément à chaque redimensionnement, le problème est que mon code ne marche pas. Dans une autre page, voici le code compris au début du div dont la taille est proportionnelle :

<script> <!--
function reload ()
{
var hauteur = window.innerHeight;
document.write('<div id="frames" style="height:' + hauteur + 'px;">');
}
window.onresize=reload();
//--></script>


La hauteur est donc égale à la hauteur de la fenêtre. La fonction qui calcule la hauteur est appelée par un "window.onresize" mais n'est lancée que lorsque l'on recharge la page, et non à chaque redimensionnement. Et donc ma question est quelle est mon erreur?
Je voyais plutôt ce genre de script :


window.onresize = function () {
var obj = document.getElementById('monAnimFlash');
var defaultW = 240;
varr defaultH = 180;
var winW = document.body.offsetWidth;
var winH = document.body.offsetHeight;
var w = defalutW;
var h = defaultH;
if (winW < winH*(defaultW/defaultH)) {
w = winW;
h = defaultH * (w/defaultW);
}
else {
h = winH;
w = defaultW * (h/defaultH);
}

obj.width = w; 
obj.height = h;
obj.style.width = w +'px';
obj.style.height = h + 'px';
}


Script écrit en live et donc sans garantie de fonctionnement... mais l'idée est là
Sujet clos
Aller à