Objectif: Donner au visiteur le contrôle sur la taille du texte.
Il faut créer deux éléments de contrôle soit du texte, des boutons ou des images. Puis leur donner les classes perso textePlus et texteMoins.
Créez un bloc de code javascript en position end-body et joutez le code javascript suivant:
Après discussions avec Dmit, la recommandation de ce dernier est d'utiliser le code suivant:
$(function(){ $('.textePlus').click(function(){ changeSize(10);
}); $('.texteMoins').click(function(){
changeSize(-10);
}); function changeSize(deltaPercent){ // "Noter" la taille d'origine, peu importe d'ou elle provient, puis modifier-la
var selector = 'input, select, textarea, button, span, .OESZ_Link, txtsizing'; // a ajouter selon besoin $(selector).each(function(){ var $el = $(this); if (!$el.data('oe_orig_size')) { // jamais affecte - memoriser la taille d'origine $el.data('oe_orig_size', $el.css('font-size'));
$el.data('oe_size_coef', 1.0);
} $el.data('oe_size_coef', $el.data('oe_size_coef') + deltaPercent*0.01); $el.css('font-size', (parseFloat($el.data('oe_orig_size')) * $el.data('oe_size_coef')) + 'px'); }); }
});
|