Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Texte de grosseur variable par le visiteur
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Texte de grosseur variable par le visiteur

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada
Status: Inactif
Points: 4383
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Texte de grosseur variable par le visiteur
    Envoyé : 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');
});
}
});





Edité par Hobby001 - 04 Mar 2019 à 18:54
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9202
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 25 Feb 2019 à 13:57
Thumbs Up
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4485
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Feb 2019 à 09:10
Clap
Extra pour les mal voyants !
Et donc si on le met sur un calque ça marchera bien pour toutes les pages ?
PS : juste pour rire, si on mettait un petit curseur ...


Edité par Bridet - 26 Feb 2019 à 09:11
Les Billets d'une Bobonne Bougonne Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada
Status: Inactif
Points: 4383
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 26 Feb 2019 à 19:48
Un curseur impliquerait un minimum et un maximum.

Je pensais plus à un bouton fait avec un bloc de texte comme dans cet exemple .  Ça offre l'avantage de suivre la progression de la taille du texte.

Par contre, je n'ai pas résolu certaines limitations:

Seul le texte par défaut de la page s'ajuste sans soucis à ce code.  Alors que le texte personnalisé via l'interface de OE (la zone de style) ne réagit pas au code.

Le texte personnalisé via un bloc de code CSS réagit bien si l'unité de mesure est le "em".  J'ai mis 2em pour le texte de style script.


Edité par Hobby001 - 26 Feb 2019 à 20:01
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada
Status: Inactif
Points: 4383
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Mar 2019 à 18:52
Tuto modifié selon la recommandation de Dmit
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 9202
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Mar 2019 à 18:53
au top ça !!
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 4485
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Mar 2019 à 10:26
Message posté par Hobby001 Hobby001 a écrit:


Je pensais plus à un bouton fait avec un bloc de texte comme dans cet exemple .  Ça offre l'avantage de suivre la progression de la taille du texte.


Je n'avais pas vu ta réponse, super ton duo de (jolis) boutons - + !

Il ne manque plus que la commande (lecture) vocale Embarrassed !


Edité par Bridet - 05 Mar 2019 à 10:27
Les Billets d'une Bobonne Bougonne Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,031 secondes.
Acheter votre vélo en ligne