Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />
mais pour un javascript ?
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>
dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
Si tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
https://www.alsacreations.com/xmedia/tuto/html5/matchmedia/jsloading.html
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
Si tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
https://www.alsacreations.com/xmedia/tuto/html5/matchmedia/jsloading.html
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
Ça donnerait un truc du genre:
if(window.matchMedia("(min-width:800px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
Si tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
https://www.alsacreations.com/xmedia/tuto/html5/matchmedia/jsloading.html
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
Ça donnerait un truc du genre:
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
Le 24/01/2018 à 21:52, 6ril a écrit :
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - AlsacreationsSi tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
HTML5 : Démonstration de matchMedia
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';Ça donnerait un truc du genre:
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
En fait dans cet exemple, c'est si tu n'as pas jquery déjà chargé. Dans ton exemple jquery c'est la variable script1 à laquelle tu as oublié de mettre la propriété src. Et dan ston exemple c'ets sur l'évènement onload de script1 que tu insères dynamiquement modernizr. comme tu as omis le src, script1 n'est jamais chargé et donc modernizr jamais chargé.
Si jquery est déjà chargé, tu n'as pas besoin de script1 et le code deviendrait simplement (j'ai pas testé, mais ça devrait être ça):
if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
Le 24/01/2018 à 21:52, 6ril a écrit :
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - AlsacreationsSi tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
HTML5 : Démonstration de matchMedia
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';Ça donnerait un truc du genre:
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
En fait dans cet exemple, c'est si tu n'as pas jquery déjà chargé. Dans ton exemple jquery c'est la variable script1 à laquelle tu as oublié de mettre la propriété src. Et dans ton exemple c'est sur l'évènement onload de script1 que tu insères dynamiquement modernizr. Comme tu as omis le src, script1 n'est jamais chargé et donc modernizr jamais chargé non plus.
Si jquery est déjà chargé, tu n'as pas besoin de script1 et le code deviendrait simplement (j'ai pas testé, mais ça devrait être ça):
if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
Le 24/01/2018 à 22:06, 6ril a écrit :
Le 24/01/2018 à 21:52, 6ril a écrit :
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - AlsacreationsSi tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
HTML5 : Démonstration de matchMedia
il te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';Ça donnerait un truc du genre:
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}En fait dans cet exemple, c'est si tu n'as pas jquery déjà chargé. Dans ton exemple jquery c'est la variable script1 à laquelle tu as oublié de mettre la propriété src. Et dans ton exemple c'est sur l'évènement onload de script1 que tu insères dynamiquement modernizr. Comme tu as omis le src, script1 n'est jamais chargé et donc modernizr jamais chargé non plus.
Si jquery est déjà chargé, tu n'as pas besoin de script1 et le code deviendrait simplement (j'ai pas testé, mais ça devrait être ça):if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
Grr, j'ai bêtement copié collé ton code pour la balise #CHEMIN, mais tu avais oublié là aussi l'accolade fermante. Ca devrait être :
$.getScript('#CHEMIN{scripts/modernizr.min.js}');
et non pas:
$.getScript('#CHEMIN{scripts/modernizr.min.js');
donc tu peux essayer:
if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js}');
}
ça m’a l’air d’être bon ça !! Merci.
Le 24/01/2018 à 22:14, 6ril a écrit :
Le 24/01/2018 à 22:06, 6ril a écrit :
Le 24/01/2018 à 21:52, 6ril a écrit :
Le 24/01/2018 à 20:04, Jean-Christophe Villeneuve a écrit :
Oui, j'en était arrivé là de mes recherches, j'ai donc tenté un
<script>
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.onload = function() {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}
</script>dans le head mais le script modernizr.min.js ne se charge jamais
Bon faut dire que le js et le php sont assez opaques pour moi :-\
Le 24/01/2018 à 19:45, 6ril a écrit :
Le 24/01/2018 à 17:14, Jean-Christophe Villeneuve a écrit :
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css" media="screen and \(max\-width: 640px\)" />mais pour un javascript ?
Bonjour,
matchMedia:
La méthode matchMedia ou les Media Queries pour JavaScript - AlsacreationsSi tu ne maitrises pas le js, ce que tu veux faire va t'être très compliqué à réaliser:
HTML5 : Démonstration de matchMediail te manque dans ton code le chargement de jquery:
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';Ça donnerait un truc du genre:
if(window.matchMedia("(max-width:640px)").matches) {
// Chargement de jQuery dans un nouvel élément <script> ajouté à la section <head>
var script1 = document.createElement('script');
script1.type='text/javascript';
script1.src = '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js';
script1.onload = function() {
// Lorsque jQuery est chargé...
// On fait la même chose : chargement dynamique // mais cette fois-ci avec jQuery (c'est plus simple)
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}
// Insertion dans le DOM de la balise script initiale
document.getElementsByTagName('head')[0].appendChild(script1);
}En fait dans cet exemple, c'est si tu n'as pas jquery déjà chargé. Dans ton exemple jquery c'est la variable script1 à laquelle tu as oublié de mettre la propriété src. Et dans ton exemple c'est sur l'évènement onload de script1 que tu insères dynamiquement modernizr. Comme tu as omis le src, script1 n'est jamais chargé et donc modernizr jamais chargé non plus.
Si jquery est déjà chargé, tu n'as pas besoin de script1 et le code deviendrait simplement (j'ai pas testé, mais ça devrait être ça):if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js');
}Grr, j'ai bêtement copié collé ton code pour la balise #CHEMIN, mais tu avais oublié là aussi l'accolade fermante. Ca devrait être :
$.getScript('#CHEMIN{scripts/modernizr.min.js}');
et non pas:
$.getScript('#CHEMIN{scripts/modernizr.min.js');donc tu peux essayer:
if(window.matchMedia("(max-width:640px)").matches) {
$.getScript('#CHEMIN{scripts/modernizr.min.js}');
}
oui j'avais vu et corrigé
Un grand merci !
Coucou Jean-Cristophe,
Il y a ceci sur le forum alsace-creation : Ajuster un contenu en fonction de
la taille de l'écran
https://forum.alsacreations.com/topic-5-47305-1-Ajuster-un-contenu-en-foncti
on-de-la-taille-de-lecran.html
J'espère que j'ai pu faire avancer ta solution.
À bientôt,
Fanch,
-----Message d'origine-----
De : Jean-Christophe Villeneuve [mailto:jcvilleneuve@cegetel.net]
Envoyé : mercredi 24 janvier 2018 17:14
À : liste SPIP users <spip@rezo.net>
Objet : [Spip] javascript que sur mobile
Hello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile\.css" rel="stylesheet" type="text/css"
media="screen and (max-width: 640px)" />
mais pour un javascript ?
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.net
Archives : https://www.mail-archive.com/spip@rezo.net/maillist.html
Infos : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
Merci pour ce lien mais j'ai trouvé une solution.
JC
Le 25/01/2018 à 10:56, francois L deplaine a écrit :
Coucou Jean-Cristophe,
Il y a ceci sur le forum alsace-creation : Ajuster un contenu en fonction de
la taille de l'écran
https://forum.alsacreations.com/topic-5-47305-1-Ajuster-un-contenu-en-foncti
on-de-la-taille-de-lecran.htmlJ'espère que j'ai pu faire avancer ta solution.
À bientôt,
Fanch,
-----Message d'origine-----
De : Jean-Christophe Villeneuve [mailto:jcvilleneuve@cegetel.net]
Envoyé : mercredi 24 janvier 2018 17:14
À : liste SPIP users <spip@rezo.net>
Objet : [Spip] javascript que sur mobileHello
Y a-t-il un moyen pour n'activer un javascript que sur les petits écrans.
Pour une feuille CSS, c'est simple
<link href="mobile.css" rel="stylesheet" type="text/css"
media="screen and (max-width: 640px)" />mais pour un javascript ?
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.netArchives : https://www.mail-archive.com/spip@rezo.net/maillist.html
Infos : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc
_______________________________________________
liste spip
spip@rezo.net - désabonnement : envoyer un mail à spip-off@rezo.netArchives : https://www.mail-archive.com/spip@rezo.net/maillist.html
Infos : http://listes.rezo.net/mailman/listinfo/spip
Documentation de SPIP : http://www.spip.net/
Irc : de l'aide à toute heure : http://spip.net/irc