Archive for August, 2009




Credit Card Autocomplete

Author: TheHahn
August 21, 2009

When working on a shared computer, there is a lot of risk involved with personal data. For example, buying something online with a credit card. Best practice is to clear all saved data from the computer as one logs off. However, I am not convinced a majority of users know / remember to do so. The first idea that comes to a developer’s mind is to leverage the “autocomplete” attribute of form fields. Unfortunately, this does nothing other than prevent the auto-complete from appearing, not the browser from storing data; I would consider the auto-complete attribute worse than not, as it provides a false sense of security. The solution I’m thinking of is a small hack.

Correct me if I am wrong [andrew.hahn@peaksystems.com], but browsers do not store hidden form field data, only fields of input type “text”. My testing suggests that it does not.

So, the proposed hack is to create two forms. One form contains a dummy text field that will not be submit.

<form><input type="text" id="CCN_prop" /></form>

The second form will be actually submit. It will contain a hidden input and a submit button. When the submit button is pressed, javascript will update the hidden field (CCN) with the value from the dummy field (CCN_prop).
<form method="post" onsubmit="
    $('#CCN').val($('#CCN_prop').val());">
  <input type="hidden" name="CCN" id="CCN" />
  <input type="submit" />
</form>



Horizontal Scroll

Author: TheHahn
August 7, 2009

For some reason I haven’t seen many examples of a horizontal scrolling div. These are commonly used for image slideshows (we have a number of photography clients).

CSS:
div {
width:380px;
height:80px;
padding: 15px 0 30px 0;
overflow-x:auto;
white-space:nowrap;
}

By default, img tags are display:inline, so you need only something like this:
<div>
  <img />
  <img />
  <img />
</div>