Faire une zone redimensionnable

**mister3957** · 04/09/2014, 12h09

Bonjour à tous,

J'aimerais avoir une zone scotchée en bas de la page, qui prenne la totalité de la largeur et qui puisse être redimensionnée avec la souris. Mais je ne sais pas bien comment "cumuler" l'aspect redimensionnable et celui de garder la zone en bas de la page.

Voici ce que j'ai fait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Resizable - Default functionality</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
	<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
	<style>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#content_data {
	position:absolute;
	width:100%;
	height:265px;
	bottom:0;
	left:0;
	background-color:#0000FF;
}	
.content_data_wrap {
	position:relative;
	width:100%;
	height:265px;
	background-color:#FF0000;
}

[code=html] </style>
<script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(function() {
	$( "div.content_data_wrap" ).resizable({
		handles: 'n, s',
	});
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
	</script>
</head>
<body>
	<div id="content_data">
		<div class="content_data_wrap">
 
		</div>
	</div>
</body>
</html>

La page est hébergée ici : http://kinju59.free.fr/test_resize.html.

Le problème est que la zone rouge est bien redimensionnée, mais pas la bleue. Du coup les événements de la souris, lorsque l'on abaissera le panneau rouge, seront captés par la zone bleue et non pas par les éléments qu'il pourraient y avoir derrière, enfin je ne sais pas si je me fais bien comprendre.

Est-ce que quelqu'un pourrait m'indiquer comment faire ça proprement ?

Merci à vous,

A bientôt

**ABCIWEB** · 04/09/2014, 22h58

Envoyé par mister3957

Le problème est que la zone rouge est bien redimensionnée, mais pas la bleue.

Il y a ce lien pour synchroniser différents éléments.

**mister3957** · 05/09/2014, 10h23

Envoyé par ABCIWEB

Il y a ce lien pour synchroniser différents éléments.

Avec alsoResize, la zone bleue se redimensionne aussi mais avec un décalage.

J'ai mis à jour la page pour constater ce que ça fait : http://kinju59.free.fr/test_resize.html

Ne serait-ce pas un problème de CSS ?

**ABCIWEB** · 05/09/2014, 14h15

Le pb est que je ne comprends pas trop ce que tu veux faire... tu n'as pas un exemple fonctionnel à nous montrer sur un autre site pour qu'on puisse comprendre ?

**mister3957** · 05/09/2014, 16h27

Envoyé par ABCIWEB

Le pb est que je ne comprends pas trop ce que tu veux faire... tu n'as pas un exemple fonctionnel à nous montrer sur un autre site pour qu'on puisse comprendre ?

En fait l'application web possédera une cartographie en fond, et dans la zone inférieure il y aura une zone avec un tableau, zone qui doit pouvoir être redimensionnée pour pouvoir avoir un max de visibilité sur la cartographie ou sur les données du tableau.

Je ne connais pas d'exemple fonctionnel qui reproduit ça, sinon j'aurai "copié". Mais si vous en connaissez je veux bien une adresse et je me calerai dessus.

**danielhagnoul** · 06/09/2014, 03h23

Bonsoir

En fait l'application web possédera une cartographie en fond, et dans la zone inférieure il y aura une zone avec un tableau, zone qui doit pouvoir être redimensionnée pour pouvoir avoir un max de visibilité sur la cartographie ou sur les données du tableau.

Si je comprends bien, vous n'avez besoin que d'une zone redimensionnable accrochée en bas de page. La cartographie étant placée normalement dans la structure de la page.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#resizable { position:fixed; bottom:0; left:0; width: 100%; height: 250px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #00F; }

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$( function(){
 
    $( "#resizable" ).resizable({
        "handles" : "n",
        "helper" : "ui-resizable-helper",
        "animate" : true
    });
 
});

**mister3957** · 06/09/2014, 10h34

Envoyé par danielhagnoul

Bonsoir

Si je comprends bien, vous n'avez besoin que d'une zone redimensionnable accrochée en bas de page. La cartographie étant placée normalement dans la structure de la page.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#resizable { position:fixed; bottom:0; left:0; width: 100%; height: 250px; padding: 0.5em; }
#resizable h3 { text-align: center; margin: 0; }
.ui-resizable-helper { border: 1px dotted #00F; }

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="resizable" class="ui-widget-content">
    <h3 class="ui-widget-header">Resizable</h3>
</div>

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$( function(){
 
    $( "#resizable" ).resizable({
        "handles" : "n",
        "helper" : "ui-resizable-helper",
        "animate" : true
    });
 
});

Merci, ça fonctionne.

C'est l'utilisation du helper qui fait que je n'ai plus besoin de 2 <div>.

J'ai également rajouté :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
body {
    overflow:hidden;
}

Faire une zone redimensionnable

jQuery

Discussions similaires

Partager

Partager