The Lab of the weblog Central Scrutinizer

First published on May, 20 2006
If you aren’t new in the Central Scrutinizer maccheronic english version blog, you could have seen (and maybe tried) the “Customize” box on the sidebar.
A script that allows, as in this circumstance, to modify on-the-fly the text of a page is not something new, but I want to show you equally my unobtrusive version that I think could be useful to guarantee an ‘adaptable’ good readability for your pages.

• What is Text Changer?
• How can I use it?
• How does it work?
• Where can I download it?

What is Text Changer?

Text Changer is a script that allow your user to customize a chosen text. The various choices
done will be stored in the browser with the support of cookies.
The script is available in two versions: Full, that modify the size and the font family, and Light that modify the font size only.

Top

How can I use it?

How you can see in the example (with the Full version), the Text Changer control panel is composed by two links (replaceable via CSS with two images, as in this other example)
to increase and decrease the text’s font size and a select to choose the various text’s font family.
These elements will be created at the page onload with the DOM, so is only necessary to insert in the HTML an empty div like this:
<div id="textchanger"></div> and naturally to call the script inserting in the head section:
<script type="text/javascript" src="tc-[full or light].js"></script>
In the first lines of the script you can modify these four variables:

• cpanel: the ID of the element within you want to insert the two links and the select. By default I chose “textchanger”, so the ID of the empty div,
  but you can choose any other element that already exist in the page (avoiding to insert my div).
• element: the ID of the element within you want to modify the text. In the example I modified the text inserted in the div with id=”content”,
  but the div could be substitued by a p, a span or any other element, like above.
• defaultFS: the font size, in em, at the first onload of the page. The times later the size will be equally at the value obtained after the last change done in the previous session.
• defaultFF: the font family at the first onload of the page. For the next visits, see above.

Top

How does it work?

The textChanger object contains five functions: one to initialize, two to modify the text and other two to update and get cookie’s data.

Inizialization
Here’s the first function, init:

init: function() {
  var cpel = document.getElementById(textChanger.cpanel);
  var el = document.getElementById(textChanger.element);
  if (cpel == null || el == null) {alert('The elements with the \"'+textChanger.cpanel+'\" and/or \"'+textChanger.element+'\" ID do not exist in HTML source.');} else {
  var u = document.createElement('ul');
  cpel.appendChild(u);
  u.innerHTML =
  '<li id="increase"><a href="#" title="Increase font size">+ Increase</a></li>'+
  '<li id="decrease"><a href="#" title="Decrease font size">- Decrease</a></li>'
  var sz = textChanger.getCookie('size');
  el.style.fontSize = sz ? sz + 'em' : textChanger.defaultFS + 'em';
  var incr = document.getElementById('increase');
  incr.onclick = function(){textChanger.changeSize(1);return false;};
  var decr = document.getElementById('decrease');
  decr.onclick = function(){textChanger.changeSize(0);return false;};
  var reset= document.getElementById('reset');
  reset.onclick = function(){textChanger.reset();return false;};

  var s = document.createElement('select');
  cpel.appendChild(s);
  var texts = ['change font...','Verdana', 'Arial', 'Courier New','Georgia','Tahoma'];
  var values = ['','Verdana, Arial, Helvetica, sans-serif','Arial, Helvetica, sans-serif','Courier New, Courier, mono','Georgia, Times New Roman, Times, serif','Tahoma,Verdana, Arial, Helvetica, sans-serif'];
  for (var i = 0; i < 6; i++) { s.options[i] = new Option(texts[i],values[i]); }
  var f = textChanger.getCookie('family');
  el.style.fontFamily = f ? f : textChanger.defaultFF;
  s.onchange = function(){textChanger.changeFamily(this.options[this.options.selectedIndex].value); };
  }

In the first part it creates and appends at the empty div (or at your selected element) the two links. To both is attached the onclick mouse event, that will call the function that we’ll see later.
In the second part, instead, there’is the creation of the select, which option’s values and related option’s text are inserted in two vectors that together will be inserted in a series of Option objects.
The related function call will be done at the event onchange, so when an option is selected.

Change the text
The first of the modification function is changeSize:

changeSize: function(val) {
  var el = document.getElementById(textChanger.element);
  var size = el.style.fontSize.substring(0,3);
  var fSize = parseFloat(size,10);
    if (val == 1) {
	fSize += 0.11;
	if (fSize > 2.0) fSize = 2.0;
	} else {
	fSize -= 0.11;
	if (fSize < 0.5) fSize = 0.5;
     }
    el.style.fontSize = fSize + 'em';
    textChanger.updateCookie('size',fSize);
   } , 

This function select the CSS property “font-size” - that in javascript become fontSize - (so for example 1.2em or 1.4em) of the element to modify and extract the first three chars (so for example 1.2 or 1.4).
This string will be converted in a number and this one, depending by the ‘calling’ link, will be increase or decrease of 0.11. (note: I don’t use 0.1 workaround an IE bug)
It will be possibile to do this operation until when you catch up a preset maximum and minimum.
At this point an ‘em’ string is add to the number, and all is assigned again to the fontSize of the element, then the function call the cookie updating.

changeFamily: function(n) {
  if (n){
   var el = document.getElementById(textChanger.element);
   el.style.fontFamily = n;
   textChanger.updateCookie('family',n);
   }
  } ,

changeFamily is a more function direct in comparison to the previous: selected the “font family” attribute of element to modify,
the function assign the value (contained in the select) passed at the function.
Then the usually cookie cookie updating, which we’ll see now how works.

The cookie time.
Get and modify the data inserted in a cookie isn’t a difficult operation, as prove
the functions on the podius of this Dustin Diaz’s chart.
But if the data to insert in a cookie are more than one, like uhm - i don’t know, a ‘font-size’ and a ‘font-family’?
Taking a look at the ‘Options/Privacy/Cookie/ViewCookie’ section of by browser in search of the inspiration, a good solution arrived from the Docking Boxes by Brother Cake
(the same that allows the box’s drag’n'drop’n'open’n'close in your Wordpress 2.0 admin), where two different data are stored in the same cookie splitted by
by an ‘&’ and every data name is separed from his value by an ‘=’.
I haven’t the time to search and undestand the corrensponding functions in this 1585 lines (commented version) code, so I supposed a similar solution that returns a document.cookie
(containing the values of all the cookie related to particular domain) like this:

a_cookie=id17812;textChanger=size=1.6&family=Verdana,sans-serif&;cookie2=ip,3839  

For analyze the functioning of the first function getCookie, let’s suppose to read just from the string above.
To the function I passed three parameters:

• all: the function returns, if this is existing, the full value of the cookie
• size: the function returns, if this is existing, the value related to the ’size’ field
• family: the function returns, if this is existing, the value related to the ‘family’ field

getCookie: function(type) {
   var cname = 'textChanger=';
   var start = document.cookie.indexOf(cname);
   var len = start + cname.length;
   if ((!start) && (cname != document.cookie.substring(0,cname.length))) {return null;}
   if (start == -1) return null;
   var end = document.cookie.indexOf(";",len);
   if (end == -1) end = document.cookie.length;
   var vlck = document.cookie.substring(len, end);
   if(type=='all') {
   return vlck; } else { 

   var tname = type + '=';
   var startTC = vlck.indexOf(tname);
   var lenTC = startTC + tname.length;
   if ((!startTC) && (tname != vlck.substring(0, tname.length))) {return null;}
   if (startTC == -1) return null;
   var endTC = vlck.indexOf("&", lenTC);
   if (endTC == -1) endTC = vlck.length;
   return unescape(vlck.substring(lenTC, endTC));
   }
  }
 }

If I passed to the function the ‘all’ parameter, getCookie will select from the document.cookie
the substring -that will be called vlck- that goes from the cookie name (textChanger) to the ‘;’
and then will return the value size=1.6&family=Verdana,sans-serif&.
If instead the parameter will be different from ‘all’ (so for sure ’size’ or ‘family’), the function will search
in the vlck string the substring that goes from the name of the searched field - that is to say the name of the parameter- to the ‘&’,
returnig in the ’size’ case 1.6 and in the ‘family’ case Verdana,sans-serif
The function that modify the cookie is a bit more complex. (the readers:“Please-stop!”"That’s enough!”)
The main goal is to insert in the cookie the two value following the modification order, or substitute the already existing value.
Let me explain: initially the cookie is empty, or better it does’t exist yet.
I increase the font-size with the changeSize and this function want to write the new value in the cookie throught the instruction textChanger.updateCookie('size',fSize);.
The fSize value, that we suppose still 1.6, will be writted in the cookie in this way:

size=1.6&

Then suppose again that I want to change the font family, so I select an option from the select (for example Tahoma) calling changeFamily,
that will execute at the end the instruction textChanger.updateCookie('family',n).
The function updateCookie will write the family value immediately after the ’size’ value written previously:

size=1.6&family=Tahoma&

If I’d like to modify, with an empty cookie, first the ‘family’ value, and then the ’size’ value, at the end I will see written in the cookie a string like this:

family=Tahoma&size=1.6&

When I modify a value already existing in the cookie, instead, I replace it: after the Tahoma I want a Georgia?
The cookie value will change in this way:

family=Georgia&size=1.6&

This is the translation in code (the readers:“But later you’ll translate it also in a correct english?”):

updateCookie: function(type,vl) {
  var today = new Date();
  var exp = new Date(today.getTime() + (365*24*60*60*1000));
  var vlck = textChanger.getCookie('all');
  var vltype = textChanger.getCookie(type);
  if(vlck && vlck.indexOf(type) != -1) {
   vlck = vlck.replace(vltype,vl); } else {
   if (!vlck) {vlck = '';}
   vlck += type + '=' + vl + '&';
   }
   document.cookie = 'textChanger=' + vlck + ';' +'expires=' + exp.toGMTString() + ';' +'path=/';
	} ,

The first two instruction set the expiring data of the cookie (that I fixed one year, but you can change the days number), while at the vlck is assigned the full value of the cookie, as we saw,
using the previous function. vltype, instead, will assume the value related to the ’size’ or the value related to the ‘family’.
At this point if in vlck is existing the desided value, this one will be substitued by the value passed at the function (vl),
otherwise it will be added the not existing value.
The last instruction will write in the document.cookie the cookie name equal to his value (ehi, how many times i said ‘value’ in this post? and ‘modify’?), the expiring date and the path.

Top

Where can I download it?

Here:

• Text Changer Light (font-size) [.js - 2.4 kB]
• Text Changer Full (font-size + font-family) [.js - 3.9 kB]
• Examples [.zip - 10.2 kB]

Top

This entry was posted on Saturday, April 7th, 2007 at 2:45 pm. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or a (anyone still use them?) trackback from your site.