Increase size of entire HTML page?

Question

I know it's not good practice, but I made a page with almost entirely fixed sizing.

Also, there is a lot of JavaScript and interactive parts dealing with the coordinates of your cursor etc.

If I wanted to increase everything by a certain size, I could manually change every number to multiply or divide by a "zoom" variable. However, in addition to that being incredibly time consuming while using regex with find and replace, there is still a lot that could possibly go wrong.

Is there some CSS (or HTML or JavaScript) attribute/function that would allow me to scale up the entire thing? I know I can use transform: scale(x) in CSS, along with some other similar things, but is there a way everything can be scaled including the cursor coordinates?

Thank you!

Edit: Refer to the comments for more info.

$(document).ready(main);
function main(){

"use strict";

var popup = window;
var doc = document;
var $body = $('body', doc)[0];
var $inputs = doc.getElementsByClassName('note');
var $paragraphs = doc.getElementsByTagName('p');

doc.title = "Assignment Notebook";

$body.innerHTML = "";

var images = {
  left : "https://i.imgur.com/xlnvl6M.png",
  right : "https://i.imgur.com/o8XT5X1.png"
}

var snapPoints = [62,84,106,128,150,172,194,216,238,261,283,305,327,349,371,393,415,438,462,484,506,528,550,572,594,616];

var inputs = {};

var d = new Date();
var week;
function setWeek() {
  week = [];
  for (var i = 1; i < 8; i++) {
    var _d = new Date(d);
    week[i-1] = new Date(_d.setDate(_d.getDate() - _d.getDay()+i));
  }
}
setWeek();
var months = {0: 'January',1: 'February',2: 'March',3: 'April',4: 'May',5: 'June',6: 'July',7: 'August',8: 'September',9: 'October',10: 'November',11: 'December'};
var df;
function updateFormat(n) {
  df = formatDate(week[n].getDay()-1, '');
}
function checkArr() {
  var start = left ? 0 : 3;
  var end = left ? 3 : 7;
  for (var i = start; i < end; i++) {
    updateFormat(i);
    if (!inputs[df]) {
      inputs[df] = [];
    } else if (JSON.stringify(inputs[df]) != "[]") {
      for (var j = 0; j < inputs[df].length; j++) {
        let data = inputs[df][j];
        createInput(data.x, data.y, data.fontFamily, data.fontSize, data.width, data.bg, data.txt);
      }
    }
  }
}
var left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
$body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
$body.style.backgroundSize = "480px 680px";
$body.style.backgroundRepeat = "no-repeat";
$body.style.margin = "0";
checkArr();
var ctx = $('canvas', doc)[0].getContext('2d');
var fontFamily = 'sans-serif';
var fontSize = 14;
ctx.font = fontSize+' '+fontFamily;
function createP (text, family, weight, size, x, y) {
  var p = doc.createElement("P");
  p.setAttribute("type", "text");
  p.style.position = 'fixed';
  p.style.fontFamily = family;
  p.style.fontWeight = weight;
  p.innerHTML = text;
  p.style.top = y;
  p.style.left = x;
  p.style.fontSize = size;
  p.style.userSelect = 'none';
  $body.appendChild(p);
}
function formatDate(dayIndex, join) {
  if (dayIndex == -1) dayIndex = 6;
  return months[week[dayIndex].getMonth()]+join+week[dayIndex].getDate();
}
left ? (
  createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
  createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
  createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
) : (
  createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
  createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
  createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
  createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
);
function createInput(x, y, ff, fs, width, bg, txt) {
  fs = parseInt(fs);
  var input = doc.createElement("INPUT");
  input.setAttribute("type", "text");
  input.setAttribute("placeholder", "Type here!");
  input.style.position = 'fixed';
  input.classList.add('note');
  $body.appendChild(input);
  input.style.left = x;
  input.style.top = snap ? getClosest(y+fs)-fs : y;
  input = $inputs[$inputs.length-1];
  typeof txt != "string" ? input.focus() : input.value = txt;
  input.style.backgroundColor = bg;
  input.style.border = 'none';
  input.style.outline = 'none';
  input.style.width = width;
  input.style.fontFamily = ff;
  input.style.fontSize = fs;
  input.style.backgroundColor = bg;
  input.draggable = true;
  input.addEventListener('keyup', e => {
    ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');
    e.path[0].style.width = !!e.path[0].value ? ctx.measureText(e.path[0].value).width+3 : 86;
  });
}

var diff = {
  x : null,
  y : null
}

doc.addEventListener('dragstart', e => {
  diff.x = e.clientX - parseInt(e.target.style.left);
  diff.y = e.clientY - parseInt(e.target.style.top);
});
doc.addEventListener('dragend', e => {
  let height = parseInt(window.getComputedStyle(e.target).getPropertyValue('font-size'));
  e.target.style.left = e.clientX-diff.x;
  e.target.style.top = snap ? getClosest(e.clientY-diff.y+height)-height : e.clientY-diff.y;
});

doc.addEventListener('keyup', e => {
  if (doc.activeElement.tagName != "INPUT" && e.keyCode == 37 || e.keyCode == 39) {
    var inpLen = $inputs.length;
    var pLen = $paragraphs.length;
    for (var i = 0; i < inpLen; i++) {
      $inputs[0].remove();
    }
    for (var i = 0; i < pLen; i++) {
      $paragraphs[0].remove();
    }
    if (e.keyCode == 37) {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()-3));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+1));
      }
    } else {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+4));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+8));
      }
    }
    setWeek();
    left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
    $body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
    left ? (
      createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
      createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
      createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
    ) : (
      createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
      createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
      createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
      createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
    );
    checkArr();
  }
});

doc.addEventListener('dblclick', e => {
  if (doc.activeElement.tagName != "INPUT" && !deleteMode) {
    createInput(e.clientX, parseInt(e.clientY)-9.5, fontFamily, fontSize, 86, "transparent", true);
  }
});
var snap = false;
var deleteMode = false;
function getClosest(n) {
  if (isNaN(n) || typeof n != 'number') err('Number isn\'t of type "number", or it is NaN');
  return snapPoints.reduce((a, b) => Math.abs(b - n) < Math.abs(a - n) ? b : a);
}

function err(error) {
  console.log(new Error(error));
}
}

KalVentures · Accepted Answer

One work around you can use to scale the whole document since you made the whole page fixed scaling, would be to include the whole page into an iframe (https://www.w3schools.com/html/html_iframe.asp) which spans the whole page. This way you can play around with scaling/zoom of the iframe but the user will only see that page inside the iframe.

You can play around with the css of iframe to get the correct way to display the inner page.

Increase size of entire HTML page?

Answers (1)

Related Questions