Mois : août 2014

[jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur

Source : Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width.
Ressources en ligne

Problème: jQuery $(window).width() et les Media Queries CSS3 ne sont pas toujours très en phase.

Lorsqu’on utilise Firefox, IE ou Opéra pour naviguer sur un site responsive, on peut remarquer au redimensionnement en largeur de la fenêtre un léger décalage dans l’exécution d’une media querie par rapport avec un javascript auxquels on a assigné des break-points similaires.

Cet différence provient d’une inconsistence dans la prise en compte de la présence des scroll-barres verticales par les largeurs déclarées pour les media queries.

Ce bug a pour effet qu’une valeur de largeur identique déclarée dans une media query et par jQuery ne s’exécutera pas tout-à-fait au même moment.

Solution: utiliser jQuery pour détecter un changement sur une propriété CSS plutôt que sur la largeur de la fenêtre du navigateur.

Plutôt que de mesurer la largeur d’écran au redimensionnement de la fenêtre, je vérifie si un changement de règle CSS s’est opéré par le biais d’une media query. De cette façon, sans se préoccuper de la manière dont le navigateur prend en charge la largeur de la scroll-barre verticale, le code jQuery et la media query seront exécutés au même moment.

Supposons que la classe « .sampleClass » possède une règle « float: left; » avant la media query et une règle « float: none; » après. Au redimensionnement de la fenêtre, je vérifie un changement de cette règle.

jQuery

Ou (versions les plus récentes de jQuery 1.x) :

CSS

Ressources en ligne

[jQuery] Combiner onLoad et onResize

Source: http://stackoverflow.com/questions/1974788/combine-onload-and-onresize-jquery

[jQuery] Rendre un bloc contenant un input radio entièrement cliquable

[Magento] Ajouter ou supprimer proprement des ressources CSS ou JS dans l’en-tête de page à l’aide d’un fichier local.xml

Source : 5 techniques utiles pour le fichier layout local.xml de Magento.

Pour bien démarrer : Magento XML – local.xml boilerplate.

Dans /app/design/frontend/mon_theme/default/layout/ créer un fichier local.xml contenant le code de base suivant :

Magento va lire les fichiers XML de layout dans un ordre pré-déterminé. Le fichier local.xml que nous venons de créer sera pris en compte en dernier.

Ajouter une ressource JS ou CSS

Supprimer une ressource JS ou CSS

Remarque: le second removeItem cible un fichier JavaScript qui a été inclus par une extension localisée sous le répertoire /magento/js/ plutôt que depuis le répertoire d’un thème.

[Magento] Inclure un bloc statique ou un template PHTML depuis une page CMS

Inclure un bloc statique depuis une page CMS

Source : How to add static block to page in magento.

Inclure un template depuis une page CMS

Source : Inclure un template PHTML depuis une page CMS Magento.

Magento permet d’appeler des fichiers HTML ou PHTML qui sont situés à l’intérieur de votre template Magento. Si, par exemple, vous avez une fichier HTML qui contient le code pour une page CMS. Au lieu de créé la page CMS en y insérant le code HTML, vous n’avez qu’à inclure ce bout de code pour aller chercher la page HTML voulue :

où le dossier vers ton fichier doit être à l’intérieur du template utilisé. Par défaut, celui-ci serait app/design/frontend/base/default/template/.