Category Archives: JavaScript

Decimal, hexadecimal, octal characters and their usage in HTML, CSS and JavaScript

Character encoding is a lot like regular expressions. Every time I need to know how it works, I have to learn it all over again. The real reason for this post is to provide a cheat sheet for those times, but first I’ll give you the skinny on character encoding.

Consider the quotation mark character (“). There are many ways this character can be represented on a computer. Ultimately, like any character, the quotation mark boils down to a series of zeros and ones that can be understood by the various electronic doodads connected to your motherboard. To those doodads, the quotation mark is simply 100010.

How would you like to type that every time you needed a quotation mark? Just think, if you wanted to quote Monty Python and the Holy Grail, you’d have to type:

100010 101001 1101110 1101111 1110100 1101000 1100101 1110010 100000 1110011 1101000 1110010 1110101 1100010 1100010 1100101 1110010 1111001 100001 100010

Every binary number has an equivalent decimal number as well as a hexadecimal number and an octal number. The binary number 100010 is equal to the decimal number 34. It’s also equal to the hexadecimal number 22 and the octal number 42. Don’t think about it too hard, just take my word for it:

100010 = 34 decimal = 22 hexadecimal = 42 octal

This makes it much easier to quote Monty Python, but it’s still kinda cryptic and painful to type it in decimal:

34 41 110 111 116 104 101 114 32 115 104 114 117 98 98 101 114 121 33 34

Fortunately for you (and especially for me, since I quote Monty Python a lot), there are layers and layers of software that run on top of the hardware in your computer that can translate for you. So you almost never have to type anything in binary or decimal anymore. These days, you will almost always be working with a character set, which maps each of those zeros and ones to their respective glyphs to make them easier to use. You can think of a character set like this:

" -> 100010
A -> 101001
n -> 1101110
o -> 1101111
...

A Unicode character set will map those characters to hexadecimal numbers instead of binary numbers:

t -> 74
h -> 68
e -> 65
r -> 72
...

Except instead of hexadecimal numbers they are called Unicode points, and they look like this:

s -> U+0073
h -> U+0068
r -> U+0072
u -> U+0075
...

Then some other layer will take care of mapping those hexadecimal numbers to zeros and ones for the sake of the doodads we mentioned earlier.

Most character sets have a lot more characters than you can see on your keyboard. If you’ve ever needed to use one of them, you either had to punch in a super special secret code (like holding down the alt key and pressing 0 1 6 9 on the number pad for the copyright symbol), or – specifically if you are a web developer – you had to look up a magic string to use in your HTML (like ©). There are actually several ways to use these special characters in your HTML, involving their decimal, hexadecimal and octal representations. Here’s another way you can add the copyright symbol to your pages:

©

In normal fonts like Arial or Times, the decimal number 169 corresponds to the glyph for the copyright symbol. You can also use the hexadecimal number A9 pretty much the same way but with the letter x in front of it:

©

Or you can use the hexadecimal number in your stylesheet instead. This is the approach taken by Dave Gandy when he created Font Awesome:

<style>
  .copy:after {
    content: '\00A9';
  }
</style>
<span class="copy"></span>

Finally, you can use the octal number in your JavaScript:

<script>document.write('\251');</script>

The reason I needed to do this (and you might find it useful too) was so I could see all the characters a font contained. I couldn’t use the Character Map utility in Windows because it didn’t allow me to adjust the font size, and I didn’t want to spend all day looking for a replacement. I found it much easier to simply print all the characters to a page using some JavaScript:

<script>
    var i;
    
    for (i = 0; i < 2048; i++) {
        document.write('&#' + i + '<br/>');
    }
</script>

How to make sure your users mean to click “Submit”

Here’s a situation my coworkers and I ran into with our new online testing system: our users were accidentally clicking the “Submit” button on a form, then they were accidentally clicking the “Confirm” button on a confirm dialog popup. We took a number of steps to make it harder for them to do this, including making the “Next” and “Submit” buttons farther apart and changing the positions of the buttons on the form. Then we realized we needed to move the confirm dialog popup as it was appearing directly over the buttons on the form. When that didn’t fix the problem, we realized we needed to change the default button on our confirm dialog popup. It was more than a little tricky figuring out how to manipulate the jQuery UI modal dialog widget, so I’m going to share with you how we did it.

First, here’s how I created my confirm dialog popup using jQuery UI:

<div id="confirm" title="Confirm">
    Are you sure you want to submit your test?
</div>

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        resizable: false
    });
</script>

How to move a jQuery UI dialog widget

Although I had to dig through pages of Google search results to find it, the solution to this problem is pretty simple. The jQuery UI dialog() method – in addition to autoOpen, modal, resizable, and buttons – accepts a position option. It’s fairly obvious how to use this option: giving it a value of ‘top’ will place the dialog widget at the top of the window, giving it a value of [x, y] will place it at the specified co-ordinates in the window.

What’s not obvious is that you can also use the jQuery Position plugin, which allows you to position any element relative to any other element on the page. In my case, I was able to place the top of the dialog widget at the top of another div on my page like so:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: {
            'Confirm' : function() {
                $.ajax({
                    url: $('#testForm').attr('action'),
                    data: $('#testForm').serialize(),
                    type: 'POST'
                });
            },
            'Cancel' : function() {
                $(this).dialog('close');
            }
        },
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by double-clicking on the “Submit” button.

How to change the default button in a jQuery UI dialog widget

After looking at a few cryptic solutions on Stack Overflow, one of my coworkers figured out that you can give the buttons option an array of button objects instead of a buttons object itself. The advantage of doing this is you can add any number of attributes to the button objects in the array:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

Give the “Cancel” button a class of “cancelButton” made it easy to select with jQuery. Using the dialog() method’s open event, I added a function to change the focus of the form to the “Cancel” button:

<script>
    $('#confirm').dialog({
        autoOpen: false,
        buttons: [
            {
                class: 'confirmButton',
                click: function() {
                    $.ajax({
                        url: $('#testForm').attr('action'),
                        data: $('#testForm').serialize(),
                        type: 'POST'
                    });
                },
                text: 'Confirm'
            },
            {
                class: 'cancelButton',
                click: function() {
                },
                text: 'Cancel'
            }
        ],
        modal: true,
        open: function() {
            $('.cancelButton').focus();
        },
        position: {
            my: 'top',
            at: 'top',
            of: $('#pageTitle')
        },
        resizable: false
    });
</script>

This way, a user can’t accidentally submit the form by hitting the “Enter” key on their keyboard.