[jQuery] - UI Resizable

J'arrive pas à faire marcher...

Sujet résolu

24 avril 2009 à 23:49:43

Bonsoir,

J'essaye de mettre en place une fenêtre redimensionnable avec jQuery UI mais... Impossible de la redimensionner ! La fonction parait tellement bête.. mais ça veut pas !

Mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<script type="text/javascript">
		$(function() {
			$("#dialog").resizable();
		});
		</script>

	</head>
	<body>
		<div id="dialog" style="background-color: #000; width: 200px; height: 200px;"></div>
	</body>
</html>

Qu'est-ce qui cloche la dedans ??
Merci !

Anonyme

25 avril 2009 à 0:32:50

Salut, je ne suis pas sur, mais à mon avis il ne faut pas mettre de # dans $("#dialog").resizable();

Golmote

25 avril 2009 à 0:33:17

Je pense que c'est parce que tu fais appel à la fonction avant que l'élément de soit chargé.

Y'a un truc domReady avec jQuery, non ? Il faut que tu ne lances la fonction qu'une fois le chargement de la page terminé.

Anonyme

25 avril 2009 à 0:36:42

il me semble que la facon dont il l'a écrite est un raccourci made in jquery pour dire domReady
ensuite le # doit bien être là.

Une petite question : la taille initiale ne devrait pas être passé en paramètre de resizeable au lieu d'être en dur dans style="" ?

cerium50

25 avril 2009 à 10:26:51

En effet $(function() {}); est un raccourci pour document.ready

Petite question dans js/jquery-ui.js as-tu bien tout les fichiers nécessaires ? I.e. UI Core + Resizable ?

@Nod_ : d'après la doc resizable() n'a pas nécessairement de paramètres

Edit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
		<script type="text/javascript">
		$(function() {
			$("#dialog").resizable();
		});
		</script>

	</head>
	<body>
		<div id="dialog" style="background-color: #000; width: 200px; height: 200px;"></div>
	</body>
</html>

Ça fonctionne j'ai juste ajouté le style CSS...

alexmngn

25 avril 2009 à 17:50:44

Bizarre quand même que cela viennent du style css..
Merci

Anonyme

25 avril 2009 à 18:07:29

Pas spécialement. Il y a surement un style appliqué lors du redimensionnement qui apparait pas comme ça d'habitude et qui sert à mettre les trucs qui vont bien pour le redimensionnement. Genre position:absolute et compagnie.

alexmngn

25 avril 2009 à 18:15:26

J'ai extrait le style qui fait que ça marche :

.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}