pxonbox.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>pixels on box demo</title>
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    var move_box   = document.getElementById('mb');
    var static_box = document.getElementById('sb');

    move_box.dot   = document.getElementById('md');
    static_box.dot = document.getElementById('sd');

    get_styles([move_box, static_box]);

    $(move_box).css("opacity", 0.6);
    $(move_box).mousemove(function(e) { moving(static_box, move_box, e) });
    $(document).mousemove(function(e) { moving(static_box, move_box, e) });
});

get_styles = function(elems) {
    $.each(elems, function(e) {
        this.w   = this.offsetWidth  / 2;
        this.h   = this.offsetHeight / 2;
        this.x   = this.offsetLeft   + this.w;
        this.y   = this.offsetTop    + this.h;
        this.ang = Math.abs( Math.atan(this.h / this.w) );
    });
}

moving = function(static, move, e) {

    // place "move"
    move.style.left = (e.clientX + 10) + "px";
    move.style.top  = (e.clientY - 30) + "px";
    move.x = move.offsetLeft + move.w;
    move.y = move.offsetTop  + move.h;

    $.each([[static,move], [move,static]], function() {

        // find out width and height between the two boxes
        var width  = this[1].x - this[0].x;
        var height = this[1].y - this[0].y;
        var ratio  = height / width;

        // init position of dot
        var px = this[0].x;
        var py = this[0].y;
        var dir;

        // box A is above or belove box B
        if(Math.abs( Math.atan(ratio) ) > this[0].ang) {
            dir = this[1].y > this[0].y ? 1 : -1;
            py += dir * this[0].h;
            px += dir * this[0].h / ratio;
        }

        // box A is left or right to box B
        else {
            dir = this[1].x > this[0].x ? 1 : -1;
            py += dir * this[0].w * ratio;
            px += dir * this[0].w;
        }

        // place dot
        this[0].dot.style.left = (px - 2) + "px";
        this[0].dot.style.top  = (py - 2) + "px";
    });
}
</script>
<style type="text/css">
body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
h2 {
    font-size: 1.4em;
    margin: 1em;
    padding: 0;
}
p, pre {
    margin: 0 2em;
}
pre {
    line-height: 1.1em;
    float: left;
}
img {
    float: right;
    border-left: 1px solid #777777;
    border-bottom: 1px solid #777777;
}
#mb, #md, #sd {
    position: absolute;
    top: 45%;
    left: 45%;
}
#mb {
    background: blue;
    height: 30px;
    width: 40px;
}
#sb {
    background: red;
    height: 80px;
    width: 60px;
    margin-left: 30em;
}
#md, #sd {
    background: black;
    height: 4px;
    width: 4px;
}
</style>
</head>

<body>
<img src="./gfx/pxonbox.png" alt="pxonbox">
<h2>Mission</h2>
<p>
To place a dot on the border of the blue and red box. The dot's position
is decided by a line, drawn from the center of the red box to the center of
the blue box.
</p>
<h2>Code</h2>
<pre>
// find out width and height between the two boxes
var width  = boxA.x - boxB.x;
var height = boxA.y - boxB.y;
var ratio  = height / width;

// init position of boxB
var px = boxB.x;
var py = boxB.y;
var dir;

// box A is above or belove box B
if(Math.abs( Math.atan(ratio) ) > boxB.ang) {
    dir = boxA.y > boxB.y ? 1 : -1;
    py += dir * boxB.h;
    px += dir * boxB.h / ratio;
}

// box A is left or right to box B
else {
    dir = boxA.x > boxB.x ? 1 : -1;
    py += dir * boxB.w * ratio;
    px += dir * boxB.w;
}

// place dot
dot.style.left = (px - 2) + "px";
dot.style.top  = (py - 2) + "px";
</pre>
<div id="sb"></div>
<div id="mb"></div>
<div id="md"></div>
<div id="sd"></div>
</body>

</html>