JavaScript and HTML Tricks

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
  
  1. <form>
  2. <inputtype="hidden"id="domains"value="
  3. 0011.us
  4. 123abc.us
  5. 1mans.com
  6. hesbest.com
  7. 9900.us
  8. herclothing.info
  9. findher.info
  10. allme.us
  11. dropoff.us
  12. cyou.us
  13. o-1.us
  14. meadowlark.us
  15. uuuuu.us
  16. os-i.org
  17. supergreat.us
  18. nicewebsite.us
  19. "/>
  20. </form>
  22. <scripttype="text/javascript">
  23. functiongetLinesFromHidden(a){
  24. vare=document.getElementById(a);
  25. if(!e)
  26. return[];
  27. vars=e.value;
  28. s=s.replace(/\r\n|\r/g,'\n');
  29. returns.split('\n');
  30. }
  32. functiontrimWhiteSpace(a){
  33. vari;
  34. for(i=0;i<a.length;i++)
  35. a[i]=a[i].replace(/^\s+|\s+$/g,'');
  36. returna;
  37. }
  39. functionremoveEmpty(a){
  40. varb=[],i;
  41. for(i=0;i<a.length;i++)
  42. if(a[i])
  43. b[b.length]=a[i];
  44. returnb;
  45. }
  47. domainList=getLinesFromHidden('domains');
  48. domainList=removeEmpty(trimWhiteSpace(domainList));
  49. domainList.sort();
  50. d=document;
  52. functionshowList(a){
  53. d.write('<blockquote>',a.join('<br/>'),'</blockquote>');
  54. }
  56. showList(domainList);
  57. </script>

The result is displayed below:

Result

function getLinesFromHidden(a) { var e = document.getElementById(a); if (!e) return []; var s = e.value; s = s.replace(/\r\n|\r/g, '\n'); return s.split('\n'); } function trimWhiteSpace(a) { var i; for (i=0; i<a.length i a return function removeempty var b="[]," for if domainlist="getLinesFromHidden('domains');" domainlist.sort d="document;" showlist d.write>', a.join('<br>'), ''); } showList(domainList); </a.length>

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.

1. <scripttype="text/javascript">
2. randomComparison=function(a,b){
3. returnMath.random()-.5;
4. };
6. domainList.sort(randomComparison);
7. showList(domainList);
8. </script>

Result

randomComparison = function(a, b) { return Math.random()-.5; }; domainList.sort(randomComparison); showList(domainList);

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.

Using a stylish form fieldset

One of the coolest form elements built into HTML is the fieldset. It relies on the browser to create a look that can't be replicated using ordinary HTML commands. It has the sophistication of images without the development effort, server load or extra client bandwidth.

A fieldset must be contained in a form. If you want to use one elsewhere, just surround it with form tags, provided that you're not interrupting another form, of course. One form can contain as many fieldsets as you wish.

1. <form>
2. <fieldset>
3. <legend>PleaseenteryourYahoo!LoginInformation</legend>
4. <table>
5. <tr><th>Username</th>
6. <td><inputtype="text"name="name"/></td></tr>
7. <tr><th>Password</th>
8. <td><inputtype="password"name="password"/></td></tr>
9. <tr><th>Security</th>
10. <tdcolspan="2"><inputtype="radio"name="secure"value="home"id="secure_home"/>
11. <labelfor="secure_home">Remembermyusernameandpasswordonthiscomputer</label><br/>
12. <inputtype="radio"name="secure"value="group"id="secure_group"checked="checked"/>
13. <labelfor="secure_group">Remembermyusernameonly</label><br/>
14. <inputtype="radio"name="secure"value="public"id="secure_public"/>
15. <labelfor="secure_public">Donotremembermyusernameorpassword</label></td></tr>
16. <tr><th><inputtype="submit"value="LogintoYahoo!"/></th></tr>
17. </table>
18. </fieldset>
19. </form>

Result

Please enter your Yahoo! Login Information User name Password Security

Remember my user name and password on this computer Remember my user name only Do not remember my user name or password

Using Labels to Create Checkboxes and Radio Buttons With Clickable Descriptions

You'll notice in the form above that one can click on the descriptions of the security options in order to choose the desired option. To do this, each radio button must be labeled with an HTML ID. The clickable description has an attribute for="HTML ID" which allows the browser to understand that the radio button should be selected when the user clicks the description.

This is a natural thing for people to do at your Web site. It's difficult to navigate a mouse to select a small checkbox or radio button in comparison to simply clicking the description. Clickable descriptions make Web designs more efficient, and the the user experience more satisfying and enjoyable. Yet it's surprising how many HTML developers don't write their forms this way.

Using List-Style-Image to Make Beautiful Bulleted Lists

In HTML, an unordered list (the ul and li elements) is one of the easiest ways to organize information. It looks like this.

• Meat
• Potatoes
• Water

Lists like this are a best friend to anyone who wants to organize their Web page and make the best use of both white space and text. But did you know that through stylesheets there can be much more to a simple bulleted list?

One can spice up their lists by using any bullet of their choice, and a stylesheet which replaces the default black circular bullet with a nice-looking image. This is done by selecting the li elements contained in the unordered lists and specifing a URL corresponding to the list-style-image attribute.

The best thing about list-style-image is that stylesheets already provide this new design tool, making complicated graphic design work unnecessary.

Here's how it works:

1. <styletype="text/css">
2. ul.orangearrowli{
3. list-style-image:url(http://0--0.us/0067_circular_arrow.png);
4. }
5. </style>
7. <ulclass="orangearrow">
8. <li>meat</li>
9. <li>potatoes</li>
10. <li>water</li>
11. </ul>

Result

<style type="text/css"> ul.orangearrow li { list-style-image: url(http://0--0.us/0067_circular_arrow.png) } </style>

Meat Potatoes Water

<style type="text/css"> <!-- div.result { border: #ccf 2px inset; padding: 0px; margin: 1em; width: 250px; float: right; } div.result2 { border: #ccf 2px inset; padding: 0px; margin: 1em; } div.result3 { border: #ccf 2px inset; padding: 0px; margin: 1em; width: 250px; float: left; } div.result h3 { background: #ccf; margin: 0px padding-left: 10px; } div.result2 h3 { background: #ccf; margin: 0px padding-left: 10px; margin-top: 0; padding-top: 0; } div.result3 h3 { background: #ccf; margin: 0px padding-left: 10px; margin-top: 0; padding-top: 0; } div.jkmarticle h3 { border-bottom: #ccf 2px solid } div.result { border: #ccf 2px inset; padding: 0px; margin: 1em; width: 250px; float: right; } div.result h3 { background: #ccf; margin: 0px; padding-left: 10px; } div.result div { padding: 0.5em; } div.jkmarticle h3 { border-bottom: #ccf 2px solid } --> </style>