Agrandir et réduire

Version imprimable

Agrandir et réduire

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:

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

ceci peut être.

Code:

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>

10/04/2020, 08h50
ProgElecT

Salut
@Philcmoi
Ligne 31, un espace de trop
<script > :nono:
<script> :ccool:
10/04/2020, 09h57
toulousain3117

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

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:

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:

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>

10/04/2020, 12h10
NoSmoking

Bonjour,

Citation:

Envoyé par ProgElecT

Ligne 31, un espace de trop
<script > :nono:

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:

< script>

Correct même si inutile et farfelu :

Code:

<script >