I was developing a simple chat log for a website, and I wanted the user to be able to submit a message when they hit the "enter" key but not if the "alt/option" key is being pressed. If the "alt/option" key is being pressed while the user hits the "enter" key, I want a carriage return to be entered in the chat field instead.

The jQuery .keyPress() doc page is a bit light on details, so here's how you can check for modifier keys with the .keyPress() event handler:

$('textarea#chat_message').keypress(function(e) {
    if (e.which == 13) { // enter key was pressed
        if (e.altKey) { // alt/option key is down
            // don't submit
        }
        else {
            // submit
        }
    }
});

The mofifier keys you can test for are:

altKey - alt/option key
ctrlKey - control key
shiftKey - shift key
metaKey - control key on PCs, control and/or command key on Macs

I finally got around to posting screenshots of the Goose is Loose project I did last year for the Libertyville Sunrise Rotary Club.

Goose is Loose Festival

I just added a bunch of screen shots from my latest couple client projects:

Midwest Farm Connection




Negev Direct Marketing

If you've ever stored HTML tags in a database and filtered the contents through PHP's htmlentities(), you've probably run into the problem of the quotes inside the tags being converted into " entities.

Example:

<a href="http://www.epigroove.com/">Epigroove.com</a>

turns into:

<a href=&quot;http://www.epigroove.com/&quot;>Epigroove.com</a>

Most browsers can handle this, but IE can not.

Solution:

$text = preg_replace('/<([^<>]+)>/e', '"<" .str_replace("&quot;", \'"\', "$1").">"', $text);

This replaces all instances of '&quot;' inside HTML tags.

After seeing DHH's latest tweet, I just couldn't help myself. :)

I'm addicted to Archer, so I created a Yyyup! soundboard page for Lana to go along with the Danger Zone soundboard.

I was bored today, so I created a Danger Zone soundboard page for Archer. :)

Position is Everything has an old, but still valid and amazingly simple way to create columns of equal height using very simple CSS.

In short: Give the columns a large padding-bottom value and a negative margin-bottom of equal value, and set the overflow to hidden for the containing <div>.

HTML code:

<div id="container">
    <div class="column">
        Left column
    </div>
    <div class="column">
        Right column
    </div>
</div>

CSS:

#container {
    overflow: hidden;
    }

.column {
    float: left;
    padding-bottom: 5000px;
    margin-bottom: -5000px;
    }

There are three known problems with this solution, however, so make sure your site won't be affected before using this solution:

View the known problems

If you're using jQuery and you need to toggle a checkbox, add this onclick code to an object:

onclick="$('#id_of_checkbox').attr('checked',!$('#id_of_checkbox').attr('checked'));"

The above code sets the "checked" attribute of the checkbox to the opposite of itself, i.e. checked -> unchecked or unchecked -> checked.

If you're using jQuery's built-in dialog box plug-in and you want to add a Datepicker field to a dialog box, you'll notice that the Datepicker opens behind the dialog box by default.

A quick and easy solution to force the Datepicker to appear in front of the dialog box is to give the Datepicker a really high z-index.

Just add this to your CSS file:

#ui-datepicker-div {
    z-index: 10000;
}