Combinaison de .resize() et matchMedia() dans une condition ?
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:
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:
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.
