Accueil > > > 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]);
}
}
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
Commentaires et avis
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é 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écise pour une id #toto une proprieté du style :{font-family: "font 1", <FONT color=#ff0
CSS : police perso ? [ par SDK_akira ]
bonjour, je souhaiterai personnaliser mes balises <h3></h3> 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
|
Derniers Blogs
IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc
Mise à jour des Web API du 14 Mai
Réservez dès maintenant votre journée du 20 juin pour le Windows Azure Dev Camp 2012 à Paris
Mise à jour de Team Foundation Service
MechCommander 2 sur Windows 8
Entity Framework 5 Release Candidate e...
Cliquez pour lire la suite de l'article par richardc REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITERREACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc
Une mauvaise utilisation de rx lors de l'écriture d'une couche d'accès à des services peut conduire à des cas embarassants avec des erreurs mal gérées, des appels qui ne partent lorsqu'ils le devraient, et même des résultats incorrects . le tout nuis...
Cliquez pour lire la suite de l'article par Groc SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVESSHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg
Dernièrement, nous avons migré le site
myTIC
vers un nouveau serveur SharePoint 2010. Dans les contenus que nous vouloins récupérer, nous avions un certain nombre de blogs.
Nous avons utilisé les commandes Power...
Cliquez pour lire la suite de l'article par junarnoalg
Forum
UTILISER UN .JSUTILISER UN .JS par zaikoe
Cliquez pour lire la suite par zaikoe
Logiciels
sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|