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

29/08/2014 / admin

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

$(window).resize(function(){	
	if ($(".sampleClass").css("float") == "none" ){
		// your code here
	}
});

$(window).resize(function(){

if ($(".sampleClass").css("float") == "none" ){

// your code here

}

});

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

$(window).on('resize', function(){	
	if ($(".sampleClass").css("float") == "none" ){
		// your code here
	}
});

$(window).on('resize', function(){

if ($(".sampleClass").css("float") == "none" ){

// your code here

}

});

CSS

.sampleClass {float:left;}
@media only screen and (max-width: 800px){
	.sampleClass {float:none;}
}

.sampleClass {float:left;}

@media only screen and (max-width: 800px){

.sampleClass {float:none;}

}

Ressources en ligne

Importing CSS Breakpoints Into JavaScript
matchMedia() polyfill – test whether a CSS media type or media query applies
enquire.js – a lightweight, pure JavaScript library for responding to CSS media queries. JavaScript callbacks for media queries matching and unmatching.
Tutoriel (en anglais) sur l’utilisation d’enquire.js.

[jQuery] Combiner onLoad et onResize

29/08/2014 / admin

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

// Bind to the resize event of the window object
$(window).on("resize", function () {
    // Set .right's width to the window width minus 480 pixels
    $(".content .right").width( $(this).width() - 480 );
// Invoke the resize event immediately
}).resize();

// Bind to the resize event of the window object

$(window).on("resize", function () {

// Set .right's width to the window width minus 480 pixels

$(".content .right").width( $(this).width() - 480 );

// Invoke the resize event immediately

}).resize();

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

29/08/2014 / admin

    <script type="text/javascript">
        jQuery(document).ready(function(){
            jQuery('.my-block').click(function() {
                jQuery(this).find('input:radio')[0].checked = true;    
                jQuery('.highlighted').toggleClass('highlighted');    
                jQuery(this).toggleClass('highlighted');
            });
        });
    </script>

jQuery(document).ready(function(){

jQuery('.my-block').click(function() {

jQuery(this).find('input:radio')[0].checked = true;

jQuery('.highlighted').toggleClass('highlighted');

jQuery(this).toggleClass('highlighted');

});

</script>

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

08/08/2014 / admin

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 :

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * local.xml
 *
 * Local layout modifications for our local theme
 *
 * @category    design
 * @package     my_theme_default
 * @copyright   Copyright (c) 2011 Magebase.
 */
-->
<layout version="0.1.0">
...
</layout>

<?xml version="1.0" encoding="UTF-8"?>

<!--

/**

* local.xml

* Local layout modifications for our local theme

* @category design

* @package my_theme_default

-->

...

</layout>

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

<default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/my_js.js</name>
            <params/>
        </action>
        <action method="addItem">
            <type>skin_css</type>
            <name>css/my_styles.css</name>
        </action>
    </reference>
</default>

</action>

<name>css/my_styles.css</name>

</action>

</reference>

</default>

Supprimer une ressource JS ou CSS

<default>
    <reference name="head">
        <action method="removeItem">
            <type>skin_css</type>
            <name>css/brandext/slider.css</name>
        </action>
        <action method="removeItem">
            <type>js</type>
            <name>some_ext/jquery-1.4.2.js</name>
        </action>
    </reference>
</default>

<name>css/brandext/slider.css</name>

</action>

<name>some_ext/jquery-1.4.2.js</name>

</action>

</reference>

</default>

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

07/08/2014 / admin

Inclure un bloc statique depuis une page CMS

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

{{block type="cms/block" block_id="home_page"}}

1	{{block type="cms/block" block_id="home_page"}}

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 :

{{block type="core/template" template="dossier/vers/ton-fichier.html"}}

1	{{block type="core/template" template="dossier/vers/ton-fichier.html"}}

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/.

Articles récents

Catégories

Archives

Méta

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

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

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.

jQuery

CSS

Ressources en ligne

[jQuery] Combiner onLoad et onResize

[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

Ajouter une ressource JS ou CSS

Supprimer une ressource JS ou CSS

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

Inclure un bloc statique depuis une page CMS

Inclure un template depuis une page CMS