Bonjour,

Cherchant à effectuer un resize d'une div verticalement, je souhaiterai utiliser un genre de splitter juste en dessous de la div,
la partie resize fonctionne bien mais pas le splitter...

Je me suis aidé de cet exemple : https://codepen.io/rstrahl/pen/eJZQej

Auriez-vous une idée du problème, voici grosso modo le code que j'utilise:

Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <!-- JQuery UI -->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <style>
        .resizable
        {
            width: 600px;
            background-color: gray;
            min-Height:100;
        }
       .splitter-horizontal {
          flex: 0 0 auto;
          height: 18px;
          background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat gray;
         border: 1px solid #ccc;
         cursor: row-resize;
      }
    </style>
 
    <script type="text/javascript">
       $(document).ready(function() {
       $(".resizable").resizable({
            handles: 's, w',
            handleSelector: ".splitter-horizontal"
       });
      });
    </script>
 
</head>
<body>
 
<div class="resizable">
    texte ... 
</div>
<div class="splitter-horizontal">&nbsp;</div>
 
</body>
</html>

Merci d'avance pour votre aide, je précise que je débute avec jquery iu merci pour votre patience...