begin process at 2012 05 28 07:41:57
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Graphique

 > AJUSTER LA POLICE AU CONTENANT

AJUSTER LA POLICE AU CONTENANT


 Information sur la source

 Description

Je me suis retrouvé avec un problème : un élément graphique d'une taille déterminé dont le contenu peut changer, il ne fallait pas que le texte en sorte ni qu'il y ait d’ascenseur.

J'ai donc pondu ce script qui permet d'ajuster la taille de la police d'un élément pour le remplir entièrement.

La fonction getElementByClassName est une copie de ce qu'on trouve facilement partout. J'en ai tiré 2 fonction qui sont bien utiles : voir l'exemple.

Source

  • //Raccourci pour getElementById
  • function $(id){
  • if (is_String(id)){
  • return document.getElementById(id);
  • }else{
  • return id;
  • }
  • }
  • //Determine si une variable est une chaine
  • function is_String(val){
  • return (val+'' === val);
  • }
  • ////
  • // Fonctions pour ajuster la police à la taille de la boite
  • //Fabrique une div pour stoquer du contenu temporaire et en déterminer l'encombrement
  • function _div_ajuster_(){
  • div = $('_div_ajuster_');
  • if (div == null){
  • div = document.createElement('div');
  • div.id = '_div_ajuster_';
  • div.style.position='absolute';
  • div.style.visibility='hidden';
  • div.style.fontSize='10px';
  • div.style.width = '';
  • div.style.height = '';
  • document.body.appendChild(div);
  • }
  • return div;
  • }
  • //Ajuste la police de l'objet pour en que son contenu fasse "larg" pixel de large
  • //"larg" peut être passé comme argument de classe
  • function ajuster_largeur(id, larg){
  • if (is_String(id))
  • div1 = $(id);
  • else
  • div1 = id;
  • div2 = _div_ajuster_();
  • div2.innerHTML = div1.innerHTML;
  • w_init = div2.clientWidth;
  • t_init = div2.style.fontSize;
  • if (div1.class_arg[1] != undefined){
  • w_final = parseInt(div1.class_arg[1]);
  • }else if (div1.class_arg['l'] != undefined){
  • w_final = parseInt(div1.class_arg['l']);
  • }else if (larg != 0 && larg != undefined){
  • w_final = larg;
  • }else{
  • w_final = parseInt(div1.style.width);
  • }
  • t_final = parseInt(t_init) / w_init * w_final;
  • div1.style.fontSize = t_final + "px";
  • }
  • //Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut
  • //"haut" peut être passé comme argument de classe
  • function ajuster_hauteur(id, haut){
  • if (is_String(id))
  • div1 = $(id);
  • else
  • div1 = id;
  • div2 = _div_ajuster_();
  • div2.innerHTML = div1.innerHTML;
  • h_init = div2.clientHeight;
  • t_init = div2.style.fontSize;
  • if (div1.class_arg[2] != undefined){
  • h_final = parseInt(div1.class_arg[2]);
  • }else if (div1.class_arg['h'] != undefined){
  • h_final = parseInt(div1.class_arg['h']);
  • }else if (haut != 0 && haut != undefined){
  • h_final = haut;
  • }else{
  • h_final = parseInt(div1.style.height);
  • }
  • //h_final = div1.clientHeight;
  • t_final = parseInt(t_init) / h_init * h_final;
  • div1.style.fontSize = t_final + "px";
  • }
  • //Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut et "larg" pixel de large
  • //"larg" et "haut" peuvent être passés comme argument de classe, s'ils ne sont pas défini, utilise la largeur et la hauteur du conteneur.
  • function ajuster(id, larg, haut){
  • div1 = $(id);
  • h_undef = (div1.style.height == '' && (div1.style.top == '' || div1.style.bottom==''))
  • && haut==undefined
  • && div1.class_arg[2]==undefined
  • && div1.class_arg['h']==undefined;
  • l_undef = (div1.style.width == '' && (div1.style.left == '' || div1.style.right==''))
  • && larg ==undefined
  • && div1.class_arg[1]==undefined
  • && div1.class_arg['l']==undefined;
  • if (h_undef && ! l_undef)
  • ajuster_largeur(id, larg);
  • else if (l_undef && ! h_undef)
  • ajuster_hauteur(id, haut);
  • else { //Ajuster les deux
  • div2 = _div_ajuster_();
  • div2.innerHTML = div1.innerHTML;
  • t_init = div2.style.fontSize;
  • w_init = div2.clientWidth;
  • if (div1.class_arg[1] != undefined){
  • w_final = div1.class_arg[1];
  • }else if (div1.class_arg['l'] != undefined){
  • w_final = div1.class_arg['l'];
  • }else if (larg != 0 && larg != undefined){
  • w_final = larg;
  • }else{
  • w_final = div1.clientWidth;
  • }
  • h_init = div2.clientHeight;
  • if (div1.class_arg[2] != undefined){
  • h_final = div1.class_arg[2];
  • }else if (div1.class_arg['h'] != undefined){
  • h_final = div1.class_arg['h'];
  • }else if (haut != 0 && haut != undefined){
  • h_final = haut;
  • }else{
  • h_final = div1.clientHeight;
  • }
  • t_larg = parseInt(t_init) / w_init * w_final;
  • t_haut = parseInt(t_init) / h_init * h_final;
  • div1.style.fontSize = parseInt(Math.min(t_larg, t_haut))-1 + "px";
  • }
  • }
  • //
  • ////
  • ////
  • //Fonctions sur les classes
  • //Renvoi le tableau des elements de la classe determinée
  • document.getElementsByClassName = function(cl) {
  • var retnode = [];
  • var myclass = new RegExp('\\b'+cl+'\\b');
  • var elem = this.getElementsByTagName('*');
  • for (var i = 0; i < elem.length; i++) {
  • var classes = elem[i].className;
  • if (myclass.test(classes)){
  • retnode.push(elem[i]);
  • if (elem[i].class_arg == undefined)
  • elem[i].class_arg = [];
  • }
  • }
  • return retnode;
  • };
  • //Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique de celle ci.
  • //expl : class="ajuster50x100
  • document.getElementsByClassNameWith2NumArgs = function(cl) {
  • var retnode = [];
  • var myclass = new RegExp('\\b'+cl+'([0-9.]*)x([0-9.]*)\\b');
  • var elem = this.getElementsByTagName('*');
  • for (var i = 0; i < elem.length; i++) {
  • var classes = elem[i].className;
  • if (myclass.test(classes)){
  • retnode.push(elem[i]);
  • res = myclass.exec(classes);
  • if (elem[i].class_arg == undefined)
  • elem[i].class_arg = [];
  • elem[i].class_arg[1] = res[1];
  • elem[i].class_arg[2] = res[2];
  • }
  • }
  • return retnode;
  • };
  • //Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique nommé de celle ci.
  • //expl : class="ajuster_h=125"
  • document.getElementsByClassNameWith1NamedNumArgs = function(cl) {
  • var retnode = [];
  • var myclass = new RegExp('\\b'+cl+'_(.*)=([0-9.]*)\\b');
  • var elem = this.getElementsByTagName('*');
  • for (var i = 0; i < elem.length; i++) {
  • var classes = elem[i].className;
  • if (myclass.test(classes)){
  • retnode.push(elem[i]);
  • res = myclass.exec(classes);
  • if (elem[i].class_arg == undefined)
  • elem[i].class_arg = [];
  • elem[i].class_arg[res[1]] = res[2];
  • }
  • }
  • return retnode;
  • };
  • //
  • ////
  • //Recherche les elements dont il faut ajuster la police
  • function appliquer_ajustement(){
  • a_ajuster = document.getElementsByClassName('ajuster');
  • for( i=0; i < a_ajuster.length; i++){
  • ajuster(a_ajuster[i]);
  • }
  • a_ajuster = document.getElementsByClassNameWith2NumArgs('ajuster');
  • for( i=0; i < a_ajuster.length; i++){
  • ajuster(a_ajuster[i]);
  • }
  • a_ajuster = document.getElementsByClassNameWith1NamedNumArgs('ajuster');
  • for( i=0; i < a_ajuster.length; i++){
  • ajuster(a_ajuster[i]);
  • }
  • }
//Raccourci pour getElementById
function $(id){
	if (is_String(id)){
		return document.getElementById(id);
	}else{
		return id;
	}
}

//Determine si une variable est une chaine
function is_String(val){
	return (val+'' === val);
}


////
// Fonctions pour ajuster la police à la taille de la boite

//Fabrique une div pour stoquer du contenu temporaire et en déterminer l'encombrement
function _div_ajuster_(){
	div = $('_div_ajuster_');
	if (div == null){
		div = document.createElement('div');
		div.id = '_div_ajuster_';
		div.style.position='absolute';
		div.style.visibility='hidden';
		div.style.fontSize='10px';
		div.style.width = '';
		div.style.height = '';
		document.body.appendChild(div);
	}
	return div;
}

//Ajuste la police de l'objet pour en que son contenu fasse "larg" pixel de large
//"larg" peut être passé comme argument de classe
function ajuster_largeur(id, larg){
	if (is_String(id))
		div1 = $(id);
	else
		div1 = id;
	
	div2 = _div_ajuster_();
	div2.innerHTML = div1.innerHTML;
	
	w_init = div2.clientWidth;
	t_init = div2.style.fontSize;
	if (div1.class_arg[1] != undefined){
		w_final = parseInt(div1.class_arg[1]);
	}else if (div1.class_arg['l'] != undefined){
		w_final = parseInt(div1.class_arg['l']);
	}else if (larg != 0 && larg != undefined){
		w_final = larg;
	}else{
		w_final = parseInt(div1.style.width);
	}
	t_final = parseInt(t_init) / w_init * w_final;
	div1.style.fontSize = t_final + "px";
}

//Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut
//"haut" peut être passé comme argument de classe
function ajuster_hauteur(id, haut){
	if (is_String(id))
		div1 = $(id);
	else
		div1 = id;
	
	div2 =  _div_ajuster_();
	div2.innerHTML = div1.innerHTML;
	
	h_init = div2.clientHeight;
	t_init = div2.style.fontSize;
	
	if (div1.class_arg[2] != undefined){
		h_final = parseInt(div1.class_arg[2]);
	}else if (div1.class_arg['h'] != undefined){
		h_final = parseInt(div1.class_arg['h']);
	}else if (haut != 0 && haut != undefined){
		h_final = haut;
	}else{
		h_final = parseInt(div1.style.height);
	}
	//h_final = div1.clientHeight;
	t_final = parseInt(t_init) / h_init * h_final;
	div1.style.fontSize = t_final + "px";
}

//Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut et "larg" pixel de large
//"larg" et "haut" peuvent être passés comme argument de classe, s'ils ne sont pas défini, utilise la largeur et la hauteur du conteneur.
function ajuster(id, larg, haut){
	div1 = $(id);
	
	h_undef = (div1.style.height == '' && (div1.style.top == '' || div1.style.bottom==''))
		&& haut==undefined
		&& div1.class_arg[2]==undefined
		&& div1.class_arg['h']==undefined;
	l_undef = (div1.style.width == '' && (div1.style.left == '' || div1.style.right==''))
		&& larg ==undefined
		&& div1.class_arg[1]==undefined
		&& div1.class_arg['l']==undefined;
	
	if (h_undef && ! l_undef)
		ajuster_largeur(id, larg);
	else if (l_undef && ! h_undef)
		ajuster_hauteur(id, haut);
	else { //Ajuster les deux
		div2 =  _div_ajuster_();
		div2.innerHTML = div1.innerHTML;
		
		t_init = div2.style.fontSize;
		w_init = div2.clientWidth;
		if (div1.class_arg[1] != undefined){
			w_final = div1.class_arg[1];
		}else if (div1.class_arg['l'] != undefined){
			w_final = div1.class_arg['l'];
		}else if (larg != 0 && larg != undefined){
			w_final = larg;
		}else{
			w_final = div1.clientWidth;
		}
		h_init = div2.clientHeight;
		if (div1.class_arg[2] != undefined){
			h_final = div1.class_arg[2];
		}else if (div1.class_arg['h'] != undefined){
			h_final = div1.class_arg['h'];
		}else if (haut != 0 && haut != undefined){
			h_final = haut;
		}else{
			h_final = div1.clientHeight;
			
		}
		
		t_larg = parseInt(t_init) / w_init * w_final;
		t_haut = parseInt(t_init) / h_init * h_final;
		
		div1.style.fontSize = parseInt(Math.min(t_larg, t_haut))-1 + "px";
	}
}
//
////

////
//Fonctions sur les classes

//Renvoi le tableau des elements de la classe determinée
document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
		}
	}
	return retnode;
};

//Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique de celle ci.
//expl : class="ajuster50x100
document.getElementsByClassNameWith2NumArgs = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'([0-9.]*)x([0-9.]*)\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			res = myclass.exec(classes);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
			elem[i].class_arg[1] = res[1];
			elem[i].class_arg[2] = res[2];
		}
	}
	return retnode;
};
//Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique nommé de celle ci.
//expl : class="ajuster_h=125"
document.getElementsByClassNameWith1NamedNumArgs = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'_(.*)=([0-9.]*)\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			res = myclass.exec(classes);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
			elem[i].class_arg[res[1]] = res[2];
		}
	}
	return retnode;
};

//
////

//Recherche les elements dont il faut ajuster la police
function appliquer_ajustement(){
	a_ajuster = document.getElementsByClassName('ajuster');
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
	a_ajuster = document.getElementsByClassNameWith2NumArgs('ajuster');
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
	a_ajuster = document.getElementsByClassNameWith1NamedNumArgs('ajuster');
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
}

 Conclusion

Exemple d'utilisation :

<script type="text/javascript" src="ajuster.js"></script>
<div class="ajuster_h=50">Ces 2 lignes<br/>occuperont 50px de haut.</div>
<div class="ajuster300x50">Et ce texte occupera <br/>50px de haut ou 300px de large selon la longueur des lignes.</div>
<script type="text/javascript">
appliquer_ajustement();
< /script>


 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture UN MENU EN CSS par Julien39
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip IMPRIMER UNE PARTIE DE PAGE NON SÉLECTIONNABLE par lecurieux41
Source avec Zip QUIZ HTML CSS ET JAVASCRIPT par lecurieux41
CHANGER LA TAILLE DU TEXTE ET OU DE FEUILLE DE STYLE AVEC EN... par Annadrill

Commentaires et avis

Aucun commentaire pour le moment.

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

personnalisé la police d'écriture [ par piotre_33000 ] Bonjours tout le monde!Je cherche a mettre une police personnalis&#233; sur mon site et qu'elle soit visible par tout le monde sans devoir la telechar [HTML]changement de taille de police [ par amateurjava ] Bonjour, bizarerie sur un reseau (1 serveur et 20 postes): j'ai crée un intranet pour une société. Concernant un div particulier j'ai donné un attrib Probleme de taille de police [ par amateurjava ] Bonjour, bizarerie sur un reseau (1 serveur et 20 postes): j'ai crée un intranet pour une société. Concernant un div particulier j'ai donné un attrib Trouver la police utilisée [ par sapakus ] Bonjour,Dans une feuille de style, je pr&#233;cise pour une id #toto une propriet&#233; du style :{font-family: "font 1", <FONT color=#ff0 CSS : police perso ? [ par SDK_akira ] bonjour, je souhaiterai personnaliser mes balises &lt;h3&gt;&lt;/h3&gt; en utilisant une police que l'utilisateur n'a pas forcement sur son pc, comme importation du fichier js et css par javascript [ par islamsaadally ] slt tous le monde , je travaille avec des pages jsp sur netbeans et  et j'ai du code javascript  pour une calendrier qui fait appel a une page d'exten simulateur de typo (police, font, caractere) [ par actesez ] Bonjour, est il possible de creer un simulateur de police en java, ajax, ...? Je tape mon texte, choisi ma police = aperçu du resultat merci Centrer une image quelque soit la résolution ou le navigateur. [ par mquisuisje ] <link rel="Fi picdem.net télésurveillance [ par brahimzemmal ] <link rel="Fi Changer feuille css [ par hugo7 ] Bonjour je voudrais savoir comment en javascript changer le thème d'une page maître lors du click sur un bouton. D'avance merci pour vos réponses


Nos sponsors


Sondage...

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 : 0,749 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales