How to let the user resize fonts

ryanherr

The following should (assuming it works for you) resize all text on a Lectora page that isn't rendered as an image when published.This will probably wreak havoc on your layout if your layout isn't designed for it. This works if you dump your content (text, images, Flash) into text box containers with "Show Vertical Scroll Bar" checked. I don't know of a way to make it work with test questions.Anyways, here's the method:Create a Variable called FontSizeOffset with an initial value of 0. This will keep track of how many pixels to add or subtract from the default font size.Create a button for decreasing the text size, with two Actions:1.On: Mouse ClickAction: Go ToTarget: Web AddressWeb Address: javascript:changeFontSize(-2)Condition tab: FontSizeOffset Greater Than -62.On: Mouse ClickAction: Modify VariableTarget: FontSizeOffsetValue: 2Modification Type: Subtract from VariableCondition tab: FontSizeOffset Greater Than -6Create a button for increasing the text size, with two Actions:1.On: Mouse ClickAction: Go ToTarget: Web AddressWeb Address: javascript:changeFontSize(2)Condition tab: FontSizeOffset Less Than 62.On: Mouse ClickAction: Modify VariableTarget: FontSizeOffsetValue: 2Modification Type: Add to VariableCondition tab: FontSizeOffset Less Than 6These buttons will change the font size by 2 pixels, but with a maximum total change of 6 pixels larger or smaller than the default font size. (Of course, you can change those values.)We don't want the learner to have to change the size of the fonts on each page.So create an Action for sizing fonts on page load:On: ShowAction: Go ToTarget: Web AddressWeb Address: javascript:sizeFontsOnPageLoad() Put the following JavaScript in an Object of type Header Scripting:function changeFontSize(sizeOfChange) {   // make an array of all span elements   var spanArray = document.getElementsByTagName('span');   // for each span element, figure out the font size, and if we can't, just default to 13px.   for(i=0; i.currentStyle.fontSize) {        var s = parseInt(spanArray.currentStyle.fontSize.replace("px",""));      } else {        var s = 13;      }             // then increase the font size by sizeOfChange, and make the line height 120%      s += sizeOfChange;      spanArray.style.fontSize = s+"px";      spanArray.style.lineHeight = "120%";   }}function sizeFontsOnPageLoad() { // Convert Lectora's internal variable FontSizeOffset into a base 10 integer var fontSizeOffset = parseInt(VarFontSizeOffset.getValue(),10); // If fontSizeOffset isn't zero, then resize the fonts accordingly. if (fontSizeOffset) {        changeFontSize(fontSizeOffset) ; }}Edited By: Ryan Herr on 2008-1-3 15:0:14