Discussion :

[Jenny-dev]

Bonsoir,

Cela fait un long moment que je n'ai pas pratiqué jQuery et maintenant que je m'y remets doucement, j'ai un gros souci qui me paraissait très simple à l'époque. Je vous explique.

J'ai une page en html avec plusieurs blocs, divisés entre un div.content et un aside.

J'aimerais pouvoir déplacer des blocs de l'aside vers la div .content lorsque je suis sur smartphone ET lorsque je rétrécis la fenêtre de mon navigateur sur pc. Hors, jusqu'à présent, je n'arrive à faire que l'un ou l'autre mais pas les deux en même temps et j'aimerais le faire sans devoir passer par deux scripts séparés.

Voici le

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="content">
    <div class="bloc1">Bloc 1</div>
    <div class="bloc2">Bloc 2</div>
    <div class="bloc3">Bloc 3</div>
    <div class="bloc4">Bloc 4</div>
</div>
<aside>
    <div class="bloc5">Bloc 5</div>
    <div class="bloc6">Bloc 6</div>
    <div class="bloc7">Bloc 7</div>
</aside>

Et voici le code jquery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    // $(window).resize(function(){
    var widthWindow = $(window).resize().width();
    if(window.matchMedia("(max-width: 680px)").matches  || widthWindow <= 680){
        $('.bloc2').after($('.bloc7'));
 
    }else{
        $('.bloc6').after($('.bloc7'));
    };
    // });
$(window).trigger("resize");
 
});

Lorsque j'utilise la fonction .resize() seule, ça fonctionne au resize de la page mais pas sur smartphone. Et lorsque j'utilise la fonction .matchMedia seule, cela fonctionne sur smartphone mais pas au resize de la page.
Sachant que j'aimerais que les blocs reprennent leur place sur pc, j'ai besoin d'une condition. Mais je ne parviens pas à combiner le tout.

Est-ce que l'un de vous pourrait m'aider s'il vous plait ?

Merci d'avance.

[Toufik83]

tu n'as pas vérifié la console d'erreurs, sinon t'aurais vu qu'il y a un problème avec cette ligne :

Code :

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

$(window).resize().width();

si tu met ce code, ça donne quoi?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$(document).ready(function() {
  $(window).resize(function() { // 
    var widthWindow = $(window).width();
    if (window.matchMedia("(max-width: 680px)").matches || widthWindow <= 680) {
      $('.bloc2').after($('.bloc7'));
 
    } else {
      $('.bloc6').after($('.bloc7'));
    }
  });
 
});

[Jenny-dev]

Bonsoir

Merci beaucoup pour ta réponse !
Il faut savoir qu'avant d'arriver à ce code, j'ai fait plusieurs essais. En dernier recours, j'ai tenté le tout pour le tout je vais dire et Chrome il ne m'affichait pas d'erreur...

J'ai testé la solution que tu m'as proposé. Et ça ne fonctionne qu'au resize de la page sur pc, mais lorsque j'ouvre la devtools pour passer en mode responsive, cela ne fonctionne pas.

Curieusement, j'ai essayé sur Firefox, et ta solution y fonctionne parfaitement (en mode vue adaptative ET au resize).

J'en viens à me demander si ce n'est pas simplement mon chrome qui est mal configuré, ce qui est curieux car je n'ai rien changé aux paramètres et qu'à l'époque je n'ai pas dut faire de paramétrages spéciaux.

Idéalement, il faudrait que je teste en réel (sur un smartphone donc), mais je n'en aurait pas la possibilité avant lundi.

Merci d'y avoir accordé du temps en tout les cas

[Toufik83]

bonjour,
je viens de tester le code sous chrome Version 69.0.3497.100 (Build officiel) (32 bits) en utilisant l'outil responsive en ligne, et ça fonctionne correctement sur les 3 vues (pc, tablette et phone).
si le problème pérsiste, essaie de réinstaller ton chrome.

[Jenny-dev]

Bonsoir,

J'ai la version 70.0.3538.67 (Build officiel) (64 bits), que j'ai desinstallée et réinstallée, mais rien à faire

J'aurais accès à un serveur en ligne demain, je testerai pour voir ce que ça donne sur un vrai smartphone (car après tout, c'est le but final) et j'éditerai ici pour dire si c'est résolu ou pas. Si ça fonctionne, c'est que c'est bien mon chrome qui déconne et donc ce sujet n'a plus de raison d'être.

Merci beaucoup pour ton aide


Edit :

Autant pour moi ! En fait, comme une imbécile vu que je travaille sur un fichier test en local (le genre où on ne s'attarde pas sur les détails) je n'ai pas pensé à mettre le meta viewport du coup, le responsive de Chrome ne fonctionnait pas correctement. Depuis que je l'ai rajouté ça fonctionne parfaitement.
C'est donc résolu. Désolée de t'avoir fait perdre du temps

[Toufik83]

ha! j'avais pensé au meta viewport, mais je me suis dis NON...c'est pas ça.
si le sujet est résolu, appuie sur le bouton en bas de la page.
Merci