Imprimer la Page | Fermez la fenêtre

Texte de grosseur variable par le visiteur

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=23551
Date: 29 Mar 2024 à 14:31
Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com


Sujet: Texte de grosseur variable par le visiteur
Posté par: Hobby001
Sujet: Texte de grosseur variable par le visiteur
Posté le: 25 Feb 2019 à 13:56
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');
});
}
});





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



Réponses:
Posté par: Hobby001
Posté le: 04 Mar 2019 à 18:52
Tuto modifié selon la recommandation de Dmit

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



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net