Non classé

jQuery, changement d’arrière plan et layout fluide

Je travaille actuellement sur un projet de refonte de site web où une bonne partie des visiteurs ont une résolution d’écran inférieure au traditionnel 1024×768 pixels.

Le problème est que la créa faisant office d’arrière est prévue pour s’afficher sur des écrans ayant une résolution supérieure à celle ci dessus.

Le petit fragment de code ci dessous m’a permis de résoudre le problème. Il s’agit d’un script qui change l’arrière plan en fonction de la taille de l’écran. En d’autres termes, si la largeur est de moins de 1024 pixels, l’écran devient bleu. Sinon il prend la couleur rouge.

Il peut être amélioré cela dit : je pense notamment à un script permettant de changer de feuille de style en fonction de la résolution d’écran

jQuery(document).ready(function() {      

stylesheetToggle();
jQuery(window).resize(stylesheetToggle);

});

function
stylesheetToggle(){
if(jQuery('body').width()>1024){
jQuery('body').css('background','blue');
}else{
jQuery('body').css('background','red');
}
}
Jean-Luc Houédanou
Jean-Luc Houédanou est un blogueur spécialisé dans l'innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l'Université de Sherbrooke, il a travaillé sur des projets d'envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique. Il aide, par le biais de ce blog, les lecteurs à s'adapter aux évolutions rapides de la technologie et des tendances du marché. En plus de ses articles sur l'innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d'opinion et donne des conseils sur le bien-être mental. Son objectif est d'aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *