matchMedia et changement contenu texte fichier html

**Ariranha** · 11/01/2013, 12h42

Bonjour à tous,

Je n'arrive pas à utiliser matchMedia dans le corps du html pour proposer des contenus texte différents selon s'il s'agit d'une consulation smartphone, tablette ou web.

Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<body>
	<script>
		if (window.matchMedia("(min-width: 600px)").matches) {
		  <div>
			<h1>Contenu minWidth 600</h1>
			<p>cool content</p>
		  </div>
		} else {
		  <div>
			<h1>Contenu X</h1>
			<p>oldStyle content</p>
		  </div>
		}
	</script>
</body>

Y a-t-il une façon particulière de formater le contenu html dans une balise script ?

Merci par avance !
Bonne journée.

**SpaceFrog** · 11/01/2013, 13h06

js != php

tu ne peux pas balancer comme ça du code html en plein milieu de ton script !!!!

il faut mettre le contenu en innerHTML dans une balise présente sur la page.

**Ariranha** · 11/01/2013, 13h49

Merci, je vais chercher du côté de innerHTML.

**Ariranha** · 13/01/2013, 13h41

Finalement, je n'ai pas utilisé innerHTML ne pouvant pas prendre en compte des balises html "complexes".

Ci-dessous, la solution que j'ai utilisé :

Code :

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

1
2
3
4
5
6
7
8
9
10
<script>
$mainContent = $("body");
var loadFrom;
if (window.matchMedia("(max-device-width: 480px)").matches){
loadFrom = "texteSmart.html";
} else {
loadFrom = "texteWeb.html";
}
$mainContent.load(loadFrom);
</script>

Bon weekend.

matchMedia et changement contenu texte fichier html

JavaScript

Discussions similaires

Partager

Partager