11548 sujets

JavaScript, DOM et API Web HTML5

JS - Problème de récupération des dimensions de la fenêtre sous Opera

Bonjour!
Inscription toute fraîche sur ce forum pour trouver l'aide auprès des connaisseurs!
J'ai un système en javascript qui me permet de récupérer les dimensions de la fenêtre pour ensuite adapter des div et des swf à ces dimensions. C'est opérationnel sous IE 6 et 7 et FF3.
Problème: la chose ne fonctionne pas sous Opera.
Ayant fait faire mon script par un tiers, je suis incapable d'y modifier quoi que ce soit (sauf les chiffres ^^)... Mais il se trouve que cette fois, l'auteur du script bloque aussi, j'en appelle donc à votre aide.
Bref, deux questions, avant de montrer les sources:

1) Comment faire fonctionner ce script sous Opera? Je ne sais pas si le problème a lieu au moment de la récupération des dimensions, ou au moment de leur utilisation pour dimensionner les swf et les div.
2) Je n'ai pas pu tester sous Safari, peut-être quelqu'un pourrait le faire? Et évidemment me dire ce que ça donne... Merci!


>>> la page en question <<<

<script type="text/javascript">

// D'abord on récupère les dimensions de la fenêtre du navigateur
if (parseInt(navigator.appVersion)>3) {
	if (navigator.appName=="Netscape") {
		var winW = window.innerWidth;
		var winH = window.innerHeight;
	}
	if (navigator.appName.indexOf("Microsoft")!=-1) {
		var winW = document.documentElement.offsetWidth;
		var winH = document.documentElement.offsetHeight;
	}
}

// Ici on définit la taille d'origine de notre animation
// Attention! Contrainte avec le code tel qu'il est prévu dans cet ex: toutes les anims chargées doivent faire les mêmes dimensions.
var animW = 800;
var animH = 600;

// Ensuite on calcule les proportions de la fenêtre et de l'anim
var winRatio = winW/winH;
var animRatio = animW/animH;

// Si le ratio de la fenêtre est supérieur à celui de l'anim,
// c'est que la fenêtre est plus large en proportion...
if(winRatio > animRatio){
	// ..donc on adapte la hauteur de l'anim à la hauteur de la fenêtre...
	animH = winH;
	// ...et on garde les proportions en largeur grâce au ratio.
	animW = winH*animRatio;
//
// Sinon, le ratio de la fenêtre est inférieur à celui de l'anim,
// et donc la fenêtre est plus haute en proportion...
} else {
	// ..donc on adapte la largeur de l'anim à la largeur de la fenêtre...
	animW = winW;
	// ...et on garde les proportions en hauteur grâce au ratio.
	animH = winW/animRatio;
}

// Enfin on peut créer la div de telle sorte que sa hauteur ou sa largeur, selon les cas, soit égale à un quart de la fenêtre,
// c'est à dire qu'on divise par 2 les dimensions de l'anim, qui viennent d'être calculées pour coller au mieux à la fenêtre.
document.write('<table border="0px" cellpadding="0px" cellspacing="10px"><tr><td>');
document.write('<div id="flashcontentA" style="width:'+(animW/2)+'px; height:'+(animH/2)+'px"></div>');
document.write('</td><td>');
document.write('<div id="flashcontentB" style="width:'+(animW/2)+'px; height:'+(animH/2)+'px"></div>');
document.write('</td></tr><tr><td>');
document.write('<div id="flashcontentC" style="width:'+(animW/2)+'px; height:'+(animH/2)+'px"></div>');
document.write('</td><td>');
document.write('<div id="flashcontentD" style="width:'+(animW/2)+'px; height:'+(animH/2)+'px"></div>');
document.write('</td></tr></table>');


// Et pour finir on charge l'animation en la dimensionnant selon nos calculs
var so = new SWFObject("demo.swf", "demo", animW, animH, 8, "#FFFFFF");
so.addParam("quality", "high");
so.write("flashcontentA");
so.write("flashcontentB");
so.write("flashcontentC");

//pour charger différentes anim, créer une nouvelle variable à chaque foi, ex:
var soA = new SWFObject("demo2.swf", "demo2", animW, animH, 8, "#FFFFFF");
soA.addParam("quality", "high");
soA.write("flashcontentD");

</script>
Salut,

personnellement j'utilise ce script pour déterminer la hauteur du viewport :
// fonction getWindowHeight (  http://pompage.net/pompe/pieds/  )
function getWindowHeight() {
	var windowHeight=0;
	if (typeof(window.innerHeight)=='number') {
		windowHeight=window.innerHeight;
	} else {
		if (document.documentElement&& document.documentElement.clientHeight) {
			windowHeight = document.documentElement.clientHeight;
		} else {
			if (document.body&&document.body.clientHeight) {
				windowHeight=document.body.clientHeight;
			}
		}
	}
	return windowHeight;
}
Je n'ai pas testé mais je suppose que cela s'adapte facilement pour le Width.
Merci pour ce bout de code...
Par contre comme je le disais je suis complètement novice, et je ne sais pas comment l'adapter dans ma page.
A tout hasard, j'avais remplacé la partie de mon code qui détectais la taille de la fenêtre par cette fonction mais évidemment ça ne marche pas...
Quelqu'un pourrait-il m'éclaircir?
Bon je sais comment marche ce bout de code maintenant mais... ça ne résout pas du tout mon problème.

Je rappelle mes questions: j'utilise javascript pour charger des animations flash et les dimensionner en fonction de la taille de la fenêtre. Ma page ne fonctionne pas sous Opera (qui affiche mes anims en ridiculement miniature et qui ne met même pas les overflow de ma feuille de style, alors que cette page fonctionne sur ce principe!!!)
Bref, 1) je ne sais pas où est le problème: au moment de la récupération des dimensions de la fenêtre ou au moment du dimensionnement des anims?
2) comment résoudre ce problème???
Sujet clos
Aller à