Rafraichir un objet JS

Fermé

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 10 mai 2013 à 00:57
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 10 mai 2013 à 01:10

Bonjour,

Voici mon problème:

J'ai un objet javascript dont la valeur est un calcul prenant en compte la largeur de la fenêtre du navigateur.

Je souhaiterais qu'au moment du redimensionnement de la fenêtre, la valeur de mon objet soit recalculée avec la nouvelle largeur. Pour être plus clair, voici un exemple de ce qui ne fonctionne pas:

<html>
<head>
	<title></title>
	<style type="text/css">
		.debug{
			width: 400px;
			height: 300px;
			background-color: lightblue;
			overflow:auto;
		}
		.debug div{
			width: 100%;
			border-bottom:red solid 1px;
			text-align: left;
		}
	</style>
</head>
<body>
	<div class="debug"></div>
</body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
		var toto = {
			i:0,
			elements: {
				width: $(window).width(),
				height: $(window).height()
			},
			_initialize: function(){
				this.addEventListener();
				return this;
			},
			addEventListener: function(){
				$(window).resize(function(){
					var me = totoInstance;
					totoInstance.addDebug('width:' + me.elements.width + ' --- ' + 'height:' + me.elements.height)
				})
			},
			addDebug: function(string){
				this.i++;
				$('.debug').prepend('<div>'+this.i+':'+string+'</div>');
			}
		}
		var totoInstance = toto._initialize();
	</script>
</html>

toto.elements.width aura la valeur de la largeur de la fenêtre au moment du rendu de la page, et ne se mettre plus à jour avec la nouvelle valeur de la fenêtre redimensionnée.

Quelqu'un connaît-il une parade pour avoir un comporte dynamique ?

Merci d'avance :)

A voir également:

Rafraichir un objet JS
Vente objet occasion entre particulier - Guide
Identifier un objet à partir d'une photo - Guide
Comment rafraîchir une page sur tablette ✓ - Forum Téléphones & tablettes Android
Ce document fait l'objet d'un trop grand nombre de modifications ✓ - Forum Word
Objet interdit en cabine ryanair - Guide

2 réponses

Réponse 1 / 2

Octos
10 mai 2013 à 01:04

Il y a un événement nommé onresize:

http://stackoverflow.com/questions/1500312/dom-onresize-event

Réponse 2 / 2

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
10 mai 2013 à 01:10

J'arrive sans autre à détecter la resize, le problème est la mise a jour de la valeur de mon objet. J'ai bidouillé une solution, mais je pense qu'il y a moyen de faire mieux.

<html>
<head>
	<title></title>
	<style type="text/css">
		.debug{
			width: 400px;
			height: 300px;
			background-color: lightblue;
			overflow:auto;
		}
		.debug div{
			width: 100%;
			border-bottom:red solid 1px;
			text-align: left;
		}
	</style>
</head>
<body>
	<div class="debug"></div>
</body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
	<script type="text/javascript">
		var toto = {
			i:0,
			elements: {},
			baseElements:'elements = {width: $(window).width(),height: $(window).height()}',
			_initialize: function(){
				this.addEventListener();
				return this;
			},
			addEventListener: function(){
				$(window).resize(function(){
					var me = totoInstance;
					me.elements = eval(me.baseElements);
					totoInstance.addDebug('width:' + me.elements.width + ' --- ' + 'height:' + me.elements.height)
				})
			},
			addDebug: function(string){
				this.i++;
				$('.debug').prepend('<div>'+this.i+':'+string+'</div>');
			},
			getWidth: function(){
				return $(window).width();
			}
		}
		var totoInstance = toto._initialize();
	</script>
</html>

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

manon

nom de metier

echec de creation de l'objet com