Faire une zone redimensionnable
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:
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:
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:
1
2
3
4
5
| $(function() {
$( "div.content_data_wrap" ).resizable({
handles: 'n, s',
});
}); |
Code:
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
