Onclick changer la largeur/position du DIV1 et DIV2

**elkhazak** · 23/10/2018, 18h13

Bonjour à tous,

Je voudrais savoir s'il serait possible en cliquant sur un bouton de contrôler la largeur d'un DIV1 et en même temps changer la position du DIV1 et DIV2 pour que je puisse avoir le résultat comme l'image ci-dessous :

Nom : rr.PNG
Affichages : 94
Taille : 10,5 Ko

Nom : rr.PNG
Affichages : 94
Taille : 10,5 Ko

Merci d'avance.

**Toufik83** · 23/10/2018, 19h20

tu cherches a avoir une vue adaptative sur un écran large (pc), moyen (tablette), petit (téléphone)? ou bien tu veux juste contrôler les div?

**elkhazak** · 23/10/2018, 19h32

Non juste de contrôler l'affichage des divs en cliquant sur le bouton.

**Toufik83** · 23/10/2018, 19h50

Code css :

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
 
body {
  padding: 1em
}
 
.div,
.div1 {
  display: inline-block
}
 
.div {
  background-color: yellow;
  width: 49%
}
 
.div1 {
  background-color: green;
  width: 49%;
  height: 40px
}
 
.div.large,
.div1.large {
  display: block;
  width: 100%
}
 
.div.moyen,
.div1.moyen {
  display: inline-block;
  width: 49%;
}

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
 
<div class="div moyen">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </table>
  <button>
Cliquez moi
</button>
</div>
<div class="div1 moyen">
 
</div>

Code :

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

1
2
3
4
5
6
7
8
9
 
$('button').click(function() {
  if ($('.div').hasClass('moyen')) {
    $('.div,.div1').removeClass('moyen').addClass('large');
  } else {
    $('.div,.div1').removeClass('large').addClass('moyen');
  }
 
});

**elkhazak** · 23/10/2018, 20h09

Toufik stp peux tu me guider comment intégrer la biblio jquery dans le fichier et quelle version !

**Toufik83** · 23/10/2018, 20h20

entre dans ce site puis sous jQuery 3x, clique sur "uncompressed", une fenêtre popup s'affiche.
copie la balise script telle qu'elle est, et colle là dans la balise <head></head> de ta page, ta page doit être comme ça :

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
<!doctype html>
<html>
<head><title>Titre de la page</title>
<style>
body {
  padding: 1em
}
 
.div,
.div1 {
  display: inline-block
}
 
.div {
  background-color: yellow;
  width: 49%
}
 
.div1 {
  background-color: green;
  width: 49%;
  height: 40px
}
 
.div.large,
.div1.large {
  display: block;
  width: 100%
}
 
.div.moyen,
.div1.moyen {
  display: inline-block;
  width: 49%;
}
</style>
<!-- chargement de jquery !-->
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>
<script>
 
$('button').click(function() {
  if ($('.div').hasClass('moyen')) {
    $('.div,.div1').removeClass('moyen').addClass('large');
  } else {
    $('.div,.div1').removeClass('large').addClass('moyen');
  }
 
});
</script>
</head>
<body>
<div class="div moyen">
  <table>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
  </table>
  <button>
    Cliquez moi
  </button>
</div>
<div class="div1 moyen">
 
</div>
</body>
</html>

**elkhazak** · 24/10/2018, 00h43

Merci beaucoup pour l'explication.

ça marche pour une fraction de seconde avant que la page s'actualise est-ce que c'est normal ?

Une question stp; est-ce qu'on peut réaliser cela avec du js + css !?

+ comment puisse-je faire pour cacher une partie de la table car l’intérêt de ce que cherche c'est d'afficher moins d'infos sur le DIV1 (par ex 4 colonnes de la table) et puis quand je clique j'élargie le DIV1 pour afficher toute la table (toutes les colonnes) et je fais descendre/élargir le DIV2.

**Toufik83** · 24/10/2018, 01h13

ah oui, désolé j'ai oublié de mettre le code dans $(document).ready().

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(document).ready(function(){
  $('button').click(function() {
    if ($('.div').hasClass('moyen')) {
      $('.div,.div1').removeClass('moyen').addClass('large');
    } else {
      $('.div,.div1').removeClass('large').addClass('moyen');
    }
 
  });
});

pour la partie de la .div que tu veux cacher, il y a les propriétés overflow:hidden et text-overflow:hidden que tu peux utiliser.

**elkhazak** · 24/10/2018, 01h35

Parfait pour l'affichage mais ça persiste pour le rafraîchissement de la page.

**Toufik83** · 24/10/2018, 01h45

rafraîchissement? pourquoi la page se rafraîchit? t'utilises un bouton de type submit? et puis même si la page se recharge, jQuery devrai donner le résultat souhaité, vu qu'on a mis le code dans $(document).ready() (quand le document est prêt).

Invité · 24/10/2018, 09h22

Bonjour,

1- DVP n'est pas un self-service.
Et même si Toufik83 te fait tout le travail, ça ne veut pas dire que tu l'appliques correctement.

Si tu veux des réponses précises : MONTRE ton code !

2-

Envoyé par elkhazak

+ comment puisse-je faire pour cacher une partie de la table.......
.....puis quand je clique j'élargie le DIV1 pour afficher toute la table (toutes les colonnes) ....

Tu ne pouvais pas le dire dès le début ?
Et ça, c'est un AUTRE problème.
Quand tu auras résolu le 1er, tu pourras te consacrer au suivant.

**elkhazak** · 24/10/2018, 09h37

Envoyé par Toufik83

rafraîchissement? pourquoi la page se rafraîchit? t'utilises un bouton de type submit? et puis même si la page se recharge, jQuery devrai donner le résultat souhaité, vu qu'on a mis le code dans $(document).ready() (quand le document est prêt).

Ouii je comprends pas pourquoi ! j'ai mis ton code comme il est donc je n'ai rien rajouté.

Invité · 24/10/2018, 10h01

Envoyé par elkhazak

... j'ai mis ton code comme il est donc je n'ai rien rajouté.

OK.

@Toufik83

Code html :

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

1
2
3
  <button>
    Cliquez moi
  </button>

Si on n'indique rien, le <button> * sera par défaut de type="submit".
* (cliquer sur le lien)

type
Le type du bouton. Le type par défaut si cet attribut énuméré n'est pas spécifié est submit.

Ici, on ne veut pas "soumettre" un formulaire.
Il faut donc écrire :

Code html :

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

  <button type="button">Cliquez moi</button>

@elkhazak

MONTRER TON CODE aurait évité que je me tape TOUTE la discussion pour retrouver la ligne de code de Toufik83.
MERCI d'y penser la prochaine fois.

**elkhazak** · 24/10/2018, 11h56

Merci beacoup @Toufik83 et @jreaux62.

**Toufik83** · 24/10/2018, 13h56

Envoyé par jreaux62

@Toufik83

Code html :

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

1
2
3
  <button>
    Cliquez moi
  </button>

Si on n'indique rien, le <button> * sera par défaut de type="submit".

ah bon @jreaux62? je viens de testé ça, la page ne se recharge jamais.
peut être que sous les versions récentes de windows (10,11..)? par ce-que moi je suis sous windows 7.

Invité · 24/10/2018, 14h18

Si tu as cliqué sur le lien que j'ai donné, tu as certainement lu la doc.

Mais comment savoir si elkhazak a mis des balises <form> dans son code, puisqu'il ne le montre pas... ?

**Toufik83** · 24/10/2018, 14h27

oui @jreaux62, j'ai lu la doc, Merci.
eh ben voilà...a chaque fois j'apprends quelque chose de nouveau en aidant les autres.

Onclick changer la largeur/position du DIV1 et DIV2

jQuery

Discussions similaires

Partager

Partager