Zoom Range

Zoom any text of the page

by Dhanck

HTML

<!--<div class="zoom-control">
  <input type="range" id="chanceSlider" class="vHorizon" min="-2" max="10" step="0.2" value="0">
  <input type="text" id="chance" class="text" value="0">
</div>-->

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
     ...

CSS

body {
  margin: 20px;
}

td,
td div,
th {
  vertical-align: middle!important;
}

input[type=range] {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*required for proper track sizing in FF*/
  width: 300px;
  font: 13.3333px Arial!important;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 300px;
  height: 8px;
  background: #d7dcdf;
  border: none;
  border-radius: none;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #2c3e50;
  margin-top: -4px;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ccc;
}

input[type=range]::-moz-range-track {
  width: 300px;
  height: 5px;
  background: #ddd;
  border: none;
  border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}


/*hide the outline behind the border*/

input[type=range]:-moz-focusring {
  outline: none;
  outline-offset: -1px;
}

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 0;
  /*remove default tick marks*/
  color: transparent;
}

input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}

input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}

input[type=range]:focus::-ms-fill-lower {
  background: #888;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}


/* input box style */

#chance {
  text-align: center;
  width: 50px;
  background-color: #2c3e50;
 ...

JavaScript

$(document).ready(function() {
  console.log("ready!");

  ranger();

  if (!!$(this).attr('data-original-font')) {} else {
    setOriginalSize();
  };

  function setOriginalSize() {
    $('*').not('.zoom-control').each(function() { //Use * to select everything on the page 
      $(this).attr('data-original-font', $(this).css('font-size'));

      $(this).attr('data-line-height', $(this).css('line-height'));
    });
  };
  $('#chanceSlider').on('change', function() {
    $('#chance').val($('#chanceSlider').val());
    var zoomLevel = parseFloat($('#chance').val());
    $('*').each(function() { //Use * for everything
      var k = parseFloat($(this).attr('data-original-font'));
      var redSize = (k + zoomLevel); //here, you calculate the size
      $(this).css('font-size', redSize, '!important'); //Insert inline style

      //var g = parseFloat($(this).attr('data-line-height'));
      //var lineSize = (g + zoomLevel); //here, you calculate the size
      //console.log(lineSize);
      //$(this).css('height', lineSize, '!important'); //Insert inline style
      $(this).css('padding', '2'); //Insert inline style
      //vertical-align:middle;
    });
  });

  function ranger() {
    $('body').prepend('<div class="zoom-control"><input type="text" id="chance" class="text" value="0"><input type="range" id="chanceSlider" class="vHorizon" min="-2" max="10" step="0.2" value="0"></div>')
  };
});