Adjusting a webpage's font with javascript

Question

I'm a beginner with javascript, and I'm (with permission) building a website to host the stories of an amateur author I like. I'm trying to add a pair of drop down boxes at the top of the screen that can adjust text size and font family for the chapter. The drop downs are there and I've placed a div container around the chapter text, but the font isn't changing. Here's the applicable code:

Font:&nbsp;&nbsp;<select name='fontface' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontFamily = this.options[this.selectedIndex].value;">
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>

<select name='fontsize' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontSize = this.options[this.selectedIndex].value;">
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>

I've added " div id='fluidtext' " further down the page where the chapter starts, and " /div " at the end of the chapter. There's no inline code in the story chapters except occasional bold and italic tags. The page is formatted using an external CSS style sheet.

The complete page (minus the CSS formatting) can be found here: https://dl.dropboxusercontent.com/u/59191190/tower02.html

Any help would be appreciated!

Most modern browsers allow the user to change the zooming on everything. I'd question the UX of such a feature. — Anthony
– Anthony, Commented Sep 24, 2013 at 19:19
You have a syntax error "Uncaught ReferenceError: getItem is not defined tower02.html:47 - onchange event", i suggest you to use Chrome for development, and JQuery for make more easy in javascript. But, in this case, you need to declare the function "getItem" at the top of the document. — FxckDead
– FxckDead, Commented Sep 24, 2013 at 19:19
The approach is odd. For example, showing Helvetica as the initially selected font is grossly misleading, since most computers have no font under that name. None of the fonts in the dropdown is available on all computers. — Jukka K. Korpela
– Jukka K. Korpela, Commented Sep 24, 2013 at 20:25

jshthornton · Accepted Answer · 2013-09-24 19:41:46Z

I am going to write you the cleanest answer:

CodePen solution

The reason why I have added 'onkeyup' is due to FireFox not firing 'onchange' when cycling through with keyboard navigation.

Also, I have used an auto executing lambda function to ensure that we do not pollute the window object with our fluff variables.

Edit: For anyone who does not want the CodePen solution

HTML

Font:

<select id="fontface" name='fontface'>
  <option value='Helvetica'>Helvetica</option>
  <option value='Verdana'>Verdana</option>
  <option value='Times New Roman'>Times New Roman</option>
  <option value='Courier New'>Courier New</option>
  <option value='Georgia'>Georgia</option>
</select>

<select id="fontsize" name='fontsize'>
  <option value='8pt'>8pt</option>
  <option value='10pt'>10pt</option>
  <option value='12pt' selected='selected'>12pt</option>
  <option value='14pt'>14pt</option>
  <option value='16pt'>16pt</option>
  <option value='18pt'>18pt</option>
  <option value='24pt'>24pt</option>
  <option value='32pt'>32pt</option>
  <option value='40pt'>40pt</option>
  <option value='48pt'>48pt</option>
  <option value='60pt'>60pt</option>
  <option value='75pt'>75pt</option>
  <option value='90pt'>90pt</option>
</select>

<p id="fluidtext">
  This is my fluid text  
</p>

JS

(function() {
  //Assuming document is ready

  function onFontFaceChange() {
    if(fluidTextNode) fluidTextNode.style.fontFamily = this.options[this.selectedIndex].value;
  }

  function onFontSizeChange() {
    if(fluidTextNode) fluidTextNode.style.fontSize = this.options[this.selectedIndex].value;
  }

  var fontFaceNode = document.getElementById('fontface'),
      fontSizeNode = document.getElementById('fontsize'),
      fluidTextNode = document.getElementById('fluidtext');

  if(fontFaceNode) fontFaceNode.onkeyup = fontFaceNode.onchange = onFontFaceChange;
  if(fontSizeNode) fontSizeNode.onkeyup = fontSizeNode.onchange = onFontSizeChange;

}());

matewka · Accepted Answer · 2013-09-24 19:36:04Z

You're trying to call getItem function which is not defined.
You need to declare it:

<script>
var getItem = function(item) {
    return document.getElementById(item);
};
</script>

Also try to avoid handling events in DOM attributes. I'd suggest the complete code look like this:

<script>
var getItem = function(item) {
    return document.getElementById(item);
};

getItem('fontface').addEventListener('change', function() {
    var ftxt = getItem('fluidtext');
    if(ftxt)
        ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});

getItem('fontsize').addEventListener('change', function() {
    var ftxt = getItem('fluidtext');
    if(ftxt)
        ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
</script>

Font:&nbsp;&nbsp;
<select id="fontface" name='fontface'>
    <option value='Helvetica' selected='selected'>Helvetica</option>
    <option value='Verdana'>Verdana</option>
    <option value='Times New Roman'>Times New Roman</option>
    <option value='Courier New'>Courier New</option>
    <option value='Georgia'>Georgia</option>
</select>

<select id="fontsize" name='fontsize'>
    <option value='8pt'>8pt</option>
    <option value='10pt'>10pt</option>
    <option value='12pt' selected='selected'>12pt</option>
    <option value='14pt'>14pt</option>
    <option value='16pt'>16pt</option>
    <option value='18pt'>18pt</option>
    <option value='24pt'>24pt</option>
    <option value='32pt'>32pt</option>
    <option value='40pt'>40pt</option>
    <option value='48pt'>48pt</option>
    <option value='60pt'>60pt</option>
    <option value='75pt'>75pt</option>
    <option value='90pt'>90pt</option>
</select>

One thing worth mentioning is that addEventListener isn't cross browser. I'd suggest using jQuery and on method instead of addEventListener. Then the whole JS could look like this:

<script>
(function( $ ) {
    $(document).ready(function() {
        $('#fontface').on('change', function() {
            var ftxt = $('#fluidtext');
            if(ftxt)
                ftxt.style.fontFamily = this.options[this.selectedIndex].value;
        });

        $('#fontsize').on('change', function() {
            var ftxt = $('#fluidtext');
            if(ftxt)
                ftxt.style.fontSize = this.options[this.selectedIndex].value;
        });
    });
})(jQuery);
</script>

Joseph Myers · Accepted Answer · 2013-09-24 19:20:42Z

0

Add this to your page in order to define the missing getItem function:

<script>
function getItem(a) { return document.getElementById(a); }
</script>

answered Sep 24, 2013 at 19:20

Joseph Myers

6,56229 silver badges36 bronze badges

Collectives™ on Stack Overflow

Adjusting a webpage's font with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related