Discussion :

[exoyic74]

Bonjour, j'ai beau me creusé la tête je vois pas comment je peut inversé 2 élément par rapport a la résolution d'ecrant...

fichier javascript :

Code :

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

1
2
3
4
5
6
7
8
if ($(window).width() <= 900){
		<nav> le menu </nav>	
<header> Contenue </header>
	}
	else {
<header> Contenue </header>
<nav> le menu </nav>
	}

Fichier html :

Code html :

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

1
2
<header> Contenue </header>
<nav> le menu </nav>

Ou bien c'est ptete impossible ce que je cherche a faire

En vous remerciant d'avance

[Watilin]

Tu veux une solution JavaScript ? En utilisant appendChild ou insertBefore (toutes deux méthodes du DOM standard) si l'élément existe déjà, il va être déplacé. C'est surprenant quand on ne connaît pas cet « effet secondaire », mais on peut en tirer parti.

Comme jQuery utilise les méthodes du DOM sous le capot, il a lui aussi ce comportement. Connais-tu les méthodes .before() et .after() ?

Code :

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

1
2
3
if ($(window).width() <= 900){
   $("header").before($("nav"));
}

Sinon, j'ai une solution pur CSS avec une media query :

Code CSS :

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

1
2
3
4
5
6
7
8
9
/* positionnement naif mais c'est pour illustrer */
header, nav { position: absolute; }
header { top: 0;    }
nav    { bottom: 0; }
 
@media(max-width: 900px) {
   header { top: auto; bottom: 0;    }
   nav    { top: 0;    bottom: auto; }
}

L'avantage des media queries est qu'on n'a pas besoin de surveiller l'évènement resize pour modifier la page quand la taille de la fenêtre change.

[SylvainPV]

+1 pour la media query, ça semble le plus approprié ici

[exoyic74]

Watilin Je te remercie, je débute dans le javascript en tant que webdesigner, et sa ma bien aider , par contre je vais me contenter de la version javascript car le element on pas de hauteur fixe, si c'est en absolute sa passera par dessus l'autre.

[SylvainPV]

Comme dit dans le commentaire de Watilin, le positionnement en absolute est un simple exemple, tu dois pouvoir faire un truc plus propre à base de float ou de flexbox. L'idée était surtout d'utiliser les media queries, qui sont plus simples et efficaces qu'un reparse HTML en JavaScript branché sur un test de largeur d'écran dans un eventListener sur window.resize.