JavaScript and HTML Tricks | WebReference

JavaScript and HTML Tricks

By Joseph Myers


[next]

Digg This Add to del.icio.us


Here are some of my favorite JavaScript and HTML tricks. There are a wide variety of options: from storing and using hidden data to making HTML forms and lists look great. Each topic has a brief introduction showing you how it will improve your Web site. Then I'll go into each technique in detail.

  • Embedding data in hidden HTML elements and retrieving text lines in a platform-independent fashion
  • Randomizing data with JavaScript
  • Using a stylish form fieldset
  • Making clickable descriptions for checkboxes and radio buttons by using labels
  • Using CSS list-style-image to make beautiful bulleted lists

Introduction

The last time we discussed How to Use a JavaScript Query String Parser. Now we will discuss five more valuable JavaScript and HTML techniques and tricks.

Many times I've stored data in hidden HTML elements for scripts. It's a great way to keep prices and product names handy for e-commerce, or for lists of data that will be formatted by a script. To do that, it's necessary to interpret the lines of data in an operating-system independent way. I've even used this technique to store the radio programming information for a weekly radio schedule. Data stored this way can be graceful at degrading for older browsers. As an example, the radio schedule I mentioned was typed as preformatted text visible to older browsers, but transformed into a dynamically navigable Web page by JavaScript.

Another thing that comes up frequently is randomizing data that is used by a JavaScript program. Random links, images, statisics research and mathematical analysis come to mind as immediate applications.

My Web programming has never been the same since I learned how to use fieldsets to make beautiful forms in Web pages. Best of all, there's no bandwidth intensive imagery to use - it's built into the HTML!

While on the topic of forms, usability and efficiency increase in importance when check boxes and radio buttons are provided with clickable descriptions. Many people expect to click the descriptions, anyway, from experience with other programs. It would be sad to disappoint them, especially when HTML provides an excellent and natural way of doing it.

As a Grand Finale, you'll learn about one of the classic tricks of stylesheets. Using deluxe bullets for your lists will make your Web site more professional and appealing.

Getting Data From Text Lines in Hidden HTML Elements

Data for a script program can be embedded efficiently directly into the HTML source code, either in a hidden input field or a hidden HTML element. A script which reads this data has to perform a small number of steps.

  • Hide the data contents of the hidden field in the HTML document
  • Refer to the data using the document object model
  • Normalize the line breaks for cross-platform compatibility
  • Separate the lines into an array using a simple JavaScript function
  • Trim white space and remove empty lines or comments if desired

Result

The result is displayed at right:

Later, I'll write an article discussing some spreadsheet and statistics functions which can be applied to data embedded into an HTML document. At the end of every semester I prepare a quality of teaching report which uses these functions to compute statistics and correlations from classroom data. The first step is how to interpret text lines as comma separated values (CSV) or as data fields delimited in other ways.

Randomizing Data with JavaScript

Often I want to show data in random order. Somtimes I just want to pick a few random things out of many. Just as often I want to show all of the information, but in a randomized order, similar to shuffling a deck of cards. To do this we can use the JavaScript sorting algorithm in combination with a customized sorting comparison function that will randomize the sorted order.

The comparison function returns a value greater than zero or less than zero depending on which element should be sorted first. When the sorting algorithm is executed the data will be randomized if the comparison function gives each comparison of elements an equal probability of being greater than zero or less than zero.

Result

Some high-speed sorting algorithms are unstable, and might not result in all data being truly randomized. In a sense, one could say that the sorting algorithm divides up the data too fast for the randomizing to occur. A truly random shuffling has the property that each element has the same probability of being assigned to each location, or equivalently, each permutation of objects is equally likely. As far as I know, Safari is the only browser which may have an unstable sorting algorithm, resulting in the domain uuuuu.us being sorted to the last position most of the time, although other domains appear to be randomly placed. Unstable sorting algorithms may be fine, depending on the application.

There are also iterative methods for sorting. Iterative sorting methods are useful because the computational cost of one iteration is O(N) rather than O(n log N). A precise estimate is typically from N/2 to 2N. The data is not completely sorted after one iteration, but that's fine when the data ranking is based on subjective criteria such as clicking popularity or Google PageRank. Usually a good iterative sorting method guarantees that at least the lowest and highest ranked items are sorted to the correct positions.





[next]