Development

TYPOlight tutorials

  1. TYPOlight tutorials
  2. English tutorials
    1. Installation and configuration
    2. Using TYPOlight
    3. Tips and tricks
    4. Module-specific Tutorials
    5. TYPOlight custom development
    6. Hacks to the Core Modules
  3. Deutsche Tutorials

Table of Contents

  1. How to add a textsizer tool to your website
    1. 1. Create the necessary .js file
    2. 2. Installation
    3. 3. Prepare your template
    4. 5. Create and publish a custom HTML module
    5. 6. Create a new CSS class

How to add a textsizer tool to your website

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 ) 

/*------------------------------------------------------------
Document Text Sizer- Copyright 2003 - Taewook Kang.  All rights reserved.
Coded by: Taewook Kang (txkang.REMOVETHIS@hotmail.com)
Web Site: http://txkang.com
Script featured on Dynamic Drive (http://www.dynamicdrive.com)
    
Please retain this copyright notice in the script.
License is granted to user to reuse this code on 
their own website if, and only if, 
this entire copyright notice is included.
--------------------------------------------------------------*/

//Specify affected tags. Add or remove from list:
var tgs = new Array( 'div','td','tr');

//Specify spectrum of different font sizes:
var szs = new Array( 'xx-small','x-small','small','medium','large','x-large','xx-large' );
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 > 6 ) sz = 6;
    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 ];
    }
}

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

  1. create a new directory within your plugins directory and name it "textsizer"
  2. 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>): 

<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: 

<div class="textsizer"><a href="javascript:ts('main',-1)" title="smaller"><span style="font-size:8px">A</span></a> : 
<a href="javascript:location.reload()" title="default"><span style="font-size:10px">A</span></a> : 
<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