Jump to content

Mysterious numbers

dksvertix

By dksvertix
in JavaScript

 Share

Recommended Posts

dksvertix Newbie

dksvertix

Posted
Posted (edited)

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>
Edited by dksvertix
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Are you talking about the 7 and 10? In general, those are referred to as magic numbers and whoever wrote that code is using a bad practice. It's not good to just put numbers like that in calculations, because like you're finding out other people reading the code have no idea what they mean. It would have been easier to understand if all of those numbers were defined as variables, and then the variables were used in the calculations. e.g.:

var popup_width = 264;var half_width = popup_width / 2; // 132var offset_right = 7;var offset_left = 10;var offset_top = 30;
Now they could at least use those variables and have a little meaning instead of just putting numbers in there.As far as what those numbers actually mean, they may relate to the width of a scrollbar. 17px is close to scrollbar width.
Link to comment
Share on other sites
dksvertix Newbie

dksvertix

Posted
  • Author
Posted

Yes, that is a good idea. Many similar numbers are just confusing for the eye.

 

Well I figured this much out about these magic numbers appearing from nowhere - there are no magic numbers! document.body.offsetWidth was creating the excess mess in the first half and then it was transfered to second half with the help of bad logic.

 

But the day is saved now.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted (edited)

Really? i used to have problems with scrollbars being different widths on different browsers until i stuck with creating a flexible layout design that did not matter what the scrollbar width was, mind you that was many, many, browser versions ago and not really taking any notice of them since.

Edited by dsonesuk
Link to comment
Share on other sites
dksvertix Newbie

dksvertix

Posted
  • Author
Posted

Yeah, it is pretty specific. Currently 17px is valid for unmodified Firefox and IE11. A more universal workaround would indeed be to create invisible elements and measure their width differences - I think that was the way to do it - to check if there is a scroll bar and what is its width.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...