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
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
A voir également:
- Javascript afficher texte onclick
- Telecharger javascript - Télécharger - Langages
- Afficher mot de passe wifi android - Guide
- Excel cellule couleur si condition texte - Guide
- Mettre un texte en majuscule - Guide
- Deflouter texte - Forum Logiciels
2 réponses
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):
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.
'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.
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
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. :-)
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. :-)
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.
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.
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
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 :-)
