Right Click Menu

by Tgwizman

HTML

<div id="contextmenu">
    Welcome to my right click context menu thingy.
    <e>:)</e>
    <br>Enjoy <a href="http://jsfiddle.net/Tgwizman/8CtVf/">"The Code!"</a>
</div>

CSS

#contextmenu {
    margin: 0px;
    padding: 10px;
    position: absolute;
    display: none;
    width: 100px;
    border: 1px solid #000;
    background-color: #FFC;
    z-index: 0;
}

e {
    margin: 0px;
    padding: 0px 10px;
    display: inline-block;
    text-align: center;
    transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

JavaScript

var mousePos = [0, 0],
    lastMousePos = [-1, -1];

document.oncontextmenu = function() {
    return false;
};

document.onmousemove = function(e) {
    var posx = 0;
    var posy = 0;
    if (!e) {e = window.event;}
    if (e.pageX || e.pageY) {
        posx = e.pageX;
        posy = e.pageY;
    } else if (e.clientX || e.clientY) {
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    mousePos = [posx, posy];
};

document.onmousedown = function(e) {
    rcm = document.querySelector('#contextmenu');
    console.log(rcm.style.width);
    if (mousePos[0] > lastMousePos[0] &&
        mousePos[0] < lastMousePos[0] + rcm.clientWidth &&
        mousePos[1] > lastMousePos[1] &&
        mousePos[1] < lastMousePos[1] + rcm.clientHeight) {
    } else if (e.which == 3) {
        lastMousePos = mousePos;
        rcm.style.display = 'block';
        rcm.style.top = mousePos[1] + 'px';
        rcm.style.left = mousePos[0] + 'px';
    } else {
        rcm.style.display = 'none';
    }
};