How to add a textsizer tool to your website¶
- How to add a textsizer tool to your website
- 1. Create the necessary .js file
- 2. Installation
- 3. Prepare your template
- 5. Create and publish a custom HTML module
- 6. Create a new CSS class
this short HowTo will show you, how to add a textsizer tool to your website
1. Create the necessary .js file¶
create a new file from the following code and name it "textsizer.js" (the ending must be .js )
1 /*------------------------------------------------------------
2 Document Text Sizer- Copyright 2003 - Taewook Kang. All rights reserved.
3 Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
4 Web Site: http://txkang.com
5 Script featured on Dynamic Drive (http://www.dynamicdrive.com)
6
7 Please retain this copyright notice in the script.
8 License is granted to user to reuse this code on
9 their own website if, and only if,
10 this entire copyright notice is included.
11 --------------------------------------------------------------*/
12
13 //Specify affected tags. Add or remove from list:
14 var tgs = new Array( 'div','td','tr');
15
16 //Specify spectrum of different font sizes:
17 var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
18 var startSz = 2;
19
20 function ts( trgt,inc ) {
21 if (!document.getElementById) return
22 var d = document,cEl = null,sz = startSz,i,j,cTags;
23
24 sz += inc;
25 if ( sz < 0 ) sz = 0;
26 if ( sz > 6 ) sz = 6;
27 startSz = sz;
28
29 if ( !( cEl = d.getElementById( trgt ) ) ) cEl = d.getElementsByTagName( trgt )[ 0 ];
30
31 cEl.style.fontSize = szs[ sz ];
32
33 for ( i = 0 ; i < tgs.length ; i++ ) {
34 cTags = cEl.getElementsByTagName( tgs[ i ] );
35 for ( j = 0 ; j < cTags.length ; j++ ) cTags[ j ].style.fontSize = szs[ sz ];
36 }
37 }You can specify affected tags. For example:
if you want only text within <p>...</p> tags to be resized, then add <p> to the tgs array at the beginning of the script and remove all other tags.
2. Installation¶
- create a new directory within your plugins directory and name it "textsizer"
- copy the textsizer.js file from above into this directory
3. Prepare your template¶
add the following line to the head of your template (between <head> and </head>):
1 <script type="text/javascript" src="plugins/textsizer/textsizer.js"></script>5. Create and publish a custom HTML module¶
goto the TL backend, create a customHTML module with the following code and publish it:
1 <div class="textsizer"><a href="javascript:ts('main',-1)" title="smaller"><span style="font-size:8px">A</span></a> :
2 <a href="javascript:location.reload()" title="default"><span style="font-size:10px">A</span></a> :
3 <a href="javascript:ts('main',1)" title="bigger"><span style="font-size:12px">A</span></a></div>This will create and show a list of 3 links at the frontend, which will enable your customers to resize the font.
6. Create a new CSS class¶
if you want, create a new CSS class "textsizer" to format the module´s output
--- Tutorial created by w3scout