Links

Redirect

Obviously a symlink is best, but sometimes you need for people to type a directory like http://xed.ch/r and see a PDF.

<!DOCTYPE html>
<html>
<meta http-equiv="location" content="URL=http://xed.ch/resume/resume.pdf" />
<head><title>One Cool Resume On The Way</title></head>
<body>
  <p>Attempting to redirect to: <b>http://xed.ch/resume/resume.pdf</b></p>
  <p>Looks like you sensibly have disabled JavaScript! You win the internet!</p>
  <p><a href="http://xed.ch/resume/resume.pdf">Click here</a> to do what must be done.</p>
  <script>window.location.href="http://xed.ch/resume/resume.pdf";</script>
</body> </html>

Miscellaneous

This is an interesting way to specify a URL. Just type this in the address bar of the browser.

javascript:location.href="http://www.xed.ch";

Automatically Refreshing A Page

This will reload the page every 2 seconds.

<body onload="javascript:setTimeout(&quot;location.reload(true);&quot;,2000);">

How Big Is the Window or Screen

Note this is not recommended for serious purposes without way more research due to browser inconsistencies etc. This is just a quick tip that helped me get some information about my browser’s situation.

<html>
<body onload="update_size()" onresize="update_size()">
<script>
function update_size() {
    // Screen dimensions 1920x1280, that kind of thing.
    var dispw = window.screen.availWidth;
    var disph = window.screen.availHeight;
    // Visible document size.
    var width = window.innerWidth
                 || document.documentElement.clientWidth
                 || document.body.clientWidth;
    var height = window.innerHeight
                 || document.documentElement.clientHeight
                 || document.body.clientHeight;
    document.getElementById("showw").innerHTML = width.toString();
    document.getElementById("showh").innerHTML = height.toString();
    document.getElementById("showsw").innerHTML = dispw.toString();
    document.getElementById("showsh").innerHTML = disph.toString();
}
</script>
Screen dimensions: <span id="showsw">NA</span>, <span id="showsh">NA</span> <br>
Document dimensions: <span id="showw">NA</span>, <span id="showh">NA</span>
</body>
</html>

Toggle Two Things

I created this to allow the user to toggle between displaying two SVG charts so that the differences between them could be more apparent.

<html>
<body>
<head><title>Toggle Test</title></head>

<script type="text/javascript">
  top.n= 0
  function toggle_div() {
    n++; n%=2;
    if (n) {
      document.getElementById('one').style.display='none';
      document.getElementById('two').style.display='block';
    }
    else {
      document.getElementById('one').style.display='block';
      document.getElementById('two').style.display='none';
    }
  }
</script>

<span style="background-color:#cecece;"
    onclick="toggle_div();">Click me to toggle.</span>
<div id="two" style="display:none;">TWO</div>
<div id="one">ONE</div>

</body>
</html>

This is embeddable so you can try it out right here.

Click me to toggle.
ONE

Radio Selection

<script type="text/javascript">
  function radio_select(I) {
    var items= document.getElementsByClassName("item");
    var x; for (x = 0; x<items.length; x++) { items[x].style.display = "none"; }
    document.getElementById(I).style.display='block';
  }
</script>

<div class="item" id="A" style="display:block;"> <p><b>Algeria</b></p> </div>
<div class="item" id="B" style="display:none;"> <p><b>Bulgaria</b></p> </div>
<div class="item" id="C" style="display:none;"> <p><b>Cambodia</b></p> </div>
<div class="item" id="D" style="display:none;"> <p><b>Dominican Republic</b></p> </div>
<div class="item" id="E" style="display:none;"> <p><b>Egypt</b></p> </div>
<div class="item" id="F" style="display:none;"> <p><b>France</b></p> </div>
<div class="item" id="G" style="display:none;"> <p><b>The Gambia</b></p> </div>

Click search term to select.
<table border="on">
<tr>
<td><span style="background-color:#ce7777;" onclick="radio_select('A');">Algeria</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('B');">Bulgaria</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('C');">Cambodia</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('D');">Dominican Republic</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('E');">Egypt</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('F');">France</span></td>
<td><span style="background-color:#ce7777;" onclick="radio_select('G');">The Gambia</span></td>
</tr>
</table>

This is embeddable so you can try it out right here.

Algeria

Click search term to select.
Algeria Bulgaria Cambodia Dominican Republic Egypt France The Gambia

HTML5

HTML 5 Sliders

HTML 5 is fully of fancy new features. One that caught my eye for a particular project I was working on is the new <input> attribute range. This basically allows slider bars to be an input method for HTML forms. That’s almost never useful (which is why I suspect I rarely see this in the wild) but when it is, it is very nice that it’s built in these days. Here’s the official docs.

Here’s an example I made that shows off a minimal use which updates the page, i.e. no form submission necessary for being useful.

<html> <body onload="document.getElementById('SValue').innerHTML=128">
    0 <input type="range" max="255"
    onchange="document.getElementById('SValue').innerHTML=this.value" /> 255
    Value: <b id="SValue" >JavaScript Disabled!</b> <br/>
    0 <input type="range" id="S1" max="300" value="5"
    onchange="document.getElementById('S2Value').setAttribute('width',this.value)" />
    300 <br/>
    <svg> <rect id="S2Value" x="0" y="0" width="5" height="10"/> </svg>
</body> </html>
0 255 Value: 128
0 300

HTML 5 Canvas Tag

The canvas feature of HTML5 really changed the potential of Javascript for me. Being able to arbitrarily put points on the screen changed Javascript, for me, from a clumsy form box validation system to a much more interesting tool capable of really anything.

Today the problem with the canvas tag is that there is these days often an even better solution, SVG. Javascript also can control that. There are a lot of similarities as far as the Javascript goes. The main difference seems to be performance in certain contexts. If you don’t need the browser (as opposed to your Javascript code) to keep track of entities, then canvas is a much quicker way to render vectors to bitmap. However, if you want to have the browsers keep track of things so that you can, for example, style an element with a style sheet, then SVG is the best method. More details about this decision can be found here.

An Example Of The canvas Tag
<p>
<canvas id="canvas" width="838" height="220"> </canvas>

<script>
  var canvasContext =
     document.getElementById("canvas").getContext("2d");
  canvasContext.fillStyle = 'rgba(225, 225, 225, 1)';
  canvasContext.fillRect(0, 0, 838, 220);
  canvasContext.fillStyle = 'rgba(125, 12, 200, 0.7)';
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(25, 212, 200, 0.7)';
  canvasContext.stroke();

  canvasContext.beginPath();
  canvasContext.arc(350, 110, 100, Math.PI , Math.PI *4);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'butt';
  canvasContext.strokeStyle = 'rgba(202, 2, 202, 0.7)';
  canvasContext.stroke();
</script>
</p>

Output Of canvas Tag Example

Auto Complete

It’s all the rage to have a web utility that has some kind of form box that just can’t wait until you’re done typing. It has to automatically suggest a list of possibilities which remain, based on the constraint of what you’ve typed so far. This functionality is pretty well implemented in jQuery and there’s no need to reinvent the specific JavaScript code. However, using this effectively can be somewhat tricky. Most web resources seem to focus on a language, which for search engine purposes I will not mention, that is infamous for being a disaster with respect to web security. There are alternatives! The autocomplete function of jQuery can operate in many ways and the mode where it requests an external link to give it hints can be crafted in any way you like. I’m going to show how to use autocomplete with straight Python with no frameworks or exotic dependencies whatsoever.

First you need your HTML:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>A Tiny Test Of jQuery Autocomplete</title>
    <link rel="stylesheet" href="./jquery-ui.css" />
    <script src="./jquery-1.8.2.js"></script>
    <script src="./jquery-ui.js"></script>
    <script>
    $(function() { $( "#tags" ).autocomplete({ source:"./tinysuggester.py" }); });
    </script>
</head>

<body>
<p>Test autocomplete with a Unix command.</p>
<div class="ui-widget"><label for="tags">Search: </label><input id="tags" /></div>

<p>Look <a href="http://api.jqueryui.com/autocomplete/">here</a>
for specifications on jquery's autocomplete function. </p>
<p>These required resources can be installed locally to ensure stability.</p>
<ul>
<li><a
href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
The jquery CSS</a></li>
<li><a href="http://code.jquery.com/jquery-1.8.2.js">
The JavaScript of jQuery itself</a></li>
<li><a href="http://code.jquery.com/ui/1.9.0/jquery-ui.js">
The JavaScript of jQuery's UI widgets</a></li>
<li><a href="./tinysuggester.py">
The suggester script</a></li>
</ul>
</body>
</html>

First note that you need the jQuery software. Its location is outlined in the bottom part of the HTML. Just download this and keep a local copy. You’ll need the general jQuery stuff, the jQuery User Interface module and the jQuery style sheet (CSS) to make it all work.

The second thing to note is that the part of this web page that is important to us happens in the last <script> tag. This is where the autocomplete function is deployed. The important thing to notice is the source reference. This is where the completion routine will take its list of suggestions from. It turns out that you can put a static list there ( formatted either {"hint1":"rhino", "hint2":"rhesus monkey"} or ["ash","alder","aspen"] - but don’t use single quotes!).

In our example, the JavaScript will be having the browser call another URL and take the contents of what is delivered and make that into the suggestion list. So, you need a web resource that can produce the desired list. Again, this could be static, but just living on the remote server. There’s not much point to this. What you’re really after is spontaneously generating a list based on a sensible heuristic applied to your data set.

The obvious examples are to suggest all words that are in your master list which start with the letters the user just typed. For smaller lists, you could look for all records which contain the typed letters anywhere in them. You could do either of those things but with a cut off limit so no more than 10 or 50 suggestions are ever returned. If your data set is very big and contains other hints, you could do a quick sort by relevance (maybe most popular) before sending only the first 10.

Here is an example implemented in Python which will prompt with Unix commands (just from /usr/bin) which begin with the letters the user has typed in. Note that when the user types some stuff, there are some (controllable) parameters that tell the jQuery routines how long to wait and how persistent to keep submitting autocomplete attempts. When a request is made, however, the URI that you specify in the source field will be called with an additional CGI style argument appended. If the URI is ./tinysuggester.py as in our example and the user types "ps2", the client will make a request that looks like ./tinysuggester.py?term=ps2. Here’s what you can do with that.

#!/usr/bin/python
import os

def getpossibles(t):
    MAX= 10       # Return no more than this many suggestions.
    ol= list()    # Output list.
    for f in os.listdir('/usr/bin'):
        if f.startswith(t):
            ol.append(f)
            MAX -= 1
        if not MAX:
            break
    return ol

# Handle the input which will look like this:
#  /path/suggester.py?term=ps2
term= os.environ["QUERY_STRING"].split('=')[1]

possibles= getpossibles(term)

content_type= 'Content-type: text/plain\n\n'
print content_type + str(possibles).replace("'",'"')

As you can see the complex part is in the function getpossibles. This is the real essence of what the autocomplete is supposed to do for your application which is why you must make your own. Here’s an example of another one that uses a static list and no limits.

def getpossibles(t):
    db= ["january", "february", "march", "april", "may", "june",
         "july", "august", "september", "october", "november", "december"]
    return [w for w in db if t in w]  # Return list of possibles.

You could (and often will need to) write one that makes a database look up and returns the query results.