Archive for the ‘DHTML’ Category

Always on the lookout for new ways to cram more information into less space and maintain a good user experience.

Here’s a new take on a common (steam-inspired) approach, still under development under development.

I say a new take because I’m putting it together, but I’m sure there are other solutions like it around.

This solution will feature: Semantic markup and content unobtrusively transformed into a compact display with navigation to access each panel.

Obviously, there’s still work to be done, improvements to accessibility and a pausable automatic slideshow function. But the basic functionality is there

Didn’t take very long to put together so far, thank you jQuery.

The idea is to eventually combine this functionality with the existing compact sections script so that any of three display modes can be easily chosen (even switched between) for the compact presentation of sections of content.

XUI Validation has been updated, changes include:

• Clicking the links in the error summary block now focuses the user on the relevant input (as well as updating the fragment identifier in the URL)
• A new configuration variable (positionOfInlineAlerts) allows the inline error messages to be displayed either in the input’s label or after the form control itself (after the indicator icon).
• Tabbing into a control no longer triggers validation.
• Required fields are only validated after the user leaves the control, so they are not confronted by an error message if they clear the contents of a control to start over.
• A container element for each form control is updated after validation with the addition of a valid or invalid class so that the elements related to the control can be styled based on the outcome of the validation.
• The ability to display confirmation messages has been added. This allows the validation functions to confirm with the user how their input is being parsed. This is useful for complex data types like dates.

See the example page for a demonstration of the new features.

I have spent most of my waking moments this weekend coding, refactoring and documenting a framework for easily extensible unobtrusive client-side form validation.

XUI Validation is based on jQuery and provides a simple mechanism for adding new custom validations that will apply via unobtrusive semantic hooks to any form.

Why another unobtrusive validation framework? Because the other OSS validation frameworks I have come across are not as easily extensible, or provide the ability to display a summary of errors a the top of the form (on submit).

Check out the demonstration page demonstration page, or download the package the package to see what I mean.

Thoughts, ideas, feedback? Leave me a comment.

Anchors, be gone!.. Named anchors, at least.

I’m not a fan of linking to named anchors (for example: <a name="point-a"></a>). They limit you to identifying a point in the document, or at best some link text.

Its much more powerful to link to a section of a page using the id attribute on an element that contains the content you’re referring the user to.

For example:

<div id="section-a">
	<h2>Section A</h2>
	<p>Some content worth linking to...</p>
</div>

In this case when you link to the fragment-identifier #section-a you are signifying that the user should read the entire section of content.

But how can the user tell the difference?

Usually, they can’t! (only those who understand HTML and look at the code can tell).

That’s where Frag Link highlighter can help. After the user follows a link to a page fragment, Frag Link briefly highlights the section of content that was linked to.

It also helps in situations when the browser has scrolled all the way to the bottom of the page and the section in question still isn’t at the top of the viewport. The brief flash of colour can draw users’ attention to the relevant content.

Frag Link can also help draw attention to part of a page when no scrolling is involved or when there is more that one column of content.

Give the Frag Link demo a try and tell me what you think.

Getting closer with the Buttonise concept.

Again, the concept is not quite production-ready, but the OS mantra is Release early. Release often (and a week between updates is often for me ).

The key improvement of this release is that it will run well in common browsers (tested in Firefox 2, Opera 9, Safari 3).

There are still some styling issues to work through and a couple of functionality issues with IE6.