A l’heure ou l’on voit fleurir les themes responsives, Tambour de ville fait évoluer son thème de base pour aller encore plus loin. Avec tous les types d’écran, il devient de plus en plus important de changer l’apparence d’un site en fonction de l’écran… Des petits écrans de smartphone, des moyens, et des très grands… Alors comment faire?
Se fier aux width: 100% ou autres manipulations? Notamment quand le site doit gérer plusieurs backgrounds avec un mélange de position fixed, relative… Cela devient un vrai casse-tête à n’en plus finir !
On peut alors s’initier au Javascript pour se simplifier la tâche !
Grâce à cette beauté, vous pouvez récupérer moultes données sur votre visiteur.
En utilisant la propriété screen.width, vous récupérerez la largeur totale de l’écran de celui-ci. Cependant, si la fenêtre est réduite, cette fonction aura la même valeur.
Nous préférons utiliser la largeur de la fenêtre, avec la fonction window.innerWidth.
Insérez dans une variable la div que vous souhaitez modifier à l’aide de : document.getElementById
Avec un if ou un switch vous mettrez vos conditions: des margins ou autre !
Maintenant, vous avez une variable qui change en fonction de la taille de la fenêtre.
Vous devez dès à présent modifier votre feuille de style depuis votre code javascript.
Pour ce faire, insérez le nom de votre 1ère variable, suivie de .style
A cette même suite, vous devrez spécifiez l’élément à modifier : .margin, .background …
Enfin, mettez un = , puis le nom de votre variable x.
Votre Javascript est prêt, mais il ne va pas marcher pour autant !
Il faut maintenant l’insérer dans votre php. Pour cela, il faut insérez la balise script
avec son type: text/javascript, et mettre la source de votre js.
Un petit ctrl+s et le tour est joué.
Votre Javascript s’effectuera alors dès la prochaine connexion !
NB: Regardez bien si votre div a bien une ID, votre javascript ne recherche pas les class sans l’implémentation
de certaines librairies JS.
Pas de commentaire