teddy-risation » jQuery

Better Form Usability with jQuery

Terry — Sat, 07 Aug 2010 19:03:40 +0000

The tag is a rather commonly omitted element in HTML forms. Although the tag does not render text in it differently from those outside the tag, it provides a usability improvement for mouse users by duplicating common GUI features. More importantly, it couples an input element with a label for users of speech browsers.

The tag can be used as is, but it has an extremely useful attribute – the for attribute. This attribute allows one to associate a form control with the element, when its value matches the ID of the form control. Here’s a sample of a usable, but not the best, form, without the use of the tag:

<form id="form-1">
	<p>
		<span>Name</span>
		<input type="text" name="author" tabindex="1" />
	</p>
	<p>
		<span>Email</span>
		<input type="text" name="email" tabindex="2" />
	</p>
	<p>
		<span>URL</span>
		<input type="text" name="url" tabindex="3" />
	</p>
	<p>
		<span>Comment</span>
		<textarea name="comment" tabindex="4" />
	</p>
	<p>
		<input type="submit" name="submit" tabindex="5" value="Submit" />
	</p>
</form>

When we add the the for attribute to the element and assign it a value that is identical to the id attribute of the form control, we will improve the usability of the form. For visually-impaired users, the speech browsers are able to draw a link between a form control and it’s label, which will provide important information and even instructions in filling up the form. For those using visual browsers are, in turn, able to focus on a specific form control when its associated label is clicked on.

Here is the improved form:

<form id="form-1">
	<p>
		<label for="author">Name</label>
		<input type="text" name="author" tabindex="1" id="author" />
	</p>
	<p>
		<label for="email">Email</label>
		<input type="text" name="email" tabindex="2" id="email" />
	</p>
	<p>
		<label for="url">URL</label>
		<input type="text" name="url" tabindex="3" id="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" tabindex="4" id="comment" />
	</p>
	<p>
		<input type="submit" name="submit" tabindex="5" value="Submit" />
	</p>
</form>

What does jQuery have to do with this?

You must be puzzled – afterall, what you need to do so far is to manually inject the for and id attributes into the and elements respectively. In fact, I was actually doing these manual changes to my theme files and other web-based projects because it will only take me at most a few minutes’ worth of time.

However, I recently faced a problem that I felt using jQuery as a workaround wasn’t a bad idea afterall. Many people would advice against using JavaScript in cases like this for two reasons: some users, albeit a minority, don’t allow JavaScript to run on their browser; and on a related note, with the possibility that JavaScript being disabled in mind, we shouldn’t use it to implement essential features.

The problem was that I was working with some WP plugins that generates HTML forms dynamically and on the fly. Although some would dive into the realm of PHP and make the necessary changes such that the generated forms are more user-friendly, I would prefer using the jQuery way, which is easier and does not require muddling with the source code of the plugin files.

There are a few steps that we have to do:

Retrieve the value of the name attribute of the element.
Assign a unique ID to the element.
Assign the same value (the unique ID) to the for attribute of .

For those copy-happy folks, here’s the code:

jQuery(function ($) {
 	$("#form-1 > p").each(function(count) {
		var input_id = $(this).children("input").attr("name") + (count + 1);
		$(this).children("input").attr("id", input_id);
		$(this).children("label").attr("for", input_id);
	});
});

Dissecting the code

$("#form-1 > p").each(function(count) {

This line searches the document for the paragraphy element,

that is a direct descendant of an element with an ID of #form-1. The .each() function makes sure that we look the subsequent function across all elements that satisfy the selection criteria. The count variable is declared and it will be used in each iteration.

var input_id = $(this).children("input").attr("name") + (count + 1);

This line defines the variable input_id, and assigns it the value of that is the that of the name attribute of the element combined with a unique number. The number is increased by a value of 1 after each iteration of the loop so that we will generate unique IDs, even in face of an unprobably scenario that two input fields on the same page share the same value of the name attribute.

$(this).children("input").attr("id", input_id);
$(this).children("label").attr("for", input_id);

These two lines do the same thing – the finds the and elements in the same parent element, and assigns the generated value to the id of the former and for attribute of the latter.

Note

Note that this technique only works if each and pair is located in the same parent element, and each parent element has only one pair of label and input field in it. Of course, there is a solution for those forms that do not wrap each pair in a parent element, but I will not dwell into it.

Related posts that might interest you:

35 Stylish And Modern WordPress Plugins Using jQuery UI

Terry — Thu, 10 Sep 2009 13:31:39 +0000

35 Stylish And Modern WordPress Plugins Using jQuery UI

Dainis over at 1st Web Designer compiled a list of 35 elegantly designed, flexible and stylish WordPress plugins built on jQuery UI. Some of the plugins may actually be very helpful and many improve the user experience on your site, such as the jQuery pagebar, a highly coveted feature once exclusively found in the WordPress K2 theme.

Related posts that might interest you:

WP theme: teddy-risation Theta

Terry — Sat, 23 May 2009 18:25:39 +0000

teddy-risation Theta released!

So here we have, the eight teddy-risation WP theme in it’s fully glory. Just like the other write-ups that I do for my previous themes, I will be doing one for this one as well, no exceptions. Not only does this entry helps to catalogue my list of themes and my insights of designing them (I have goldfish memory, so a backup medium for my cranial storage is needed), but I hope it will also inspire others as well.

teddy-risation Theta is coupled with the tiny rebranding movement I’ve embarked on, to ditch the funky (and not very impressive) capitalised letters in the site name and my nick as well. Known by the pseudonym ‘teddY’ in the past, I am now changing back to ‘Teddy’ or as simple as it gets, my real name, Terry. You can address me with both names now, I really don’t mind, no worries!

This theme took the longest to design – the date of its conception was actually somewhere during and after my first year final semester examinations. Ideas always have to came at the wrongest of all wrong times, don’t they? I did a simple sketch on what I wanted on paper, and moved on to my studies. When the exams ended, I immediately started materialising the layout in Photoshop, starting from the header section.

Theme Hybrid

Theta is actually a child theme of Theme Hybrid. It is a free WP theme and you can modify it in anyway you want, or even create your own child themes that rely on the Hybrid framework. I did modify a few core files on the Hybrid theme, but other than that, all the styling and customisation you see here leaves the original Hybrid files completely untouched. That means that I can easily update my theme when Hybrid issues one, without breaking my child theme.

In the past I’ve always used Sandbox. However, I’ve decided to try out other new WP themes because sadly, the Sandbox creators have paused the development of the theme and the future is rather bleak. I have to say that I really loved working on Sandbox, Andy and Scott – I really appreciate the support and help you’ve rendered to users of your theme and your dedicated effort. Because of that reason, I realised that I have to start learning how to work on other WP themes – out of the many available options like Thematic, WP Framework, Whiteboard and The Buffet Framework, I’ve chose Hybrid… for just one reason – the main colour scheme is greyish blue. What a biased choice, isn’t it?

Hybrid was a little hard to tame at first, I find myself constantly referring to different files in the library for hooks, filters and etc. The styling was a little more challenging to do, because unlike Sandbox that came in plain and simple, Hybrid has a basic stylesheet built into it and it takes time to figure things out. One thing I really love about Hybrid is that it has wonderful typography – while I have inherited the font family from the previous theme, the spacings and arrangement of text-based elements are all inherited wholely from the 22px stylesheet. Hybrid comes with a few different stylehsheets – 18px, 20px and etc, indicating the line height. I wanted my text to be more spaced out, so I picked 22px.

Randomity, and the essence of it

This theme incorporated some interesting randomity in it – the gallery images in the gallery window changes everytime you load it – not only does the array of images displayed changes, their arrangement is also jumbled up upon each reload. I’ve combined several shuffling and randomising techniques to achieve that, maybe I’ll blog about it later :) if you want it, just tell me.

Another one is the Twitter users that I follow – I have their avatars displayed in the sidebar. I have a lot of them, but I only randomly display 14 of them while the rest is hidden so that I do not clutter the sidebar up. It’s a lot of PHP stuff that I had to do, but it was fun! I spent one whole day just doing the PHP part for the Twitter widget. Tedious, but very fun and enlightening.

Fonts and sIFR

The main typeface I use for the headers and the introductory paragraph is Alte Haas Grotesk by designer Yann le Coroller. The fontw as featured in the previous week’s Fonty Friday feature, which I run on a weekly basis. For the logo, I used Colaborate Regular by Ralph Oliver du Carrois.

Since not everyone has Alte Haas Grotesk installed in their computers and that the CSS support for @font-face is rather patchy, font replacement methods, whether is it by flash or by images, are preferred. I did a little research and decide to settle for sIFR – Scalable Inman Flash Replacement. I’ve made sIFR to only replace post and page titles, so that I won’t overload your computer and make performance sluggish – anyway, it’s really, really not recommended that you use sIFR for a big chuck of text! Keep it to headers only :)

Javascript-powered feautures that gracefully degrades

One feature that I put in a lot of effort struggling to make sure that it gets incorporated into the theme is gracefully-degrading javascript-powered features when javascript is not available or disabled. As you know, many sites nowadays are powered by javascript and many of them actually breaks when JS is disabled – a good example will be YouTube – try disabling JS in your browser and see what happens.

Most of the effects you see here are powered by jQuery, a very light-weight javascript library that helps you to achieve many things that requires advance knowledge of javascript in the past. Simple actions like the toggle effect in the comment form (try clicking on the labels and see what happen) and in the Twitter section on the sidebar (visible on main page only) are easily achieved by knowing just a little bit of jQuery. Lovely, isn’t it?

jQuery also allows me to select last-child of a parent element – the :last-child pseudo-class is not very well supported in every single browser (hint hint, IE6) and so we can actually use jQuery to insert a class to the last-child. If JS is disabled, the visual impact is not too obvious to be seen while in most JS-enabled visitors, it helps to achieve a uniform, consistent appearance of list items and etc.

jQuery is also used to create the fading effect of the header navigation links, as well as the Next and Prev buttons of the gallery window in the header. I might be writing a little more about how that is achieved in the future, but I shall not bore you to death in this entry.

I’m still learning how to use jQuery, so in this theme’s functions.js file, I’ve also added annotations and urls to useful websites for first-time jQuery learners. They are excellent resources where one can start learning jQuery, with little prior knowledge of any programming languages.

The 404 page

For this theme, I’ve also designed a cute little 404 page that people will land on if they’ve followed a broken link (it can be any, but I ‘m giving you this for convenience’s sake). Check it out!

Improved gallery

Last, but not least, the Gallery page has been improved upon too. Without the obstruction of the sidebar, there’s now more space for photos, heh!

That’s all!

I guess I shall keep this post short. If you have any questions, feel free to shoot! Anyway, I have a question for anyone who’s reading this: what WP themes do you use for your theme framework? Do you create a theme completely from groundup, or modify existing themes (like me) ?

Related posts that might interest you:

8 Javascript solutions to common CSS problems

Terry — Mon, 23 Mar 2009 20:34:45 +0000

8 Javascript solutions to common CSS problems

Jean-Baptiste Jung shares 8 ingenious jQuery-based javascript solutions on CatsWhoCode.comto circumvent the common CSS problems. While CSS is a semantically correct way of styling your webpages, not all popular browsers (like IE6, I know this comes very naturally for a designer) support CSS3 and there’s always this problem of cross-browser compatibility. Little do many people know that Javascript can actually fix a myriad of CSS problems – you’ve never thought they go along well together, do you?

From important fixes like the jQuery PNG transparency fix to the absolutely evil IE6-crashing script (so as to scare visitors into switching browsers, or is it more like scaring visitors away? That’s up to you), this article is a must-read for designers and coders alike.

Related posts that might interest you:

Easy Display Switch with CSS and jQuery

Terry — Sat, 21 Mar 2009 17:39:51 +0000

Easy Display Switch with CSS and jQuery

As javascript libraries becomes increasingly popular among designers and website visitors alike, your daily visitors are now expecting more than just static pages – they would be thrilled to see interactive, fluid pages. In 2006 A List Apart published an article on the holy grail of webdesign, which involves coding for fluid layouts in CSS. With the popularity ofÂ javascript libraries like jQuery, Soh Tanaka has written an excellent tutorial on teaching us how to incorporate fluid display options on our pages – allowing visitors to switch between different forms of display (think iTunes libraries). An interesting concept that is actually very simple, and can be easily done with a few lines of jQuery and CSS.

Basically, the technique behind the display switch is simply to style the list containing the gallery items separately – one in the thumbnail form and the other in the detailed listing form. And then you will use jQuery to add/remove a class that is appended to the list, to achieve the different appearance all coded by CSS.

Related posts that might interest you: