Agrandir et réduire

**toulousain3117** · 09/04/2020, 18h26

Bonjour à tous

j'ai une div draguable que je peux déplacer sur toutes la page, et je souhaite y ajouter la possibilité de Agrandir et réduire la div, un peu comme un message facebook,

j'ai fait quelques recherches avant de vous écrire, mais je ne trouve rien en jquery tous est en vieux js

si quelqu'un à une piste je suis preneur

voilà le contenu de ma div actuelle

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
<div id="draggable" class="ui-widget-content">
 
 
<div class="about-right mb-90">
                                <div class="about-img">
                                   <img src="" id="profile-img-tag" width="200px" />    </div>
                                <div class="section-tittle mb-30 pt-30">
                                    <h3><div id="preview-titre" class="preview-titre"> </div></h3>
                                </div>
                                <div class="about-prea">
                                   <div id="preview-article" class="preview-article"> </div>    </div> 
 
 
                            </div>
</div>

cordialement

**Philcmoi** · 10/04/2020, 03h28

ceci peut être.

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
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Datepicker - Localize calendar</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<link rel="stylesheet" href="/resources/demos/style.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="drag" class="ui-widget-content" >
 
 
<div class="about-right mb-90">
                                <div class="about-img">
                                   <img src="" id="profile-img-tag" width="200px" />    </div>
                                <div class="section-tittle mb-30 pt-30">
                                    <h3><div id="preview-titre" class="preview-titre"> </div></h3>
                                </div>
                                <div class="about-prea">
                                   <div id="preview-article" class="preview-article"> </div>    </div> 
 
 
                            </div>
</div>
<script >
$('#drag').draggable();
$('#drag').resizable();
</script>
 
</body>
</html>

**ProgElecT** · 10/04/2020, 08h50

Salut
@Philcmoi
Ligne 31, un espace de trop
<script >

**toulousain3117** · 10/04/2020, 09h57

merci de la réponse, malheureusement ce n'est pas ce que je recherche,

je cherche vraiment a créer les boutons agrandir et réduire, un peu comme un menu accordions

**toulousain3117** · 10/04/2020, 10h12

finalement j'ai reussi une fois reposé a créer ce que je recherche, j'ai donc créer une fenetre qui peut etre déplacer dans toutes la page et avec les boutons reduire et agrandir, bien sur le code que je donne qui peut aider est brut, il y a pas encore les css de créer. bonne journée à tous

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$( "#draggable" ).draggable(); 
		 $('.agrandir').on('click', function() {
  $( "#accord" ).slideDown( "slow", function() {
    alert("agrandir");
  });
  });
 
  $('.reduire').on('click', function() {
  $( "#accord" ).slideUp( "slow", function() {
    alert("reduire");
  });
  });

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
<div id="draggable" class="ui-widget-content">
<div class="reduire">reduire</div>
  <div class="agrandir">agrandir</div>
 
<div class="about-right mb-90 " id="accord">
                                <div class="about-img">
                                   <img src="" id="profile-img-tag" width="200px" />    </div>
                                <div class="section-tittle mb-30 pt-30">
                                    <h3><div id="preview-titre" class="preview-titre"> </div></h3>
                                </div>
                                <div class="about-prea">
                                   <div id="preview-article" class="preview-article"> </div>    </div> 
 
 
                            </div>
 
 
 
</div>

**NoSmoking** · 10/04/2020, 12h10

Bonjour,

Envoyé par ProgElecT

Ligne 31, un espace de trop
<script >

ce qui n'est pas valide et qui ne sera donc pas pris en compte c'est un espace entre < et script, après script tu peux mettre autant d'espace que tu veux.

Incorrect :

Code html :

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