Created January 18, 2001

Modify The Box (dhtml experiment, 2001)

\ ^ /
«   »
/ v \

. o O

color

HTML

<form action="./" method="get" onsubmit="return false;">
<pre class="ourControl">
<a href="javascript:ourMove(-1,-1,'ourBox')">\</a> <a href="javascript:ourMove(0,-1,'ourBox')">^</a> <a
        href="javascript:ourMove(1,-1,'ourBox')">/</a>
<a href="javascript:ourMove(-1,0,'ourBox')">&laquo;</a>   <a href="javascript:ourMove(1,0,'ourBox')">&raquo;</a>
<a href="javascript:ourMove(-1,1,'ourBox')">/</a> <a href="javascript:ourMove(0,1,'ourBox')">v</a> <a
        href="javascript:ourMove(1,1,'ourBox')">\</a>

<a href="javascript:ourSize(0.25,'ourBox')">.</a> <a href="javascript:ourSize(1.5,'ourBox')">o</a> <a
        href="javascript:ourSize(2,'ourBox')">O</a>

<select onchange="changeColor(this.options[this.selectedIndex].value,'ourBox')"><option
        value="#CCC">color</option></select>
</pre>
</form>
<div id="ourBox"></div>
<div id="warn">this won't work in netscape 4. i'm sorry.</div>

JavaScript

/* made by joe crawford in a fit of madness on january 18 2001 */
/* https://artlung.com */
var holdX = 300;
var holdY = 300;
var holdDim = 10;

function ourMove(x, y, obj) {
    if (document.getElementById) {
        prot = document.getElementById(obj);
        holdX = holdX + (x * 10);
        holdY = holdY + (y * 10);
        prot.style.left = holdX + 'px';
        prot.style.top = holdY + 'px';
    }
}

function ourSize(ourFactor, obj) {
    if (document.getElementById) {
        prot = document.getElementById(obj);
        holdDim = holdDim * ourFactor;
        prot.style.height = holdDim + 'px';
        prot.style.width = holdDim + 'px';
    }
}

function changeColor(c, obj) {
    if (document.getElementById) {
        prot = document.getElementById(obj);
        prot.style.backgroundColor = c;
        prot.style.color = c;
    }
}

function populateColors() {
    ourColors = new Array('red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet');
    for (i = 0; i < ourColors.length; i++) {
        var addCol = new Option(ourColors[i], ourColors[i]);
        document.forms[0].elements[0].options[i + 1] = addCol;
    }
}

function stupidNS4() {
    if (document.layers) document.layers['warn'].visibility = 'visible';
}

function init() {
    stupidNS4();
    populateColors();
}

window.onload = init;

SCSS

/* made by joe crawford in a fit of madness on january 18 2001 */
/* converted to SCSS on november  30 2024 */
#ourBox {
  background-color: #CCC;
  color: #CCC;
  position: absolute;
  height: 10px;
  width: 10px;
  left: 300px;
  top: 300px;
  line-height: 1px;
  font-size: 1px;
}

pre.ourControl {
  width: min-content;
  background: #eee;
  border: 3px solid #ccc;
  padding: 1rem;
  font-size: 1.5rem;

  * {
    font-size: 1.5rem;
  }

  a {
    color: blue;
    text-decoration: none;
    outline: none;
    background-color: transparent;

    &:link {
      color: blue;
      background-color: #FFF;
    }

    &:visited {
      color: blue;
      background-color: #FFF;
    }
  }
}

#ourControl {
  position: absolute;
  top: 0;
  left: 0
}

#warn {
  visibility: hidden;
  position: absolute;
}