Imprimer la Page | Close Window

[Tuto] le visiteur change la taille des textes

Imprimé depuis: openElement Website
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/en/forum_posts.asp?TID=23806
Date: May 29 2020 à 11:27pm
Version logiciel: Web Wiz Forums 10.18 - 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: Mar 01 2020 à 7:38pm
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%.


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose
de gros.



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk