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

<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>
	<div class="bloc8">Bloc 8</div>
	<div class="bloc9">Bloc 9</div>
	<div class="bloc10">Bloc 10</div>
	<div class="bloc11">Bloc 11</div>
	<div class="bloc12">Bloc 12</div>
</aside>

J'aimerais pouvoir déplacer des blocs de l'Aside vers la div .content lorsque je suis sur smartphone ET lorsque je resize 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 (dans le même script). Et j'aimerais le faire sans que ce soit redondant, donc sans devoir faire deux scripts séparés, l'un pour le resize et l'autre pour le matchmedia. Sans quoi, j'ai peur de voir arriver des bugs de scripts qui se lancent en cascade.

En gros, je ne parviens pas à inclure .resize() dans ma condition. Est-ce seulement possible ?

Voici le code jQuery tel qu'il est actuellement, peut être brouillon mais j'ai essayé tellement de possibilités que je n'en sais plus moi-même où j'en suis 

$(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");

});

L'un de vous aurait-il la bonté d'âme de m'aider à résoudre mon problème, s'il vous plait ? J'ai fait maintes recherches sur Google, mais je ne trouve pas de cas identique (où alors c'est que je ne sais pas comment le dire à ce cher ami Google...)

Mille mercis d'avance

-
Edité par Jenny-dev 19 octobre 2018 à 10:18:45

Bonjour,

Personne pour m'aider ? De mon côté je n'ai toujours pas trouvé la solution 

Merci d'avance

Le sujet est résolu. 

Pour infos, le code correct est donc :

$(document).ready(function() {
  $(window).resize(function() { // 
    var widthWindow = $(window).width();
    if (window.matchMedia("(max-width: 680px)").matches || widthWindow <= 680) {
      $('.bloc2').after($('.bloc7'));
      console.log("format smartphone");
 
    } else {
      $('.bloc6').after($('.bloc7'));
      console.log('format pc');
    }
  });
 
});