Changing the Zoom Factor

The function Zoomer() handles the three zooming events: zooming in by 1%, zooming out by 1%, and changing the zoom factor to a user-given number.

When manipulating zoom numbers, it is important to note that they are stored in the style object as strings, ending with the % sign. When the percent sign is omitted, the number is interpreted as a factor. A 200 zoom factor means zooming in by 200X. A 0.5 zoom factor means zooming out by 0.5X.

The first thing to compute, when you want to increment or decrement the zoom factor, is the current zoom factor. You do it by first dropping the % sign, converting the string to a number, adding or subtracting one from the result, and then adding the % sign back. Here is the section that deals with zooming in:

if (string == "in") {
    currZoom = zoomcontainer.style.zoom;
    currZoom = currZoom.substring(0, currZoom.length - 1);
    currZoom = parseInt(currZoom, 10);
    newZoom = currZoom + 1;

    if (newZoom > 10000) return;

    zoomcontainer.style.zoom = newZoom + "%";
    zoomnumber.value = newZoom;
  }

Notice how the substring() function works. The first parameter designates the starting position, starting from 0. The example above shows the value of 0. The second parameter is the length of the substring. In the example above this is currZoom.length - 1, which is the original length of the string, without the % sign. Also notice that we update the GUI's text box, by setting zoomnumber:

zoomnumber.value = newZoom;

The section that deals with zooming out is very similar:

else if (string == "out") {
         currZoom = zoomcontainer.style.zoom;
         currZoom = currZoom.substring(0,
           currZoom.length - 1);
         currZoom = parseInt(currZoom, 10);
         newZoom = currZoom - 1;

         if (newZoom < 1) return;

         zoomcontainer.style.zoom = newZoom + "%";
         zoomnumber.value = newZoom;
       }

The third section deals with a change in the text box entry for the zoom factor. Since the event handler is onkeyup(), we need to filter out any events that are not associated with the Return key. You detect it by asking for the keyCode property of the event base:

if (eventkey.keycode != 13) return;

Here is the function listing:

function Zoomer(string) {
  if (string == "in") {
    currZoom = zoomcontainer.style.zoom;
    currZoom = currZoom.substring(0,
      currZoom.length - 1);
    currZoom = parseInt(currZoom, 10);
    newZoom = currZoom + 1;

    if (newZoom > 10000) return;

    zoomcontainer.style.zoom = newZoom + "%";
    zoomnumber.value = newZoom;
  }
  else if (string == "out") {
         currZoom = zoomcontainer.style.zoom;
         currZoom = currZoom.substring(0,
           currZoom.length - 1);
         currZoom = parseInt(currZoom, 10);
         newZoom = currZoom - 1;

         if (newZoom < 1) return;

         zoomcontainer.style.zoom = newZoom + "%";
         zoomnumber.value = newZoom;
       }
       else {
         if (event.srcElement.id != "zoomnumber") return;
         if (event.keyCode != 13) return;

         var newZoom = zoomnumber.value;
         numValue = parseInt(newZoom, 10);

         if (numValue != newZoom) return;
         if (newZoom > 10000) return;
         if (newZoom < 1) return;

         zoomcontainer.style.zoom = newZoom + "%";
       }
}

Next: How to hide excess pages