Bonjour à tous,
Dans un formulaire j'utilise un script Datepicker pour sélectionner les dates.
Je suis en train de modifier mon site pour l'affichage sur mobiles et je voudrais utiliser un script datepicker différent sur grand ou petit écran.
J'essaie de m'inspirer d'un article.
J'ai beaucoup d'essai mais mes connaissances en javascript ne me permettent pas d'arriver à ce que je voudrais.
A l'ouverture de la page il faudrait charger un des 2 scripts Datepicker suivant la taille de l'écran et changer si il y a redimensionnement de l'écran. Actuellement le fichier datepickerSmall.js se charge quelque soit la taille de l'écran et ne change pas si on redimensionne.
voici mon code actuel:
Merci d'avance à toute aide me permettant d'avancer.
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
17
18
19
20
21
22
23
24
25
26
27
28
29 <script> // Fonction exécutée au redimensionnement function redimensionnement() { var result = document.getElementById('result'); if("matchMedia" in window) { // Détection if(window.matchMedia("screen and (min-width:1024)").matches) { // Chargement du script datepickerBig dans un nouvel élément script ajouté dans la section var script1 = document.createElement('script'); script1.type='text/javascript' ; script1.src = 'js/datepickerBig.js'; // Insertion dans le DOM document.getElementsByTagName('section')[0].appendChild(script1); } else { // Sinon chargement du script datepickerSmall var script2 = document.createElement('script'); script2.type='text/javascript'; script2.src = 'js/datepickerSmall.js'; // Insertion dans le DOM document.getElementsByTagName('section')[0].appendChild(script2); } } } if (window.addEventListener) { window.addEventListener('load',redimensionnement , false); } else if (window.attachEvent) { window.attachEvent('onload', redimensionnement ); } </script>
Partager