Afficher / masquer votre grille de base avec jQuery

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Afficher / masquer votre grille de base avec jQuery

Si vous travaillez avec une grille pour harmoniser la disposition des blocs sur la page, vous passez certainement du temps à afficher puis masquer cette grille pour vérifier que tout est en ordre. Pour cela on peut ajouter une classe CSS dans le code HTML ou mettre entre commentaires une ligne concernant le background de la page dans la feuille de style… Les deux solutions sont assez fastidieuses. C’est pourquoi, je vous propose une petite astuce toute simple qui s’applique à tout type d’intégration avec toutefois un bonus pour WordPress que vous adapterez sans peine à votre CMS préféré.

Voici le code à ajouter dans votre template WordPress si vous voulez afficher ou masquer la grille en production. Si vous travaillez en local (ou si vous n’utilisez pas WordPress), supprimez le code PHP :

<?php if ( is_user_logged_in() ) : ?>
    <a id="displayGrid" href="#displayGrid">Afficher/masquer la grille</a>
<?php endif; ?>
Le bout de code jQuery pour gérer l’événement :
// Affichage de la grille si connecte
$("#displayGrid").click(function() {
    $("html").toggleClass("display-grid");
});
La règle CSS à mettre dans votre feuille de style :
.display-grid #container {
    background: url(pix/grid.png);
}
Pour que le lien vous suive quand vous faites défiler la page :
#displayGrid {
    position: fixed;
}

Mise en page alternative

Avec un peu d’astuce et d’espièglerie vous trouverez rapidement de nombreuses applications à cette astuce. Je pense notamment à la possibilité de proposer une mise en page CSS alternative aux visiteurs.

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



7 commentaires pour “Afficher / masquer votre grille de base avec jQuery”

  1. Julien dit :

    L’id dans ton code PHP ne doit pas être exact : Afficher/masquer la grille

  2. Julien dit :

    id= »displayGrid » plutôt que id= »toggleGrid »

  3. Bruno Bichet Intégrateur Web dit :

    Merci Julien, le pire c’est que j’ai relu cette partie avant d’appuyer sur le bouton ^_^v

  4. Arnaud dit :

    Sinon on peut mettre ce lien dans les favori :

    javascript:function%20fnStartDesign(sUrl)%20{var%20nScript%20=%20document.createElement(‘script’);nScript.setAttribute(‘language’,’JavaScript’);nScript.setAttribute(‘src’,sUrl);document.body.appendChild(nScript);}fnStartDesign(‘http://www.sprymedia.co.uk/design/design/media/js/design-loader.js’);

  5. [...] Bruno Bichet, dont je vous conseille la lecture sur son blog, se voit décerner la bonne idée de la semaine avec son billet : Afficher / Masquer votre grille de base avec jQuery. [...]

  6. truffo dit :

    En rajoutant un accesskey, on peut encore gagné un peu en efficacité.

  7. [...] Afficher / masquer votre grille de base avec jQuery [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site