unraveled

JavaScript Should Enhance, but Not Take Away

That last post got me thinking about JavaScript and it’s use on the Web. A few years ago, scripted web widgets were all the rage. Many sites were using JavaScript to create enhanced interfaces. Unfortunately, many of those sites turned out to be unusable due to poor code, poor testing or a lack thereof. Other sites might have been usable to some, but completely inaccessible to disabled users.

Recently I’ve seen a lot more widgets that enhance the user experience without taking away from it. These widgets give users with JavaScript enabled browsers a little help using the site, but don’t render pages inaccessible for non-JavaScript users.

A few examples of this kind of widget can be found right here on this weblog. On each permalink page, I use four different mini-scripts, which (hopefully) make commenting easier. Can you find them all? (The buttons only count as one!) I’ll reveal the different scripts next week.

Comments

  1. Number one - bolding, italicising and linking through keyboard shortcuts.
    <body onkeypress=”mtShortCuts();”>
    function mtShortCuts () {
    if (event.ctrlKey != true) return;
    if (event.keyCode == 1) insert_link();
    if (event.keyCode == 2) format_sel(‘b’);
    if (event.keyCode == 9) format_sel(‘i’);
    }
    function format_sel(v) {
    var str = document.selection.createRange().text;
    document.comments.text.focus();
    var sel = document.selection.createRange();
    sel.text = “<” + v + “>” + str + “</” + v + “>”;
    return;
    }
    function insert_link() {
    var str = document.selection.createRange().text;
    document.comments.text.focus();
    var my_link = prompt(“Enter URL:”,”http://”);
    if (my_link != null) {
    var sel = document.selection.createRange();
    sel.text = “<a href="” + my_link + “">” + str + “</a>”;
    }
    return;
    }

    Number two - adding ‘http://’ to the URL field when selecting it.
    <input name=”url” size=”30” class=”commentInput” onfocus=”if (this.value == ”) this.value=’http://’” onblur=”if (this.value == ‘http://’) this.value = ”” />

    Number three - Making the ‘Remember my information’ text toggle the checkbox.
    <span onclick=”if (document.forms.comments.bakecookie.checked == false) document.forms.comments.bakecookie.checked = true; else document.forms.comments.bakecookie.checked = false” onmouseover=”this.style.cursor = ‘hand’”>

    Number four - The buttons for bolding, italicising and linking.
    <img
    onclick=”format_sel(‘b’);”
    class=”toolbarButtonup”
    onmousedown=”this.className=’toolbarButtondown’;”
    onmouseup=”this.className=’toolbarButtonup’;”
    onmouseout=”this.className=’toolbarButtonup’;”
    src=”../images/bold.gif”
    width=”16” height=”16”
    align=”middle”
    alt=”Bold (Control-Shift-B)” />


    Problems with your approach to all these:
    - (3) Cursor should be ‘pointer’ (W3C) instead of ‘hand’ (IE). You discriminate browsers supporting the correct value instead of the IE proprietary one. You could easily build a mechanism for deciding which one to use.
    - (1,4) You’re using the IE proprietry text ranges instead of using the W3C mechanism, rendering browsers supporting the standard incapable of using the features, instead of selecting what do use based on whether the W3C method exists or not.

    // Liorean

    Liorean on 19 Oct 02

  2. Thanks for your comment, Liorean. I’ve tried to stick to standards as much as possible, but apparently I’ve been focusing a little too much on the markup on not enough on the scripts. I’ll look into the W3C standards and adapt my scripts to them wherever possible.

    Joshua on 20 Oct 02

  3. Okay, I’m working on 1 and 4 above, but unfortunately, I’m no script monkey. I don’t know the W3C equivalent of IE text ranges. Can anyone help?

    Joshua on 25 Oct 02

  4. It looks like this won’t be easily resolved until Mozilla properly supports getSelection() or selectionStart and selectionEnd. See the Movable Type Support Forum for the lowdown.

    Joshua on 26 Oct 02

  5. Newbies to web publishing often mess up their sites. They make their content inaccessible due to their wacky layouts, distracting animations and JavaScript, and excessive slang. This is ESPECIALLY true of the cut ‘n paste code users on Xanga. L…

    TrackBack from icebound flame on 31 Mar 05

Go back to the top of this entry ↑

Comments are now closed for this entry