Forum ZitePLUS

Satanas

Membre

Inscription : 27/01/2008

Messages : 84

Site Web

Augmenter/Réduire taille du texte de mon site

Bonsoir,

je souhaiterais pouvoir avoir deux boutons, placer tout en haut de mon site, afin de pouvoir augmenter ou réduire la taille des textes de mon site (exemple ici).

En fait j'utilise zite en local pour donner des cours (mes collègues : c'est PowerPoint, moi c'est Zite (au lieu d'avoir 36 fichiers PPT, j'ai un Zite et j'ai un ou deux collègues qui commencent à s'intéresser fortement à ma façon de procéder). Ceci dit, je projette en plein écran (F11), mais je suis obligé, pour les étudiant distraits au fond près du radiateur, d'augmenter la taille de la police. Alors en général : manip simple, je vais dans ma feuille de style et je mets ma font-size à 16pt ou 18pt.
Sinon, je fais un CTRL+ selon navigateur.
Mais sincèrement en ayant deux petits boutons, ce serait pas mal à mon avis.
J'ai cherché sur le Net, mais cela semble assez compliqué et j'aimerai que ce script soit dans une de mes pages de zite (définitivement), plutôt que d'avoir des fichiers de partout et de devoir à chaque mise à jour refaire les mêmes démarches. Eventuellement dans un module, si c'est possible.

Donc, là encore, besoin d'aide, svp. Merci d'avance.

Bonne soirée à tous et à chacun.

Dernière modification par Satanas (17/11/2010 22:53:01)

Satanas

Membre

Inscription : 27/01/2008

Messages : 84

Site Web

Re : Augmenter/Réduire taille du texte de mon site

Bon, ben je me réponds car j'ai trouvé une solution relativement satisfaisante, pour ma part.
Ce site m'a beaucoup aidé et j'ai repris en partie le code.

J'ai donc créé dans le répertoir "js" un dossier "taille_police". Dans ce dernier, j'ai créé un fichier "police_moins_plus.js" (bon ça va hein ! On ne se moque pas de mes noms très simplistes de mes fichiers ou répertoires. )
Donc j'a recopié ce code.

var tgs = new Array( 'div','td','tr'); /* inclure les styles de la feuille de style à impacter*/

var szs = new Array( 'x-small','small','medium','large','x-large' ); /* Taille des polices */
var startSz = 2;

function ts( trgt,inc ) {
        if (!document.getElementById) return
        var d = document,cEl = null,sz = startSz,i,j,cTags;
        
        sz += inc;
        if ( sz < 0 ) sz = 0;
        if ( sz > 4 ) sz = 4; /* Variable modifiée - 5 tailles possible. Si variable à 6 => Rajouter xx-small et xxlarge dans le tableau szs (ligne3) */
        startSz = sz;
                
        if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];

        cEl.style.fontSize = szs[ sz ];

        for ( i = 0 ; i < tgs.length ; i++ ) {
                cTags = cEl.getElementsByTagName( tgs[ i ] );
                for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
        }
}

Ensuite, dans mon bloc d'icones en haut à droite (qui est une page.php de zite), j'ai ajouté le script appelant le bien-nommé script "police_plus_moins.js".

<script src="js/taille_police/police_plus_moins.js" type="text/javascript"></script>

Et enfin, 2 boutons images avec un onclick. Ceci ne modifie que la partie principale de mon template (en l'occurrence la partie "main")

<a href="#"><img onclick="javascript:ts('main',-1)" src="templates/lymbed/icone_Amoins.png" alt="Réduire la taille du texte" width="25" />
<a href="#"><img onclick="javascript:ts('main',1)" src="templates/lymbed/icone_Aplus.png" alt="Agrandir la taille du texte" width="25" />

Avis des pros ? Je pense que le code peut-être amélioré, mais là je câle.

Et puis je vais m'occuper maintenant de l'interface de mes A- et A+, car là j'ai fait deux icônes à la va vite, non alignées.

En attente de vos avis et propositions pour m'aider à optimiser ce code.

Bonne soirée

Dernière modification par Satanas (17/11/2010 23:13:56)