Articles

dropdown en javascript et css

Souvent on me pose la question sur comment styliser un select d'un formulaire. Il est possible de modifier la taille, la hauteur, le padding, etc. Mais il est impossible de changer l'aspect de la fleche de dropdown.

Dans cet article, je vais vous montrer comment remplacer vos select "classiques" par un equivalent en HTML stylisé en CSS et géré en javascript et qui est utilisable dans un <form> très facilement. De plus il est compatible tous navigateurs et tous devices (mobile, tablette et desktop)

<div class="selectBox">
        <input type="hidden" name="univers" value="voiture"/>
        <div class="selected">Automobile</div>
        <div class="selectArrow">&nbsp;</div>
        <div class="selectOptions" >
                <div class="selectOption" value="voiture">Automobile</div>
                <div class="selectOption" value="utilitaire">Utilitaire</div>
                <div class="selectOption" value="moto">Moto</div>
                <div class="selectOption" value="camping-car">Camping Car</div>
        </div>
</div>

Envoyer des evenements avec Google Universal Analytics

Google a mis à jour son systeme de tracking appelé maintenant Google Universal Analytics.

Il est en beta public et donc il est possible depuis un moment de l'utiliser, voici la marche a suivre

<script type="text/javascript">
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
   (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
   m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
   })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

   ga('create', 'UA-xxxxxxxx', 'mon-domain.fr');
   ga('send', 'pageview');
</script>

adsenseLoader, charger vos publicites google adsense sur le load

Actuellement sur mon site, je teste différentes façon d'améliorer les performances.

Je me suis donc attaqué au chargement sur le "load" de la page de toutes mes publicités adsense. J'ai ainsi créé une librairie adsenseLoader en javascript afin d'y parvenir.

Celle ci permet donc de charger sur le onload ou un autre event.

Playground CSS - un menu en transition

<div class="menu-transition">
    <div class="item">
        <a href="#">Item 1</a>
        <div class="hidden"><img src="http://farm2.staticflickr.com/1394/557771204_6d06419b64_m.jpg" alt="" /></div>
    </div>
    <div class="item">
        <a href="#">Item 2</a>
        <div class="hidden"><img src="http://farm2.staticflickr.com/1394/557771204_6d06419b64_m.jpg" alt="" /></div>
    </div>
</div>

Performance sous jQuery

jQuery est une bonne librairie javascript, elle permet d'augmenter grandement la productivité de code javascript et permet de gerer les exceptions liées aux navigateurs car elle est compatible cross-browser.

Mais parfois l'utilisation de cette librairie peut s'avérer gourmande en resource navigateur, c'est pour cette raison qu'il fait absolument optimiser son code sous jQuery

Voici quelques points que j'utilise sans cesse pour améliorer la performance javascript sous jQuery :

Update : Mise a jour de mon projet EASMVC version 1.1.

Nouvelle version de mon projet EASMVC, un framework MVC intégrant plusieurs
fonctionnalités :

  • MVC PHP leger et rapide (>410ko)
  • Facile à utiliser
  • Une librairie PHP intégrée (en cours d'implémentation)
    • Intégration de Memcache et APC (Nouveau)
    • Connexion base de données (simili ORM)
      • MySQL(en cours d'implémentation)
    • Client REST (en cours d'implémentation)
    • Mode API REST disponible (en cours d'implémentation)
  • Intégration librarie headJS et jQuery
  • Systeme Grid pour le CSS (prochainement)
  • Gestion de layout et de vue (Nouveau)
  • Garantie sans Malware, sans Spyware
PHP
retourner en haut de la page