Onclick changer la largeur/position du DIV1 et DIV2

Version imprimable

23/10/2018, 18h13
elkhazak

1 pièce(s) jointe(s)

Onclick changer la largeur/position du DIV1 et DIV2

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 :

Pièce jointe 421618

Merci d'avance.
23/10/2018, 19h20
Toufik83

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?
23/10/2018, 19h32
elkhazak

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

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
 
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:

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:

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');
  }
 
});

23/10/2018, 20h09
elkhazak

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

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:

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>

24/10/2018, 00h43
elkhazak

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.

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

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.

24/10/2018, 01h35
elkhazak

Parfait pour l'affichage mais ça persiste pour le rafraîchissement de la page.
24/10/2018, 01h45
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).
24/10/2018, 09h22
Invité

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-

Citation:

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.
24/10/2018, 09h37
elkhazak

Citation:

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é.
24/10/2018, 10h01
Invité
Citation:

Envoyé par elkhazak

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

OK.

@Toufik83
Code:

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)

Citation:

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:

<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.
24/10/2018, 11h56
elkhazak

Merci beacoup @Toufik83 et @jreaux62.
24/10/2018, 13h56
Toufik83
Citation:
Envoyé par jreaux62

@Toufik83

Code:

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.
24/10/2018, 14h18
Invité

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... ?
24/10/2018, 14h27
Toufik83

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