StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You should only be positioning it with <code>top</code> and <code>left</code>, because if you try to do it the way you're doing it, you are going to end up with very messed up properties, such as a <code>top</code> of say 5 but a <code>bottom</code> of say 100.</p> <p>Also, you should use a unit, preferable pixels, for the <code>top</code> and <code>left</code> properties.</p> <p>So, all you really need to do is change your functions to look like:</p> <pre><code>function left(id) { document.getElementById(id).style.left.match(/^([0-9]+)/); var current = RegExp.$1; // get just the number and not the units document.getElementById(id).style.left = current - 1 + 'px'; // taking advantage of JavaScript's strange but sometimes useful type conversion. The subtraction converts it to an int and the addition converts it back to a string. } function right(id) { document.getElementById(id).style.left.match(/^([0-9]+)/); var current = RegExp.$1; document.getElementById(id).style.left = parseInt(current) + 1 + 'px'; // here we can't use that trick } function up(id) { document.getElementById(id).style.top.match(/^([0-9]+)/); var current = RegExp.$1; document.getElementById(id).style.top = current - 1 + 'px'; } function down(id) { document.getElementById(id).style.top.match(/^([0-9]+)/); var current = RegExp.$1; document.getElementById(id).style.top = parseInt(current) + 1 + 'px'; } </code></pre> <p>Also, you should be using <code><script type="text/javascript"></code> instead of <code><script language="JavaScript"></code>. The latter form is deprecated.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload