Category: JavaScript

Categories
JavaScript Web Development

jQuery Troubleshooting

I recently spent a freat deal of time trying to get jQuery to run, with no success.

It all ended with the simple step of moving the loading of the jQuery below other javascript libraries in my <head> section.  Clearly there was a conflict that prevented my jQuery library from being accessed.

Benefit from my aggravating experience and save yourself some time!

Categories
JavaScript PHP Web Development

Data Validation

Some quick references here to data validation resources.  Many or most of these resources will refer to the Validate plugin for jQuery.

Server Side

http://phpmaster.com/form-validation-with-php/

Client Side

Much of client side data validation will center around jQuery.

Tutorials:

Custom Rules

Conditional Validation

Notes

To test if jQuery library is loaded, place the following in the HEAD of your document:

<script type="text/javascript">// <![CDATA[
  $().ready(function() {
    alert("HELLO");
  });
// ]]></script>

 

Categories
CSS JavaScript Web Development

Uniform Form Styling

Sometime something comes along the stands out from the crowd.

Uniform is one of those things.  Uniform is a Forms Styling tool using jQuery and CSS to create some pretty snappy looking form elements.

 

image

http://pixelmatrixdesign.com/uniform/

Categories
DHTML JavaScript Web Development

Selecting All Text in a Form Field with a Single Click

Sometimes the text in a form field is put there primarily for the purpose of being copied to the clipboard.

In these cases a little JavaScript will smooth the process, selecting the full contents of the field on the first click.

Place the following script in the section of your page:

1
2
3
4
5

<script type="text/JavaScript">
function highlight(field) {
       field.focus();
       field.select();
}</script>

Then place onClick='highlight(this);' as an attribute to any field you want treated this way:

1

<input type="text" name="myfield" size="20" value="mytext" onClick='highlight(this);'>
Categories
DHTML JavaScript

Sortable Tables with JavaScript

For years I've fiddled with trying to make my tables sort in JavaScript.  The user can simply click on the column header to make the table sort on that column.  Click again and it sorts the other way.

There were various scripts out there to do it, but I never had the time and need all at once to get one to work.  None seemed to really work well, or they weren't documented well.

Now I've found it. This one works right out of the box. It's well documented on the page, but here's the gist of it;

To make the Javascript available to your pages:

  • Load the sortabletable.js file into your site.
  • Reference the script in the <head> section of your pages.

Now make the following modifications to the pages with tables;

  • Wrap the row that contains your column headers with <thead></thead> tags.
  • Make sure the row with the colum headers used <th></th> tags instead of <td></td>.
  • Wrap the rows that contain your table data with <tbody></tbody> tags.
  • Add an id="MyTable" attribute to the <table> tag for each table you want sorted.  Of course, the id must be unique on the page.
  • Place the sortable table object immediately after each sortable table.  It's shown in the sample code on the site, easy to place with a simple cut and paste, but remember to replace the 'MyTable' string with the id you used in that table's <table> tag.

That's it!  The table now sorts.  Sweet.

Here's where to find it:

While you're there, remember how whoever runs that site pays his or her bills.

If you're not familiar with the very helpful but little used <th><thead><tbody> and <tfoot> tags, Google them.

2009-04-04: Late News: There's a more advanced table sorting method in this frequency-decoder.com article.

2009-08-10: Late News: And now this great script at yoast.com that has alternate row colouring in the javascript, so that it sorts properly.