Sujet Précédent Sujet Suivant

Agrandir/réduire texte onclick

Fermé
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 4 juil. 2019 à 10:06
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019 - 9 juil. 2019 à 09:04
Bonjour à tous,

Je recherche un moyen pour agrandir/réduire un texte via du javascript sur un site internet en wordpress.(wordpress ou pas à mon avis ca se fera en html/css/js) :

Je m'explique : je réalise un site pour un client qui souhaiterais récupérer le nom d'une personne (champ texte généré lors d'un paiement de facture) sur son site internet, et en cliquant sur ce nom, il prends toute la largeur de l'écran en blanc sur fond noir.
en fait, il serait sur sa tablette, il accède a son site internet depuis sa tablette, récupére le nom de la personne qui a fait un achat sur le site et agrandir ce nom pour qu'il prenne toute la largeur de l'écran en blanc sur fond noir. Cela peut se faire par des boutons "agrandir" et "réduire". et en cliquant sur "réduire" il revienne sur l'écran initial, son site internet.

Quelq'un pourrait-il m'aider svp? je ne connais pas grand chose en js. Je pense que cela pourrait se faire en créant une fonction et la méthode onclick.

Je ne trouve rien sur internet qui pourrait faire cela, je trouve des idées pour agrandir un texte mais tout ce qui est autour reste visible or ce n'est pas ce que mon client souhaite.

Je vous remercie par avance.

Lilou.



Configuration: Windows / Chrome 75.0.3770.100
A voir également:

2 réponses

Réponse 1 / 2
solot
Modifié le 7 juil. 2019 à 12:22
Salut,
'Je trouve des idées pour agrandir un texte mais tout ce qui est autour reste visible '
Dans ce cas il suffit de le masquer...êtes vous sûr de connaître la nature d'une page web?
JavaScript ne servira qu'à changer le CSS et les éléments(HTML) à afficher ou non lors du clic(donc la disposition / composition de l'affichage).
Je serais vous je ferais une interface complète s'il y a autre chose à afficher qu'un nom(donc des fonctionnalités) sinon c'est assez simple d'afficher seulement un nom sur fond blanc.
Sinon un simple conteneur par dessus le reste de la page ou une fenêtre modale devrais faire l'affaire.
Enfin dans votre principe j'ai surtout l'impression que le texte à la base n'est pas affiché correctement-(ou pas assez visible ce qui reviens au même) d'où la nécessité de devoir agrandir pour le voir...cela devrais déjà se faire en web adaptative et l'utilisateur devrais pas avoir à cliquer sur un texte pour voir ce qui y est inscrit...

Un exemple en utilisant un écouteur d'événement JavaScript(le fameux onclick qui est à éviter de manière générale): 
<html>
<p>un texte avec contenu <span id='maxi'>à agrandir</span> en cliqant dessus<p/>
<script>
document.getElementById('maxi').addEventListener(
 'click',
 function(){//-- cet fonction en paramètre de addEventListener se déclenche lors du click
var nouveau=document.createElement('div');//-- creation d'un container
//-- un peu de CSS pou donner emplacement, taile et couleur voulue, j'ai fait exprés d'utiliser une semi-transparence
nouveau.setAttribute('style','z-index:999;position:absolute;top:0;left:0;text-align:center;border:1px solid grey;width:99%;height:99%;font-size:5em;background-color:rgba(255,255,255,0.8);');
nouveau.innerHTML=this.innerHTML;//-- sans oublier l'ajout du texte à afficher
document.body.appendChild(nouveau);//-- ajout à la page du container ainsi crée
//-- et on indique un comportement(écouteur d'événement) lors du clic sur celui-ci
nouveau.addEventListener('click',function(){
 document.getElementsByTagName('div')[0].parentNode.removeChild(document.getElementsByTagName('div')[0]);
})
});



</script>
</html>



Bien sûr c'est sommaire et pas vraiment optimisé mais ça devrais vous aider à comprendre le principe de ce qu'il faut faire et les principes inhérents à la programmation comme la récursivité et l'imbrication.
0
Réponse 2 / 2
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019
8 juil. 2019 à 08:41
Merci pour votre réponse.

En fait il est tout a fait possible de récupérer une div où le texte à agrandir est stocké et de l'afficher dans une autre page texte blanc sur fond noir. Pas forcément dans la même page. Le but de mon client est d'avoir absolument le nom agrandit sur toute la largeur de l'écran, que cela se fasse dans la même page ou non. :-)
0
solot
Modifié le 8 juil. 2019 à 13:45
oui c'est une possibilité...mais ce n'était pas la question...ensuite tout est possible mais ça dépends de ce que vous voulez. Voir aussi mes explications sur le problème à la base: si le texte n'est pas lisible i faut changer la façon de le présenter.
Quand à afficher un texte dans une autre page c'est beaucoup plus lourd surtout si'l y a une requête serveur derrière(PHP+ base de donnée par exemple) et fera simplement que l'application sera très lente(ainsi que gourmande en ressources et beaucoup plus polluante pour la planète) donc à éviter dans ce cas.
0
lilouetfredo Messages postés 45 Date d'inscription mardi 20 mai 2008 Statut Membre Dernière intervention 12 août 2019
9 juil. 2019 à 09:04
En fait c'est pas une question de lisibilité de texte. Mon client est un chauffeur privé. On lui fait une réservation sur son site, et en fait il souhaiterait récupérer le nom de client qui a réserver et l'afficher en grand sur l'écran par exemple pour l'afficher dans un aéroport ou une gare. En fait, il montre la tablette avec le nom de son client à l'aéroport par exemple et comme ca le client en question sait vers qui se diriger. C'est pour cette raison que je souhaiterai quelque chose de leger, mais je prenais les devant car il faut déjà que je détermine comment récupérer les données du clients... pour ensuite cliquer sur son nom et enfin afficher son nom en grand :-)
0