[Résolu] Redimensionner un bloc par M.Gaetan89 - page 1

Hello !
J'ai lu le tuto pour créer un gestionnaire de fenêtre en JS.
J'ai voulu ajouter une option pour redimensionner une fenêtre à la taille de l'écran, mais les deux lignes suivantes sont sans effets:

element.style.height = screen.height + 'px';
element.style.width = screen.width + 'px';

D'après FireBug, les valeurs sont bien modifiées, mais rien ne change à l'écran :s
J'ai tenté un alert( element ); qui me renvoie quelque chose comme [HTMLObjectElement], alert( element.style ); qui me renvoie quelque chose comme [CSSObjectElement] et enfin un alert( element.style.height ); qui ne me renvoie rien :s
Avez-vous une idée de ce qui est mal fait?
Vous faut-il plus de code?
Merci,
EmmaBlack

J'ai fait une recherche sur Google avant de poster et d'autre ont le même soucis (uniquement sur Firefox il semblerait).
Voici le code de la page HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<script src="js/function.js" type="text/javascript"></script>
<script src="js/move.js" type="text/javascript"></script>
<title>WebOS &bull; Version 0.1</title>
</head>
<body>
<div id="desk"></div>
<div id="taskbar"><a id="apt_term"><img alt="Terminal" title="Terminal" src="img/terminal.png" /></a><a id="apt_gimp"><img alt="GIMP" title="GIMP" src="img/gimp.gif" /></a><span id="apt_list" /></div>
<script src="js/application.js" type="text/javascript"></script>

<script src="js/common.js" type="text/javascript"></script>
</body>
</html>

Le fichier JS application.js (une ébauche de POO, mais probablement imparfaite ^^):

function application()
{
	this.nbr = 0;

	this.makeWindow = function(appName, titleTxt, contentTxt)
	{
		// création de la fenêtre et de son titre
		var desk = document.getElementById( 'desk' );
		var window = document.createElement( 'div' );
		var title = document.createElement( 'div' );
		var actionClose = document.createElement( 'a' );
		var actionBig = document.createElement( 'a' );
		var actionReduce = document.createElement( 'a' );
		var actionSmall = document.createElement( 'a' );
		var app = document.createElement( 'div' );
		actionClose.setAttribute( 'id', appName + apt.nbr + 'close' );
		actionClose.setAttribute( 'title', 'Fermer la fenêtre' );
		actionClose.className = 'close';
		actionClose.appendChild( document.createTextNode( 'X' ) );
		actionBig.setAttribute( 'id', appName + apt.nbr + 'big' );
		actionBig.setAttribute( 'title', 'Agrandir la fenêtre' );
		actionBig.className = 'big';
		actionBig.appendChild( document.createTextNode( '+' ) );
		actionReduce.setAttribute( 'id', appName + apt.nbr + 'reduce' );
		actionReduce.setAttribute( 'title', 'Réduire la fenêtre' );
		actionReduce.className = 'reduce';
		actionReduce.appendChild( document.createTextNode( '-' ) );
		actionSmall.setAttribute( 'id', appName + apt.nbr + 'small' );
		actionSmall.setAttribute( 'title', 'Baisser la fenêtre' );
		actionSmall.className = 'small';
		actionSmall.appendChild( document.createTextNode( '_' ) );
		title.setAttribute( 'id', appName + apt.nbr + 'title' );
		title.className = 'apt_title';
		title.appendChild( document.createTextNode( titleTxt ) );
		title.appendChild( actionClose );
		title.appendChild( actionBig );
		title.appendChild( actionReduce );
		title.appendChild( actionSmall );
		app.appendChild( document.createTextNode( contentTxt ) );
		app.className = appName;
		window.appendChild( title );
		window.appendChild( app );
		window.setAttribute( 'id', appName + apt.nbr );
		window.className = 'apt';
		desk.appendChild( window );

		// mise au premier plan
		focus( window );

		// ajout des évènements
		addEvent( title, 'mousedown', function(event) { startDrag( event, window ); } );
		addEvent( title, 'mouseup', function() { stopDrag( window ); } );
		addEvent( window, 'mousedown', function() { focus( window ); } );
		addEvent( actionClose, 'click', function() { closeWindow( window ); } );
		addEvent( actionBig, 'click', function() { bigWindow( window ); } );
		addEvent( actionReduce, 'click', function() { reduceWindow( app ); } );
		addEvent( actionSmall, 'click', function() { reduceWindow( window ); } );

		// ajout de la fenêtre dans la barre des tâche
		this.addWindow( appName, titleTxt );

		// incrémentation du nombre de fenêtre
		apt.nbr++;
	}

	this.addWindow = function(appName, titleTxt)
	{
		// ajout de la fenêtre dans la barre des tâches
		var taskbar = document.getElementById( 'apt_list' );
		var appCase = document.createElement( 'div' );
		appCase.className = 'app_list';
		appCase.setAttribute( 'id', appName + apt.nbr + 'list' );
		appCase.appendChild( document.createTextNode( titleTxt ) );
		taskbar.appendChild( appCase );

		// ajout des évènements
		var id = appName + apt.nbr;
		addEvent( appCase, 'click', function() { showWindow( id ); } );
	}

	this.gimp = function()
	{
		apt.makeWindow( 'gimp', 'GIMP', 'Editeur d\'image GIMP Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a ligula. Proin ut mi. Suspendisse euismod vestibulum tortor. Vestibulum dictum odio quis velit. Quisque quis neque vel erat tempor volutpat. Praesent posuere fermentum felis. Donec interdum lectus et mi. Vestibulum nisl velit, ultricies at, tempor at, iaculis ac, massa. Nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a ligula. Proin ut mi. Suspendisse euismod vestibulum tortor. Vestibulum dictum odio quis velit. Quisque quis neque vel erat tempor volutpat. Praesent posuere fermentum felis. Donec interdum lectus et mi. Vestibulum nisl velit, ultricies at, tempor at, iaculis ac, massa. Nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a ligula. Proin ut mi. Suspendisse euismod vestibulum tortor. Vestibulum dictum odio quis velit. Quisque quis neque vel erat tempor volutpat. Praesent posuere fermentum felis. Donec interdum lectus et mi. Vestibulum nisl velit, ultricies at, tempor at, iaculis ac, massa. Nulla.' );
	}

	this.terminale = function()
	{
		apt.makeWindow( 'terminal', 'Terminal', 'gaetan@gaetan-laptop: ~$ _' );
	}
};

Et enfin la fonction bigWindow():

function bigWindow(element)
{
	element.style.height = screen.height + 'px';
	element.style.width = screen.width + 'px';
}

Si vous êtes perdu je suis prêt à répondre à vos questions

M.Gaetan89

25 février 2009 à 18:04:41

EuoCoin Mania (Collection de pièces en Euro)

Anonyme

25 février 2009 à 18:37:04

Salut,
En effet il faudrait plus de code car chez moi ça fonctionne, l'erreur ne peut venir que de element.

25 février 2009 à 18:54:09

25 février 2009 à 19:11:28

Où doit se trouver la fonction bigWindow en fait ?

Sinon j'ai remarqué quand dans ton code tu utilises une variable window, c'est déconseillé car window est déjà utilisé en js.

25 février 2009 à 19:21:30

Oops je vais renommer la variable window alors, merci

La fonction bigWindow() est dans le fichier function.js.

Merci de ton aide mcc

25 février 2009 à 19:43:23

Oui, le seul endroit où est appelé bigWindow est ici:
addEvent( actionBig, 'click', function() { bigWindow( window ); } );
et justement il y a la variable mal nommée window, donc le problème vient peut-être de là ;).

PS : je suis Maxime, de l'IUT

25 février 2009 à 20:39:19

Ah tu m'as devancé, j'allais te demander dans quel groupe tu es à l'IUT

Moi c'est Gaëtan (au cas où ^^).

Pour que ça soit plus simple de tout vérifier, j'ai tout mis en ligne, et c'est accessible ici. C'est tout pas beau, mais c'est juste pour des tests

La variable window a été renommé mais le résultat est toujours le même :s

25 février 2009 à 20:44:35

Ok je vais tout copier en local et tester tout ça

EDIT : Voilà alors je n'ai pas résolu le problème, mais je l'ai compris.
En fait ta fonction bigWindow fonctionne bien, pour t'en convaincre, ajoute ceci dans le bloc div.apt du css : border:solid; et lors de l'appui sur le +, la bordure noire va prendre toute la taille de l'écran.
Pour résoudre le problème, il faut modifier le css et aussi la fonction bigWindow je pense...

25 février 2009 à 21:31:05

Ah oui en effet

Je vais essayer de bidouiller une solution

Merci pour ton aide

Edit : c'est corrigé

Merci encore pour ton aide

Redimensionner un bloc

Redimensionner un bloc

Supprimer

Modérer

Signaler le message aux modérateurs