Discussion :

[francky74]

Bonjour,

Je ne sais trop comment faire ce qui suit :

je souhaite avoir à l'horizontale deux espaces qui serviront pour l'affichage, la saisie et qui devront écouter des boutons puisqu'il y aura des clics.

Je souhaite que ces deux espaces soient redimensionnables à l'horizontale, mais lorsque je diminue l'espace de droite, l'espace de gauche doit grandir et vice versa.

Je souhaite qu'ils aient aussi une dimension horizontale minimale afin que l'on ne puisse pas diminuer la taille jusqu'à zéro.

Je souhaite aussi que le curseur de la souris change de forme (un curseur de redimensionnement horizontal) lorsque l'on survole la zone verticale située entre les deux espaces.


Je me suis posé la question si je devais utiliser des <table> ou des <div>, j'ai aussi fait des recherches sur le net mais sans trouver ce que je veux. Il est aussi peut-être possible d'insérer une window dans un div ????

Perso, je n'ai rien trouvé sur le net sauf des trucs redimensionnables en solo, mais pas redimensionnables deux à deux.

Par exemple, j'ai trouvé ceci (http://www.w3schools.com/cssref/tryi...3_resize_width) mais c'est un div redimensionnable tout seul. ce ne sont pas deux div comme je voudrais, de plus, je voudrais qu'il soit redimensionnable en cliquant sur le côté et non sur le coin comme on voit dans cet exemple.

Donc, ma question : comment, avec quelle technologie ou quelles balises puis-je faire ces espaces redimensionnables ?

J'espère avoir été assez clair et je vous remercie d'avance pour votre aide !

[Invité]

Bonjour,

Un exemple (simple) : http://codepen.io/jreaux62/pen/OyZxYN

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="espace-redim">
  <div id="espace-gauche" class="ui-widget-content">
    ghjr rjgtyu hjkfghk ghkhjk fghjdgjqsd.
  </div>
  <div id="espace-droite">
    sdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg<br />
    sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg<br />
    dfgh dsdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfgsdfg sdgsdfgsdfg sgfsdfg sdgsdfg sdfg.
  </div>
</div>

Code css :

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

1
2
3
4
#espace-redim { display:table; width:100%; }
#espace-redim > div { display:table-cell; padding:15px; }
#espace-gauche { background:green; width:50%; /*largeur par défaut*/ }
#espace-droite { background:orange; }

Code javascript :

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

1
2
3
  $(function() {
    $( "#espace-gauche, #espace-droite" ).resizable();
  });

N.B. Ne pas oublier les scripts d'initialisation jQuery et jQuery UI.

Code :

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

1
2
3
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Voir : jQuery UI - Resizable

[francky74]

Bonjour et merci !

Waouh ! époustouflant !

Je m'imaginais déjà récupérer les tailles d'écran en javascript pour modifier la taille des fenêtres en javascript ....

est-ce que c'est le padding:15px; qui définit la taille minimale de l'espace de gauche ? j'aurais imaginé un min-width !?! mais cela me convient tout à fait

Merci beaucoup vraiment très intéressant !!!

[Invité]

Le padding est le padding !

C'est display:table qui fait que les div se comportent comme une <table>.