[Tuto] le visiteur change la taille des textes

Imprimé depuis: Forum openElement
Categorie:

openElement

Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=23806
Date: 20 Avr 2024 à 05:48
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com

Sujet: [Tuto] le visiteur change la taille des textes

Posté par: Hobby001
Sujet: [Tuto] le visiteur change la taille des textes
Posté le: 01 Mar 2020 à 20:38

Bonjour voici une marche à suivre pour permettre au visiteur de changer la taille des différents textes de la page.

Créez deux éléments qui serviront de déclencheurs. Ces déclencheurs auront les classes CSS personnalisées suivantes: "textePlus" et "texteMoins"

Ajoutez le code javascript suivant en position Enbody:

$(function(){

// boutons de changement de taille du texte incréments de 10% 

$('.textePlus').click(function(){
changeSize(10);
});

$('.texteMoins').click(function(){
changeSize(-10);
});

// Changement de la taille
function changeSize(deltaPercent){ // "Noter" la taille d'origine, peu importe d'ou elle provient, puis modifier-la
$('.OESZ').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');
});
}
});

Notex que dans ce code la valeur changeSize(10) donne un incrément de 10%.

-------------
https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE