begin process at 2012 05 28 15:04:36
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION


 Information sur la source

Note :
2 / 10 - par 1 personne
2,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :texte, dynamique, résolution, taille, jquery Niveau :Débutant Date de création :29/10/2010 Date de mise à jour :18/12/2010 10:31:00 Vu :3 658
Auteur : tefa24600

Ecrire un message privé
Site perso
Commentaire sur cette source (4)
Ajouter un commentaire et/ou une note

 Description

Petit script en jQuery qui permet de modifier la taille de la police en fonction de la taille du navigateur ; plus votre résolution est grosse, plus la police sera grande !

Source

  • <html>
  • <head>
  • <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  • // id, classe ou balise HTML dont la fonte est modifiable dans ce tableau
  • // indiquez html ou body si vous voulez modifier toute la page
  • var section = new Array('div');
  • //var section = new Array('span','.section');
  • section = section.join(',');
  • $(window).resize(function() {
  • $(section).each(function () {
  • var currentFontSize = $(this).css('font-size');
  • var currentFontSizeNum = parseFloat(currentFontSize, 10);
  • var compt = 0;
  • str = $(this).text();
  • var code=new Array(str.length);
  • for(var i=0;i<str.length;i++){
  • if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
  • compt = compt + 2;
  • } else {
  • compt++;
  • }
  • }
  • var newFontSize = (($(this).width()/compt-1)*3);
  • $(this).css('font-size', newFontSize);
  • });
  • return false;
  • });
  • $(window).resize();
  • });
  • </script>
  • </head>
  • <body onload="">
  • <div style="width: 50%; background: #F0F0F0;" class="section">
  • <span><b>La taille de police est MODIFIABLE dans cette partie</b></span>
  • </div>
  • <div style="width: 50%; background: #F0F0F0;" class="section">
  • <span><b>La taille de police est MODIFIABLE dans cette partie</b></span>
  • </div>
  • </body>
  • <html>
<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){

		// id, classe ou balise HTML dont la fonte est modifiable dans ce tableau
		// indiquez html ou body si vous voulez modifier toute la page
		var section = new Array('div');
		//var section = new Array('span','.section');
		section = section.join(',');

		
		$(window).resize(function() {
			
			$(section).each(function () {
				
				var currentFontSize = $(this).css('font-size');
				var currentFontSizeNum = parseFloat(currentFontSize, 10);
			
				var compt = 0;
				str = $(this).text();
				var code=new Array(str.length);
				for(var i=0;i<str.length;i++){
					if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
						compt = compt + 2;
					} else {
						compt++;
					}
				}
				
				var newFontSize = (($(this).width()/compt-1)*3);
				
				$(this).css('font-size', newFontSize);
			});
			
			return false;
		});
		
		$(window).resize();
	});
	</script>
	
	</head>
	<body onload="">

	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	</body>
<html>

 Conclusion

Évidemment, il faut mettre des pourcentages sur vos blocs si vous voulez que votre texte bouge avec ;)


 Historique

29 octobre 2010 12:25:35 :
Lien mort vers la librairie jQuery
18 décembre 2010 10:31:01 :
Nettoyage du code

 Sources du même auteur

Source avec une capture PRINT_R EN JAVASCRIPT
FONCTION REGEX MULTIPLES VALIDATION FORMULAIRE
SAINT DU JOUR
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL
Toutes les sources de tefa24600

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture MYNOTIFICATIONS par inwebo
Source avec Zip Source avec une capture FORMULAIRE DYNAMIQUE par Niidhogg
Source avec Zip Source avec une capture TABLE_SV : TABLEAU DYNAMIQUE, MONTRER/CACHER COLONNE SUR DEM... par synanceia
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GALERIE PHOTO DYNAMIQUE EN JAVASCRIPT "JQUERY" par zertyx

Commentaires et avis

Commentaire de marcelsnews le 01/11/2010 15:00:55

Salut,

J'ai testé ton code...ca marche nickel ;)

Juste une petite suggestion : découpler les composantes de ton "application" serait une bonne idée..
- mettre le css à part
- ton JS à part
etc ...

Bref aussi petit que peu te paraître ton application ..c'est une bonne habitude ;)

bien à toi

Commentaire de tefa24600 le 01/11/2010 15:06:25

Merci du commentaire !
Ben en fait ce petit bout de code était un 'brouillon' pour un projet plus gros.
Mais il a vite montré ses limites, c'est pour ça que je n'ai pas pris la peine de séparer les différents langages.
Dans tous les cas, je te remercie de ton commentaire et la prochaine fois je n'oublierai pas de séparer les langages et de commenter pour les futurs utilisateurs de mon code !

Commentaire de stam21 le 18/12/2010 03:55:09 2/10

Merci pour ton code même si après l'avoir testé il montre vite ses faiblesses.. L'effet est visible de suite mais difficilement réutilisable.

Commentaire de tefa24600 le 18/12/2010 10:41:53

@STAM21 : c'est exactement comme je l'ai dit dans mon précédent commentaire, le véritable but de ce code était de calculer la largeur exacte que prenait une chaine de caractère et d'afficher une taille proportionnelle à la résolution de l'utilisateur.

Il n'existe pas de vraie solution en html/javascript pour le problème soulevé (à part un applet JAVA => lourd pour un calcul et ne fonctionnera pas si JRE n'est pas installé chez l'utilisateur)...

le seul moyen que j'ai trouvé est de générer une balise qui contient le texte à grossir sans marge et de calculer sa largeur... Autant dire que, si l'on veut modifier toute la page (qui pourrait comprendre des div mais aussi des tableaux), ce code montre aussi ses limites...

Je voulais plus travailler sur un calcul de ratio largeur/hauteur et de dire que, tant qu'aucune des deux dimensions n'a été altérée par le texte, on modifie la taille du texte. A méditer !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Option "Taille de texte" du Browser [ par guidal ] Voilà mon problème ...Je souhaite prendre le controle de la propriété "Taille du texte" du menu Affichage IE (également la prop correspondante sous Ne Taille du texte [ par Tutu ] Bonjour à tous et à toutes.Voilà je voudrais savoir comment récupère-t-on la taille du texte choisi par l'utilisateur qui se trouve dans le Menu "Affi Taille des images variable selon la taille de la fenetre ou la résolution [ par motenai ] Salut,En fait, j'aimerais trouver le moyen pour que mes images changent toutes seules de taille soit selon la résolution de l'écran soit selon la tail mixer menu deroulant+texte [ par foloque ] Bonjour a tous!Savez vous comment fait ton pour creer un champs texte et un menu deroulant en meme temps !Par exemple : Taille on peut ecrire une tail taille de texte [ par kidpigeyre ] Bjr,je souhaite réduire la taille d'un texte contenu dans une cellule de tableau en fonction de la taille de cette cellule. Cette cellule est actuelle Taille dynamique pour frames (choix utilisateur + dim page) [ par Petit_Jardin ] Bonsoir, J'ai encore un soucis que voilà... Est-ce possible de créer une page html avec des frames (jusquelà : oui) : 1 - Je voudrais donner une taill java pour lien avec btn en texte dynamique vers page html redimensionne [ par webding ] Bonjour j'aimerais savoir de quelle maniere proceder pour ouvrir une page internet redimensionnee a la taille voulu, je travaille en environnement fal taille zone de texte [ par jackrichard ] Bonjour a tousVoila j'ai une zone de texte dont je voudrais limiter le nombre de caract&#232;re si quelqu'un pourrait me dire comment faire avec un pe fixer la taille du texte [ par elmekki ] Bonsoir tout le monde je cherche une script permettant de fixer la taille de police de texte dans un site web meme si l'utilisateur fait "affichage"-- event pour la taille du texte ???? [ par konkin ] Quelle la commande qui capture l'evenement que l'utilisateur est entrai de changer de taille de caract&#232;re ? (windows.onresize=&gt;l'utilisateur


Nos sponsors


Sondage...

Comparez les prix


iPod touch 3rd Generation (64 Go)
Entre 374€ et 379€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 7,800 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)