Usability and accessibility are all the rage right now and that's great because it's slowly making the web a better place. Unfortunately, some of the goodies in our bags of tricks aren't quite up to snuff when it comes to these two areas. One such goody is the good old select element—specifically with the multiple attribute enabled. How about we do away with them and try something different?
The biggest problem with multiple-select boxes is that selecting multiple options is a pain, especially if there are enough to create a scrollbar within the box. The most common place I've seen this scenario is in content management systems. For example, let's say you are writing an article for a site in a CMS and want it to appear in several categories on the front end of a site. (Let's assume that the system is not using tags for this example.) To related it to these categories, a multiple-select box is usually shown with all the categories of the site as options. You would have to hold down Ctrl and select each category. This may include scrolling within the box and if you love using the handy dandy scroll wheel on mice, then you may click in the box again to enable focus and start scrolling down—but wait! You just clicked without holding Ctrl so you just deselected all the previously-selected options. Now you have to go back and remember what you picked and use the scroll bar to scroll down. Sure, you set focus to the element by selecting the elements with Ctrl but not everyone knows that. All this backing and forthing gets to be a real pain. More about the perils of select boxes can be found at YourTotalSite's Multi-Select Lists vs. Checkboxes.
Why not replace that cumbersome select box with a scrollable checklist? Recently, I was working in Visual Studio and noticed a control called CheckedListBox (who names these things?) and thought I would try to make one for use on the web using some standard elements and a smattering of CSS. Follow along below to see how I did it, see the final basic result or check out some fancy examples.
The first step is to create the structure. I did this by simply using an unordered list, some labels, and checkboxes:
<form action="#" method="get">
<ul class="checklist">
<li><label for="o1"><input id="o1" name="o1" type="checkbox" /> Aenean malesuada ante eget tellus</label></li>
<li><label for="o2"><input id="o2" name="o2" type="checkbox" /> In posuere augue id velit</label></li>
<li><label for="o3"><input id="o3" name="o3" type="checkbox" /> Nullam a dui ac augue adipiscing sodales</label></li>
<li><label for="o4"><input id="o4" name="o4" type="checkbox" /> Vivamus consectetuer ante eget urna</label></li>
<li><label for="o5"><input id="o5" name="o5" type="checkbox" /> Aliquam id felis cursus purus tristique condimentum</label></li>
<li><label for="o6"><input id="o6" name="o6" type="checkbox" /> Suspendisse posuere lectus vitae velit consequat volutpat</label></li>
<li><label for="o7"><input id="o7" name="o7" type="checkbox" /> Fusce condimentum nulla et tortor.</label></li>
<li><label for="o8"><input id="o8" name="o8" type="checkbox" /> Proin consequat faucibus mi</label></li>
<li><label for="o9"><input id="o9" name="o9" type="checkbox" /> Etiam a lectus quis massa viverra laoreet</label></li>
<li><label for="o10"><input id="o10" name="o10" type="checkbox" /> Pellentesque gravida lorem vel odio</label></li>
</ul>
</form>That class on the unordered list is all we need to make the checklist. What we're going to do is so basic that it can be applied in many areas but I'm just using it for checklists for now. Next, we add a dab of CSS:
.checklist {
border: 1px solid #ccc;
list-style: none;
height: 20em;
overflow: auto;
width: 16em;
}
.checklist, .checklist li { margin: 0; padding: 0; }
.checklist label {
display: block;
padding-left: 25px;
text-indent: -25px;
}
.checklist label:hover { background: #777; color: #fff; }
Now we have very basic scrollable checklists without all the hassle of worrying about deselecting previously-selected options. Setting overflow: auto is what creates the scrollable area and with the height and width units set as ems, the entire thing is resizable. We also style the labels to have a block display to make the entire option clickable and add some padding but set a negative text indent so the words can wrap to the next line without appearing underneath the checkboxes. One extra helpful style was added to labels when hovering over them to let users know that they can click on them.
We're done, right? Nope. As usual in the world of CSS, Internet Explorer rears it's bothersome head and imposes some unwanted limits. Unfortunately, setting the labels' display property to "block" brings about the infamous white space bug in which IE displays the white space in between the li tags. To solve this, use the Holly hack and add a height declaration to the label properties:
.checklist label {
display: block;
height: 1%;
padding-left: 25px;
text-indent: -25px;
}The final thing we need to do for IE is to implement a version of the JavaScript introduced in A List Apart's Suckerfish Dropdowns. This JavaScript allows IE to change the background of the labels just like modern browsers do with the :hover pseudoclass:
function initChecklist() {
if (document.all && document.getElementById) {
// Get all unordered lists
var lists = document.getElementsByTagName("ul");
for (i = 0; i < lists.length; i++) {
var theList = lists[i];
// Only work with those having the class "checklist"
if (theList.className.indexOf("checklist") > -1) {
var labels = theList.getElementsByTagName("label");
// Assign event handlers to labels within
for (var j = 0; j < labels.length; j++) {
var theLabel = labels[j];
theLabel.onmouseover = function() { this.className += " hover"; };
theLabel.onmouseout = function() { this.className = this.className.replace(" hover", ""); };
}
}
}
}
}Load this function when the page loads using Simon Willison's addLoadEvent and you're good to go.
Now you're free to style your checklists however you like and you have much more freedom in doing so than trying to style select boxes. Check out the final result or take a look at some possibilities.
I'm no expert, so if I've made a mistake somewhere or things can be streamlined a bit more, please don't hesitate to offer up suggestions.
We had it easy installing counter scripts -- hooking up a message board is a bit more complicated, though some are simpler than others. One particularly easy-to-install message board is AnyBoard. Not only is AnyBoard free, it provides an online installer. Simply download the Download anyboard_free.zip script and unzip it with WinZip or some other program. In the folder that appears, open install.txt and follow its instructions.
Your assignment is to visit Script Search and browse through the Perl scripts. If you're using a Windows server, browse the ASP scripts. Find some free scripts that sound interesting, download them, and try installing them on your Web site. Be sure to read the instructions carefully.
RSS [Really Simple Syndication], from Dan Gillmor in the 8/17/03 Murky News. You can find lists of newsreaders and other RSS tools on several sites. A good place to start is the Lockergnome RSS page (rss.lockergnome.com). Newsreaders come pre-configured with a variety of RSS feeds. You can find many more feeds at sites such as Syndic8 (www.syndic8.com) and NewsIsFree (www.newsisfree.com). (My own blog's RSS feed is at weblog.siliconvalley.com/column/dangillmor/index.xml.) David Sifry, who runs a Weblog search engine called Technorati (www.technorati.com), sees even wider RSS uses.
A common use of "noindex" tags is to prevent the indexing of a navigation menu that appears on every Web page. This prevents a search for "Home" from matching a "Home" link in your navigation and returning every page in the results. To exclude robots from indexing or following links, place the appropriate tags around the part of the page you want omitted:
<div class="noindex">
Text found between these tags will not be indexed in your search results. Links found between these tags will be followed by the search robot.
</div>
<div class="nofollow">
Text found between these tags will be indexed and included in your search results. The links found will not be followed to other pages by the search robot.
</div>
If you don't want the text or links indexed AND you don't want the links followed, you can use nest the tags to specify both "noindex" and "nofollow" in the same block of text.
Web logs, colloquially called blogs, are popping up everywhere. They range from useful to frivolous, and they've become a popular forum for those who want to share their opinions. Now you can have your own blog or, better yet, use some of the content management packages that have popularized this trend to get a solid code base for that Web application you’ve been meaning to write. This article will give you a quick tour of the blog underworld and get you started looking for valuable, reusable resources.
Originally, blog sites digested news from other Web sites and posted updates about them. Single users or groups of users maintained the earliest ones, which reach back to the beginning of the Internet. Eventually, blogs evolved into the community-created discussion drivers prevalent on the Web today.
The term "Web log" suggests a distinct purpose, but summarizing news and events from around the Web is only one role blogs play. As a blog centralizes on a theme or type of content, the participating community gives each blog instance a personality. Users latch onto their favorites, and suddenly opinions and comments are presented that add up to much more than a collection of reused content.
With the introduction of prewritten blogging software providing content and community management systems, Webmasters have stretched the definition of blog to include any Web site run within a blogging framework. Many of these include journals and collections of original content submitted by a community or other clever deployments that may exclude the community altogether, taking blogging back to its roots. Some blogging applications serve as a great user-centric framework for custom applications.
Those who are interested in starting a blog have a number of options. If you have access to a Web server and database, you can install and run your own blog site. Alternatively, several sites offer blog hosting, where you can run your community without having to deal with system administration. Below are some prevalent options in these two areas to get you pointed in the right direction.
There are many products you can install on your server to manage your blog. Below are listed a few popular free ones, in order of their introduction.
One of the most popular community blogs today is Slashdot, receiving about 30 million visitors a month. Slashdot started in 1997, is written in mod_perl, and runs on MySQL database. The software, Slash, is open source under GPL, and if you like to get your hands dirty, you can download and deploy it free. The Slash developer community is active, and new features are added every few months. As with each of the applications presented in this article, developers are able to create their own plug-ins to enhance functionality.
In 1999, Blogger was released, facilitating Web content management. Recently, PYRA Labs introduced a pay version, Blogger Pro ($35), with more features and support. Blogger is recognized as the driving force behind blog popularity; it promises ease of use while still holding gear-head appeal. ZDNet recently wrote a review of Blogger and has W.bloggar, a Windows interface to Blogger administration, available for download.
Another popular blog application is PHP-Nuke, written by Francisco Burzi. PHP-Nuke has a large community following and offers numerous modules to easily extend site functionality and themes to customize the blog's look and feel. This free application is a popular choice for would-be bloggers.
An offshoot of PHP-Nuke, PostNuke, opened core development of the content management system to the community and delivers a more sophisticated user permissions system than its precursor. PostNuke is still in its beta phase, as it further enhances administrative tools and simplicity of design. Currently, PostNuke's development focus is on application architecture over bells and whistles, but new themes and modules are being created all the time.
Movable Type, written by Benjamin and Mena G. Trott, is a personal publishing system that has been around for about a year. In addition to blog-style content, Moveable Type natively supports graphics display and management. This product is free for personal use and charges a $150 licensing fee for businesses.
If you don't have access to a Web server or aren't interested in maintaining the systems behind your community, you can always opt for a hosted solution. Here are a few popular sites to consider:
You read 'em all the time, but what makes a weblog a weblog? And how can you quickly jump in and start publishing your own? Wei Meng Lee shows you the blogging ropes.
On the surface, weblogs appear no different than conventional Web articles, but one salient feature of these posts is that they depend on specific lines of XML that are usually referred to as an RSS document (Really Simple Syndication or Rich Site Summary). The use of this RSS document allows other webloggers to exchange content as well as integrate information into their own postings. An interesting history of blogging can be found here.
This tip compliments of Shawn Dillon, Senior Consultant for Everest Technologies. One of the most annoying "features" of IE 6 is the Pictures pop-up toolbar. After installing IE 6, pages that I developed would show the Pictures toolbar whenever the mouse hovered over an image; ostensibly to allow the visitor to save, print, or e-mail images on the page that weren't associated with a hyperlink. This feature is very easy to switch off on a per-page or per-image basis. To switch off the Pictures pop-up toolbar feature for an entire page or site, add the following META tag to the page or include the information in the IIS headers for the site through the Internet Service Manager console:
<meta http-equiv="imagetoolbar" content="no" />
To switch off the Pictures pop-up toolbar feature on a per-image basis, simply add the following attribute to the appropriate IMG tag:
galleryimg="no"
An SSI is an external file, but it displays differently than external .css and .js files. The server takes the content of the file contained in the SSI and adds the complete text to the Web page before sending it to the browser - the browser gets the combined "skeleton" and the SSI "padding".
When visitors look at the document source code of a Web page they can't tell what part - if any - is contained in an SSI. However, the text of .css and .js files does not display in the page's source code, just the LINK or SCRIPT command that calls them. That's the big difference between SSI pages and those that use external CSS or JavaScript files.
Include content you want indexed by search engine spiders in SSI's because the spider can read SSI content. Put the content that isn't important to search engines - like JavaScript code or style specifications - in .css, .js, or .txt files because search engine spiders won't see it.
This can be done with the .htaccess file. .htaccess is a regular text file that contains "scripts" that allow you to override certain things on your server - like creating a custom 404 error document that replaces the server's default 404 document.
To be able to create your own 404 error document, first you need to create the actual document (use your
HTML editor of choice or hand code it if you like), upload the document to the root directory on your server, and finally include the following in your .htaccess file:
ErrorDocument 404 http://www.yourdomain.com/404.html
Note that first you must name (save) the file as htaccess.txt in your local hard drive, then once you upload it to your server, you must rename the file to .htaccess - the file doesn't have an extension nor it has anything (a name) before the dot (.). Also, once you rename the file, it will disappear - well, you just won't be able to see it because it's a hidden file (files preceded with a dot (.) are hidden in UNIX).
The .htaccess file can allow you to do many other things such as enabling HTML files to be parsed for SSI code, preventing bandwidth theft, referring, etc. For more info you can check out the Apache docs at Apache.org. Also, remember that some server administrators setup their servers so that they do not process .htaccess files.
If you ever tried to log in to a password protected FTP site, you've probably seen the following message in Netscape:
Access Denied, anonymous login not supported
You can avoid this error and log in to your service provider's FTP site (for example) using your account (user name and the password) by formatting the address of the FTP site as follows:
ftp://<user name>:<password>@<ftp_site_address>
For example, if your FTP site is at my_ftp_site.com, your user name is joe, and your password is my_password, your address should be:
ftp://joe:my_password@my_ftp_site.com/
LiveCounter Classic is an award winning web page access counter which can display up-to-the-minute hits count using an animated odometer-like display. LiveCounter Classic is free of charge on web pages of non-profit organizations and your personal web pages. If you use LiveCounter Classic on commercial web pages a registration fee of $15.00 (US) is required. Domain and server licenses are also available for ISPs and WPPs.
By Nathan Torkington Full Source Article is quite technical, and explains how to set and read cookies. (8/27/01)
This article is about Web browser cookies instead. How to set and inspect cookies from CGI scripts, how to use them for useful purposes such as efficient, secure authentication.The Web is designed to be stateless. Each document sent from server to browser is a unique transaction. Having sent a document, the server forgets about it, which greatly simplifies programming a Web server. But it doesn't simplify writing Web applications. To implement shopping carts, user preferences, or detailed visitor tracking, you need to recognize a user from one page to the next. By the time the Web needed this level of sophistication, it was too late to turn around and make it support states. So Netscape invented cookies.
A cookie is like an ID card that a server issues to a browser. Every time the browser requests something from the server, it flashes the ID card, with all of the information left by the server, as part of the transaction. To track people on your Web site, you issue them a cookie with identifying information on their first visit to your server. Every subsequent request they make will include that cookie, from which you can extract their identity.
By Warren Ernst September 2, 2003 www.pcmag.com/article2/0,1759,1213616,00.asp
Changing the loc_id=USHI0033 code in two places will identify another location as default. Get the code from weather.com at the forecast for the location you want to be default. I don't know what code=330121 means or what happens if you change it - it passes that information on to the CGI program handling the request.
<form method= "post" action="http://www.weather.com/cgi-bin/uncgi/zip_city_search.cgi?par=internal&site=magnet&code=330121&promo=english">
<table>
<tr>
<td> Enter a City or US Zip: </td>
<td><input type="text" name="destination" size="8" value=""> <input type="image" src="http://image.weather.com/pics/button_go.gif" width="26" height="23" border="0" alt="go!" value="Go City"></td></tr>
<tr>
<td colspan="2"><a href="http://oap.weather.com/fcgi-bin/oap/redirect_magnet?loc_id=USHI0033&par=internal&site=magnet&code=330121&promo=english"><img border="1" width="270" height="140" SRC="http://oap.weather.com/fcgi-bin/oap/generate_magnet?loc_id=USHI0033&code=330121" alt="NA"></a></td></tr>
</table>
</form>
Visit Perl Overview, Tools, and Techniques at Extreme Tech www.extremetech.com/print_article/0,3428,a%253D17938,00.asp. If you've ever wished you had a better way to automate repetitive tasks, manipulate masses of data, or put together quick solutions to seemingly painful problems, you might be pleasantly surprised to discover what Perl can do for you.
The Vector Markup Language (or VML) is another implementation of XML that provides developers with the ability to create vector images in any solution that provides support for VML. Fortunately, IE 5+ provides this support.
An example of a real-world solution that could incorporate the use of VML might be to create an intranet-reporting tool that displays graphs. Let's consider a sales forecast report that shows six months' previous performance plus one month's projection. This information could be supplied by a database and transformed using XSL to HTML/VML to be displayed in the browser. One of the benefits to this is that it doesn't require any third-party tools for graphing. Also, it's delivered in plain text format so you don't have to download images.
Here's some sample data the graph displays:
Month-----------------------------------Sales
Jun-----------------------------------$25,000
Jul-----------------------------------$22,000
Aug-----------------------------------$18,000
Sept-----------------------------------$20,000
Oct-----------------------------------$20,000
Nov-----------------------------------$22,000
Dec (projected)-------------------$28,000
The idea is to provide a graphical representation of the data to the user. You can do this either with a series of rectangles (a bar chart) or a series of lines (a line chart). In the DHTML page that will be produced, I want to contain this chart within a <DIV> since the plot values are relative to the parent container.
First, I'm going to add tick marks to the axes to provide a reference. Since I'm restricting my <DIV> to 300 x 300 pixels, my plot area is going to be 280 x 280 pixels. The minimum value on the graph is going to be $10,000, and the maximum value will be $30,000.
In order to display this information within the confines of the graphing area, it's necessary to determine the plot values of the data. For the tick marks, I want to display it in $5,000 increments. To determine where the tick marks will be placed, I need to determine the coefficient necessary to convert the dollar values to the plot values on the Y-axis. This is achieved by dividing the overall plot height by the difference in the minimum value and the maximum value.
280 / (30,000-10,000) = 0.014
Now multiply this value by each $5,000 increment, subtract $10,000 to get the tick mark Y values, and then subtract the result from 280 (because plot values are from top to bottom):
'
x is the $5000 increment value.
280 - ((x - 10,000) * .014)
This gives you values of 280, 210, 140, 70, and 0. These are the Y values of tick marks from $10,000 to $30,000, respectively. The resulting VML for the tick marks should be similar to this:
<DIV style="width:300px;height:300px;border: 2px blacksolid;overflow:hidden;">
<v:line from="0,0" to="10,0"><v:textbox inset="0px, 0px, 10px, 10px" style="color:black;font-size:8pt;">$30,000</v:textbox></v:line>
<v:line from="0,70" to="10,70"><v:textbox inset="0px, 0px, 10px, 10px" style="color:black;font-size:8pt;">$25,000</v:textbox></v:line>
<v:line from="0,140" to="10,140"><v:textbox inset="0px, 0px, 10px, 10px" style="color:black;font-size:8pt;">$20,000</v:textbox></v:line>
<v:line from="0,210" to="10,210"><v:textbox inset="0px, 0px, 10px, 10px" style="color:black;font-size:8pt;">$15,000</v:textbox></v:line>
<v:line from="0,280" to="10,280"><v:textbox inset="0px, 0px, 10px, 10px" style="color:black;font-size:8pt;">$10,000</v:textbox></v:line>
. . .
The graph line can be accomplished with a <v:polyline>. Taking the data values and running them through the same math as before, you should come up with Y values of 70, 112, 168, 140, 140, 112, and 28 going from Jun to Dec. I have 280 pixels in the X direction and 7 points, so I'm going to plot each point at every 40 pixels on the X-axis. The resulting VML should appear as such:
<v:polyline points="0,70 40,112 80,168 120,140 160,140 200,112 240,28" style="background-color:transparent;"></v:polyline>
In order to make VML work on your page, you must specify in your <HTML> tag, and you must add the following style:
<STYLE>
v\:* { BEHAVIOR: URL(#default#VML); }
</STYLE>
To read more about VML, visit Microsoft's MSDN Library.
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/vml/
Phillip Perkins is a contractor with Ajilon Consulting. His experience ranges from machine control and client/server to corporate intranet applications.
Working with HTML-based e-mail newsletters is not a new concept. Countless developers have traveled down the treacherous road and, thankfully, some of them share their hard work with the rest of the community. Here are valuable resources for creating HTML newsletters: