Recently I was tasked with creating a form that allowed the user to specify a color selection from a limited number of options. There are numerous scripts that display a popup color selection on the web, but I needed one that was limited to just a few colors. So I wrote a script that makes all text inputs in a form with the class name of “color” display a simple color selection box. Here’s what it looks like in action:
Implementation
Download and store the JavaScript and CSS:
Simple Color Selector (.zip)
Simple Color Selector (.tar.gz)
Then add the following references to your page:
<link rel="stylesheet" href="/lib/styles/colorPicker.css" type="text/css" media="screen" />
<script type="text/javascript" src="/lib/js/colorPicker.js"></script>
Usage
The script creates the color table and assigns click events dynamically, so all you have to do is include the word “color” in text input classes like so:
<input type="text" class="color" />
By default, the script displays the following colors: White (blank), black, grey, red, yellow, and blue. You can easily replace the default colors by adding the following after you reference the main JavaScript file:
<script type="text/javascript">
colorPicker.colors = new Array('', 'black', 'gray', 'red', 'yellow', 'blue', 'teal');
</script>
And that’s it! The user’s selection will be hidden within the text inputs, so upon submission you’ll be able to work with the resulting data. Feel free to modify functionality within the JavaScript file, or style within the CSS file.
Update (8/22/2008): Evaluated Cross-Domain AJAX with DOMAssistant.
AJAX applications have become commonplace, but many of the tutorials for developing them lean heavily on the help of JavaScript frameworks like DOMAssistant or Prototype. So I figured I would take a look at the standard AJAX-related properties and methods, see how cross-domain calls make the whole process slightly more complicated, and find out how much the frameworks can actually help. Without the help of a framework, you basically have three steps to display content obtained via AJAX:
As mentioned in a previous post, innerHTML has many simple uses, but isn’t part of the DOM standard. For some of common tasks, I’ve had to write some DOM-compliant functions that mimic their functionality. In this post, I’ll talk about two such common tasks, replacing part of some text within an element, and wrapping text within an element in another element.
In the previous post, I unveiled a new method of display block-level code snippets on the site. While developing this new method, I ran into a couple of cross-browser compatibility issues that delayed release of the work. Primarily, when dealing with elements that maintain whitespace (the <pre> tag and the <textarea> tag), special considerations need to be made to handle things in Internet Explorer to make the code function the same as in other browsers. Specifically, carriage returns/new lines are treated differently, as is assigning text via the innerHTML property.
In a previous post, I mentioned using ordered lists to display block-level code snippets. The solution worked, but had disadvantages, most notably the inefficiency during initially getting the code on the site. So I decided to revisit displaying block-level code snippets, with a solution that accomplished the following goals:
- Efficiency during initial writing / copy & paste
- Extensibility
- Cross-browser compatibility
- Minimal footprint
- Usability (line numbers, ability to copy & paste, etc.)
