Attribuer 1 classe au body en fonction de résolution écran [RESOLU]

Bonjour à Tous !

je travaille sur un site, et à cause d'un petit bug de notre Ie international, je suis contraint d'attribuer une classe à la balise body.
cette classe contient la valeur = "overflow-x:hidden"
le souci, c'est que si l'internaute a une résolution d'écran inférieure à 990px de large, la navigation devient laborieuse.

je suis The quiche en javascript, mais en parcourant le net, j'ai trouvé les code suivant :

détecter la résolution de l'écran :

 <script language="javascript">
<!--
var largeur;
var hauteur;
largeur = screen.width;
hauteur = screen.height;
//-->
</script> 

modifier la classe d'un élément qui possède un id en particulier :

if (document.getElementById('###id###'))	document.getElementById('###id###').className = "###classe###";

avec ceci, j'ai concocté ça :

<script type="text/javascript"> 
if (screen.width<=990)
{
(document.getElementById('PbIe')) document.getElementById('PbIe').className = "bugIe";
}
else
{
(document.getElementById('PbIe')) document.getElementById('PbIe').className = "";
}
</script>

et bien-entendu, ça ne fonctionne pas... héhé

auriez-vous une piste à me suggérer ??
merci à Vous
Modifié par Guim (02 Jan 2009 - 11:30)

j'ai solutionné le problème,
en espérant que ça puisse aider les quiches comme moi :

<script type="text/javascript"> 
if (screen.width>990)	document.getElementById('pbIe').className = "bugIe";
</script>

Modifié par Guim (02 Jan 2009 - 15:58)

Je cherche a faire à peu pret la meme chose mais sans succès.

En fait, je souhaite appliqer également une classe spécifique a body en fonction de la résolution.

par exemple si ma résolution est égale a 1024 en largeur alors j'applique telle classe. si c'est 1280 telle autre, 1600 ou 1920 une autre.

Quelqu'un saurait-il comment faire ? :S

Je ne cautionne absolument pas ce genre de pratique mais bon, voici ta réponse.
D'ailleurs, Guim, prends également des notes sur la détection de la résolution (cross browser).

function windowSize() {
	var w = 0;
	var h = 0;
	
	if(!window.innerWidth) {
		if(!(document.documentElement.clientWidth == 0)) {
			w = document.documentElement.clientWidth;
			h = document.documentElement.clientHeight;
		} else {
			w = document.body.clientWidth;
			h = document.body.clientHeight;
		}
	} else {
		w = window.innerWidth;
		h = window.innerHeight;
	}
	
	return {
		width: w,
		height: h
	};
}

// Pour Klesk
function bodyClass(e) {
	var body = document.getElementsByTagName("body").item(0);
	var dims = windowSize();
	
	if(body) {
		body.className = 
			dims.width < 800 ? "en_dessous_de_800":
			dims.width < 1024 ? "en_dessous_de_1024":
			dims.width < 1280 ? "en_dessous_de_1280":
			// etc
			"sinon_cette_classe";
	}
}

// Sans gestionnaire d'événements
window.onload = window.onresize = bodyClass;

Pas testé.

[Edit] Plus joli en ternaire
Modifié par Ze Nenex (09 Aug 2009 - 22:26)

Merci bien. Je vais garder ça en dernier recours car je n'aime pas non lpus ce genre de choses. Solution de secours disons.