11544 sujets

JavaScript, DOM et API Web HTML5

Afficher la largeur de la fenêtre

Bonjour,
Je souhaitais voir s'afficher la largeur de la fenêtre du navigateur au fur et à mesure qu'on redimensionnait celle-ci.
J'arrive à le faire mais pas en continu.
Il faut que je rafraichisse le navigateur pour que cela fonctionne. Donc pas tout à fait le résultat cherché
.

 <script type="text/javascript">
           // setInterval("
            if (document.body)
            {
            var larg = (document.body.clientWidth);
            } 
            else
            {
            var larg = (window.innerWidth);
            }
            document.write("Largeur de la fenêtre: <b>" + larg + " px </b>de large");
           // ", 1000);
            </script>


J'avais essayé un auto-refresh ou un setInterval ( ce sont les commentaires restés dans le code).
Cette largeur affichée c'est celle de la fenêtre utile . C'est à dire la fentre moins la largeur du scroll vertical, c'est bien cela ?

Merci

Cordialement
Dans le head:

<script type="text/javascript">
    function resize(){
	//alert("Je redimensionne...");
        if (document.body)
        {
        var larg = (document.body.clientWidth);
        } 
        else
        {
        var larg = (window.innerWidth);
        }
        document.write("Largeur de la fenêtre: <b>" + larg + " px </b>de large");
    }
    window.onresize = resize;
    </script>

Lorsque je redimensionne, ça affiche une page blanche avec la largeur .
En fait je voudrai que cette largeur apparaisse en permanence en temps réel dans une div de la sidebar
Modérateur
C'est pas bien difficile :


<!doctype html>
<!--[if lte IE 7]> <html class="no-js ie67 ie678" lang="fr"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="fr"> <![endif]-->
<!--[if gt IE 9]> <!--><html class="no-js" lang="fr"> <!--<![endif]-->
<head>
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
		<title>J'aime Schnaps.it</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--[if lt IE 9]>
		<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		<link rel="stylesheet" href="css/knacss.css" media="all">
		<link rel="stylesheet" href="css/styles.css" media="all">
</head>
<body>
	<div id="largeurPage">0</div>
	<script type="text/javascript">
	window.addEventListener('load',function(){
		var elLargeurPage = document.getElementById('largeurPage');

		elLargeurPage.innerHTML = document.body.clientWidth;

		this.addEventListener('resize',function(){
			elLargeurPage.innerHTML = document.body.clientWidth;
		});
	});
	</script>
	
</body>
</html>
Bonsoir,

Merci ça fonctionne exactement comme je le souhaitais.
Par contre si je veux ajouter un texte avant et ou après la dimension, du genre "largeur: pixels" quelle est la solution car mes essais ne sont pas concluants.

Cordialement
Sujet clos
Aller à