Change font size on fly with javascript

Question

I am working on ac# application. In which we are tranforming xml content to html using xsl. Once the file is tranformed to HTML. I want to change the font size by cliking on 1 2 and 3. So if user clicks on 1 font size be 9pt, on 2 11pt and on 3 it should be 13pt. Can i do this using javascript? And is it possible to add that javascript function inside of xsl so that when the file is transformed to html it has that javascript funciton? Please try to explain it fully if you answer this. Thanks in advance.

Answer 1

Assuming that you're rendering the content into some sort of a container, like a span for example, you should be able to do something like this:

EDIT :
If the user is able to select the size for a dropdown or something, set the option value to the actual size in points.

changeFontSize = function(size){
    var el = document.getElementById("container");
    if (el){
        el.style.fontSize = size + "pt";
    }
}

Answer 2

1. here's a detailed change font-size in pure Javascript (ie no JQuery);
2. you can add that javascript function inside xsl but can't import it directly .

Answer 3

First of all, yes in theory it's possible. You need to ensure a few things first, however.

1. Make sure that your fonts on your page are all relative. This means that everything should be using font sizes like 100%, 150%, 1.2em etc. and not 12px, 10pt, etc.
2. Make sure that your script is the last loaded node in the HTML or that the function to change the text is fired by the onload event of the body.

The process is simple. You can create a function that changes the font-size of the body element. Because everything else is relative, this will affect every element. (eg setting the body font to 12px will make anything set to 150% be 18px).

A simple function to do this could be like this:

function changeFont(sizeInPixels)
{
    document.body.style.fontSize = sizeInPixels + "px";
}

and then just add the function as an event to the buttons/links with appropriate parameters.

Answer 4

You'll need to insert the JavaScript inside a CDATA. Otherwise it's simply writing the anchors that change the size of the body's fontSize style.

<![CDATA[ 
<script> 
window.onload = function() {

  var fontchange = document.createElement("div");
  var fontchangelink = function(fontsize, desc) {
      var a = document.createElement('a');
      a.href="#";
      a.style.margin = "5px";
      a.onclick = function() { 
        document.body.style.fontSize = fontsize + 'pt';
      };
      a.innerHTML = desc;
      return a;
  };
  fontchange.appendChild(document.createTextNode("Change font size:"));
  fontchange.appendChild(fontchangelink(9, "1"));
  fontchange.appendChild(fontchangelink(11, "2"));
  fontchange.appendChild(fontchangelink(13, "3"));    

  document.body.insertBefore(fontchange, document.body.childNodes[0]);
};
</script> 
]]> 

You could style it better, but here's how it looks: