I recently started learning JS, I am not an expert in english language and I need help understanding from where do 2 numbers come from. Marked them with MYSTERIOUS NUMBER at the bottom part. I think I am doing it right enough, since all this does do what I wanted to achieve.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>The Proverbs of Solomon</title> <style type="text/css">html { /* Makes text better for readability */ text-shadow: 0 0 #000; font-family: sans-serif; /* default sans */}.ht { font-size: xx-large;}.nt { font-size: large;}.tf { font-size: small;}.tsw { width: 655px;}.ct { text-align: center;}#popup { position: absolute; left: -300px; width: 262px; border: 1px solid #000; background-color: #fff; visibility: hidden; z-index: 100;}.ph { color: #fff; background-color: #000;}.dwph { /* Must be here */}</style></head><body><div id="popup"></div><br /><br /><table width="100%"> <tr> <td> <table align="center" class="tsw"> <tr> <th> <noscript> <div class="ph nt">Enable JavaScript to allow word definition popups</div> <br /> <br /> </noscript> <br /> <span class="ht">The <span class="dwph" onmouseover="define(proverb)" onmouseout="nop()">Proverbs</span> of</span> </th> </tr> <tr> <th> <span class="ht">Solomon</span> </th> </tr> <tr> <td class="ct nt"> <br /> <br /> The Argument </td> </tr> <tr> <td class="ct nt"> <br /> ...brief sentences, which partly contain <span class="dwph" onmouseover="define(doctrine)" onmouseout="nop()">doctrine</span>, and partly manners... </td> </tr> </table> </td> </tr></table><script>var w = '<table width="100%" style="border-collapse: collapse"><tr><th class="ph">', d = '</th></tr><tr><td class="ct">', f = '</td></tr></table>';var proverb = w + 'Proverb' + d + 'A brief popular saying that gives advice...' + f;var doctrine = w + 'Doctrine' + d + 'A set of ideas or beliefs that are taught or believed to be true.' + f;var allure = w + 'Allure' + d + 'To entice by charm or attraction.' + f;var vSc = false;var hghlgd = false;var enablePop;var ppclss = document.getElementsByClassName("dwph");var wcou = ppclss.length;var pop = document.getElementById("popup");function define(word) { // element.offset - element with padding and borders, ignores margin and decreases on scroll bar presence // window.inner - browser window viewport including, if rendered, the scroll bar // element.offset is always(?) 16 pixels less than window.inner // And scroll bar is 17(?) pixels wide if (document.body.offsetWidth + 16 != window.innerWidth) { vSc = true; } else { vSc = false; } enablePop = true; pop.innerHTML = word; pop.style.visibility = "visible";}function nop() { enablePop = false; pop.style.visibility = "hidden"; /* Official solution for IE's problem - if word with function hook is inside last popup's render area, IE will reuse last popup's coordinates */ pop.style.left = "-300px";}function getcrXY(cod) { if (hghlgd == false) { for (wnr = 0; wnr < wcou; wnr++) { ppclss[wnr].style.textDecoration = "underline"; ppclss[wnr].style.cursor = "help"; } hghlgd = true; } if (enablePop == true) { var crX = cod.pageX, crY = cod.pageY; var wiW = window.innerWidth; var wpXO = window.pageXOffset; var dboW = document.body.offsetWidth; // #popup style makes popup 264 pixels wide // Right edge without vertical scroll bar // So... what adds 7 pixels to pageX? if (vSc == false && crX + 132 - 7 >= dboW + wpXO) { // <-- FIRST MYSTERIOUS NUMBER pop.style.left = wpXO + wiW - 264 + "px"; // With vertical scroll bar } else if (vSc == true && crX + 132 - 7 >= dboW + wpXO) { pop.style.left = wpXO + wiW - 264 - 17 + "px"; // Left edge // 10 pixels? From where do these numbers come from? } else if (crX - 132 + 10 < 0 + wpXO) { // <-- SECOND MYSTERIOUS NUMBER pop.style.left = 0 + wpXO + "px"; // No obstructions } else { pop.style.left = crX - 132 + 10 + "px"; } pop.style.top = crY + 30 + "px"; }}document.onmousemove = getcrXY;</script></body></html>