There are a handful of frameworks, techniques and approaches that are built towards this goal of maintainability, scalability and reusability of CSS. Each of them is having its own pros and cons. But, this is not a stage to elaborate on all of them.

This article is an introduction to implementing the concept of ‘Object Oriented Programming’ in building CSS for high scale websites and applications, with an eye on maintainability and reusability.

What is OO CSS?

The concept of ‘Object Oriented Programming’, is widespread among developers, and forms the basic for any modern programming language. Features like data abstraction, modularity and inheritance make it a favorite in coding large-scale applications.

Object Oriented CSS, as the name suggests, is implementing the concepts of OOP in structuring and building CSS rules, which are easy to reuse, thereby reducing the loading time and increasing the performance of web pages incredibly! The key point here is, to identify, build and style modular reusable ‘objects’ in a page, and to reuse it in multiple instances by extending them with additional features wherever needed. Here an ‘object’ refers to the basic HTML markup and its CSS rules. Apparently, here, the key challenge is going to be, identifying the ‘object’ and building rules for it.

This is neither a framework nor a technology, but an approach adopted in building the rules, so as to make the code more reusable, maintainable and scalable. You may already have been making use of this concept in coding your style-sheet for years, but may not be aware of this terminology :).

A UI engineer at Yahoo (‘Nicole Sullivan’ ) coined the term. She had made a number of presentations on the topic on various big stages (http://developer.yahoo.net/blogs/theater/archives/2009/03/website_and_webapp_performance.html) and is also included in a feature on Women in Technology.

Nicole, who has been hired by Facebook recently, for optimizing the CSS and web page performance, has been leading the way in implementing this approach in the pages for the social networking giant, and the results are to be seen. A faster loading FB, with significantly less response time! This is exactly what this approach of building CSS promises to give back. But again, like all other frameworks, this too has pitfalls and advantages which we shall discuss in detail.

Following are some key aspects in object-oriented approach to CSS building:

1. Create a component library
2. Separate container and content / Avoid Location dependent styles
3. Separate Structure and skin
4. Extend base objects using class names
5. Stick to semantic class names

Create a component library

This is the first thing to do, while building a OO CSS framework for your application, and this is the most time consuming process too. You will have to carefully study the screens of the app, and come up with the recurring reusable UI patterns, and will have to create a library consisting of HTML markup and respective CSS rules of all such components first. This may take some initial time, as you may need to filter out the components and find out the basic structure of a component, and its variations along different screens.

E.g. For a blog, ‘metadata (Refer to the marked area in the figure below)’ will be present in multiple instances of a page. After closer scrutiny, you will come to know that, all the metadata can have the same HTML markup, and the variations can be addressed using CSS (the font size, color, margin and padding are different in each of the occurrences of metadata component). Select a markup, as a base structure, in which you can accommodate majority of the elements that possibly can come in the particular component.

In our example our basic structure of the ‘metadata’ component will be:

Base Markup

<p class=”metadata”><a>Author name</a>commented on<a>21-02-2010</a>@</p>

Base rule

.metadata{font-size:1.2em; text-align:left; margin:10px 0;}

Thus, ‘metadata’ can be now independently used within any other element in the markup, and will have a consistent look and feel, irrespective of where it is used. But as we can see in the figure above, there are multiple variations of the component. This we will tackle using CSS, and will be discussing in the following points.

This way, figure out all the reusable components, and create rules and markup, and group them separately in the CSS file. (It’s even fine to create a separate CSS for the component library, and then merge it with others later during deployment.)

Separate Content from Container / Avoid location dependent styles

This is one of the primary requirements of following an OO approach to building CSS files. The core idea here is to consciously differentiate the rules of containers and the content that comes within them, so that content can be plugged into any containers irrespective of their parents.

Often while building large-scale CSS rules there will be instances where a single component will be appearing differently in various instances, when put in different containers. One of the solutions adopted by front-end engineers, for addressing this problem was to assign location dependent selectors to that particular component.

E.g. With reference to the example used in the previous point, where there are multiple variations of the same component – ‘metadata’, each instance can be given location dependent rules by combining the base class ‘metadata’ with the relevant classes/IDs for the containers. i.e.,

‘metadata’ in a blog post can be styled as: .post .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}
‘metadata’ in a comment can be styled as: .comment .metadata{overriding rules}

The OOCSS approach advocates avoiding this type of usage. Instead extend the base class by adding more classes, thereby extending the attributes of the base component to match the variation. We shall discuss the concept of extending the base class in the following points.

Separate structure and skin

In the first point ‘Creating component library’, we discussed the importance of identifying reusable components, and building base classes and base structures for them. While creating those base rules, an important thing to keep in mind is to separate the structure and skin. In other words, while defining a base class in the component library, we should not create skin-level rules, like width, height, background images, border styles, etc, that can make the component more specific to a certain container.

E.g. For our base class, ‘metadata’ with the following rule

.metadata{font-size:1.2em; margin:10px 0;},

Adding more skin-level rules as below,

.metadata{font-size:1.2em; margin:10px 0; <strong>width:500px; background-color:#efefef; color:#fff;</strong>},

can make it more of a specific component than a generic one, thereby making it difficult to reuse it in many other containers, which would need it to be rendered in a different ‘skin’. Also another danger of not separating structure and skin will be the ‘Specificity war’.

Extend base objects using class names

As discussed in the second point ‘Separate content from container’, avoiding the usage of contextual selectors will make the content independent from their parent containers and hence will be truly usable across the application. So how do we instantiate the variations of the same object in different containers? What is the solution? Well here comes the concept of extending the base ‘object’ (again another term coined by Nicole Sullivan), by adding more class names to it depending on the context, rather than tightly coupling the object with the class names of the containers in which it is to be placed.

E.g. In the first figure of the ‘metadata’ object, where the same object needs to be rendered differently in various containers,

The HTML markup of each of them will look like:

<p class=”metadata commentmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata postmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>
<p class=”metadata authorlistmetadata”><a>Authorname</a>commented on<a>21-02-2010</a>@</p>

The CSS rules will be:

.metadata{font-size:1.2em; margin:10px 0;}
.commentmetadata{font-size:1em; margin:0 0 10px 0; color:#063070; }
.postmetadata{ color:#063070; }
.authormetadata{ color:#fff; }

This is a very simple demonstration, to comprehend the concept of implementing OO programming. As the size of the app becomes larger, the UI patterns will become more complex, and there lies the actual challenge and advantage of using such an approach.

Stick to semantic class names

A challenge in building CSS for high-scale web applications is to logically come up with meaningful class / ID names matching with the context and moreover making sure, they are reusable and still make sense. With the concept of ‘extending’ base objects, it’s easy to fall into the practice of creating ‘presentational class names’. Some easy examples are ‘leftCol’, ‘redText’, ‘midCol’, ‘bigText’, ‘bolderText’ etc. Such class names are not reusable and are a hindrance to scalability.

Always stick to logical and semantic class names relating to the logical meaning of the component, rather than its presentational meaning. It means, instead of giving the text block with a yellow background color, the class name ‘yellowText’, ‘notification’ would be a more sensible name, as it is a notification element that pops out to notify some activities within the system.

Pros and Cons?

Following such an approach of building CSS has its own pitfalls and advantages

Here are a few cases, where adopting such a framework ‘may’ backfire:

1. OOCSS is suited to really large websites / application which are filled with reusable components. It may not give desired results in smaller websites and applications. So decide sensibly depending on the size of the work in hand
2. If not smartly used, creating the component library can turn out to be a mess, and become a maintenance nightmare for other coders
3. Documentation is a must. Each block of code should be clearly commented out with the right points for other coders to absorb the concept, which otherwise can become too tedious in case of a knowledge transition

Some obvious advantages of adopting this approach are:

1. Less lines of CSS code
2. Cleaner HTML markup, with logically sensible class names and hierarchy
3. Semantic markup, means more SEO friendly pages
4. Far better page optimization, with much faster loading times, since most of the components are reused
5. Scalable markup and CSS code, where more components can be added into the library without disturbing other components, as the base objects are independent of any other containers
6. Easily theme-able layouts, since changes to the base object can completely change almost the whole presentation layer instantly

Courtesy & Resources

http://www.webdirections.org/blog/object-oriented-css-the-video/

http://www.stubbornella.org/content/2009/02/28/object-oriented-css-grids-on-github/

http://www.iconfinder.com for all the icon resources

Well, this is not a zoology question being thrown at you. If you are working on a team dealing with websites / apps, and if there is a design team working with a team of developers, you probably would be witnessing the answer to this question every single day you work!

This is an inevitable fact, and it is this difference that makes the two communities thrive, and the best team is the one which finds a way to converge the collective wisdom of both these ‘species’ into the final stage of their deliverable – An ideal human-machine interaction experience, filled with life and satisfaction.

But in reality, most of the teams stumble at this moment, when the ideologies of both of them should be given weight and injected into the final product, and this shortcoming, is the whole essence of this article.

What is the gap?

Every man-made object is created based on a single principle. Make a task easier and faster to accomplish, and for each object/gadget, the ‘form’ (the physical appearance) and ‘function’ (the way it responds and processes the task) plays an important role. The same logic prevails, when it comes to computer-based systems also. Here the ‘form’ is – ‘Look and Feel’ (Usability of UI and Interaction), and ‘function’ is – ‘performance and efficiency’ (Efficiency of the empowering technology implementation)

Talking about computer based interfaces, designers are in charge of ‘Form’, and developers, ‘Function’. In short an app is the work of developers, hidden below the skin and skeleton created by the designers. The vital part is to retain the ‘skin and skeleton’ till the end product without any change whatsoever, and this is the most unattended part of the process in most of the teams. Results are half baked products that are unusable, in spite of the numerous hours of effort put in by the designers, after painstakingly drafting wireframes, Visual Comps, and Prototypes, only to find all those ‘details’ ignored vehemently in the end product. It is not a pleasant experience to find a deployed app, without that gradient on hover implemented, after you spent hours finalizing the color scheme.

This ‘erosion’ in the ‘form’ proposed by the design team, when the product reaches its final stages of development constitutes the majority of the ‘Gap’.

What creates this gap?

There is an array of reasons we can attribute such a gap to. Here are some practical points, which play an important role in bridging the gap.

• The missing link – Front-end Engineering
• Awareness of design principles and usability
• Team work
• The ‘Hybrid’ designer
• Passion for the finished product
• Designer – Developer meetings

The missing link – Front-end Engineering

Often, the role of a design team comes to an end by delivering the Visual comps, by the visual designer, out of the wireframes. The dev team takes over, and from here the erosion starts slowly, ignoring and omitting the details in the design, concentrating only on the ‘function’, to the extent that, the page looks completely disconnected from the visual design.

So apparently, the gap between the Visual comps and the functional page is where the actual work needs to be done.

A front-end engineer comes in really handy in such a scenario, and forms an integral part of a design team, by considerably reducing the gap between the visual comps, and the functional page. An ideal candidate for this position should have expertise in XHTML, CSS and JS, which enables him to create clickable prototypes matching the Visual comps, or at least they’re as close as possible. By the addition of such a skill set, the dev team can concentrate more on ‘function’, as they always do, and the design team can be rest assured that, all the details are captured visually as well.

Awareness of design principles and usability

A developer is not destined to just code the application to perfection. It’s an added boon, in having a design conscious developer on board and avoid some basic mistakes which may have arisen due to lack of basic knowledge of design. Most of the shortcomings and problems that widen the gap between the designer and developer, is the missing knowledge of design principles, and failing to understand the importance of a good design and how it plays an important role in increasing the credibility and usability of a system. A design team working in isolation from a dev team, and vice versa, is not going to be able to bridge the gap. In fact, both the team should co-exist and interact by exchanging ideas and conducting knowledge sharing sessions and talks. This can help build a rapport as well as create a common ground as far as awareness of design is concerned.

This is really important for the sustained growth of a team as a whole, and also helps in eliminating critical differences at any point during the life of an application

Teamwork

It’s the team which gets the credit at the end of a successful project, and every member contributes his part to the bigger cause. Working in a team of designers and developers is always going to be a challenge, where ideas are subject to conflict and solutions are always a result of brainstorming and negotiation.

As always, it takes a lot of team playing skills, to convince the developer to stick to the design guidelines and come up with an appealing application that works and looks good at the same time. Creating a good rapport with the team members is vital, and often it can solve most of the shortcomings related to bridging the designer-developer gap. Both the teams should be willing to tackle any obstacles together, whether design or development related.

The ‘Hybrid’ designer

Delivery of XHTML pages to the dev team, alone doesn’t end the role of the design team in the whole process. He should be able to keep a close tab on the development process and should ideally understand the basics of coding, to tackle a possible deviation from the design guidelines, due to technical limitations and reasons native to the technology used.

This makes a multi-skilled designer, an integral part of any design team. At a time where people are hired based on core skill set expertise, hybrid designers can make the real difference, and its high time the hiring managers realize this and open up the doors for generalization also, rather than concentrate only on specialization!

Passion for the ‘Finished product’

Most of the time, an output-oriented team can have adverse effect on the final deliverable if they don’t see the bigger picture, which is the product itself!

It is the passion to see the final product emerge perfectly, which is missing among most of the team members, which results in those loopholes and shortcomings in the whole product. It’s a team effort and each individual should see that their contribution is towards a larger goal and shed the mindset of just meeting their individual milestones. This is an area where a closely knit team, scores over large teams, with hundreds of members, working together but yet in isolation.

Team rapport is the underlining factor!

Designer – Developer meetings

As mentioned, it is really important to take the ideas of both the designers and developers and make it something productive and useful. Meetings comprising both these ‘species’ together would serve the purpose. There would be some initial hiccups, due to the contrasting opinions, but believe me, its worth the effort, and the rapport and confidence that such a meeting instills within the team will be really commendable and helpful for completing better products in the end.

The Result

With the awareness of usability and user experience moving up the ladder, products are going to be judged based on their performance and ease of use, and it’s really vital to bridge this gap as early as possible, and move towards the world of usable and straight forward human-machine interaction, which leaves an ever lasting impression on the user.

Folks at WordPress have just released WordPress 3.1 (Code name “Reinhardt”), 14th version of World’s most famous and award-winning publishing software. This release has some fantabulous features like Internal Linking and a WordPress.com styled admin bar on front end which makes it very easy to visit most used features of back-end. Read on to have an overview of some major features of this release.

Internal Linking

We can’t stress enough on the importance of Internal linking for SEO of your WordPress blog. To be honest, the process of Internal linking was pretty painful unless you would use some plugins or hacks to find relevant posts for internal linking. With WordPress 3.1 this is a breeze now. WordPress now have built-in functionality to link your new content with already published content. Below is a screenshot of this kick-ass functionality.

I’ve updated my personal blog and I have to say I’m in love with it.

Admin Bar

If you visit WordPress.com as a logged-in user, you will see a bar at top of page which gives you shortcuts to important and most used areas of backend. With WordPress 3.1, you can enjoy the same functionality on self hosted blogs ;)

However if you don’t like this functionality, you can always disable it by going to your user profile.

Admin area Tweaks

Ajaxification: Latest version of WordPress also has improved the posts area too with Ajaxification. You don’t have to reload pages while searching for posts. Also you can go to specific page number by entering page number itself in Posts admin area. Below is a video for this functionality to even describe it better.

Overhauled Blue Theme of Admin area is also included in this release which looks stunning, a pretty good job done by UX team of WordPress.

Now we will cover new functionality from developer’s point of view.

Post Formats

Battle between WordPress and Tumblr is an open secret. Both of them have been trying to grab each other’s user base. Here at 1wd we are die-hard fans of WordPress and I am not reluctant in saying that I’m biased towards WordPress :) With these new Post formats, WordPress provides you out of the box functionality for creating and styling different type of posts i.e links,chat,photo etc.

Here is a pretty good write-up on post formats by core contributor of WordPress, Otto.

An Even Better CMS

WordPress 3.1 allows you to create advanced taxonomies and call custom field queries.Result of which is WordPress is even better and comprehensive CMS. Matt Mullenweg, Founder of WordPress summed up this pretty well in release post of 3.1.

There’s a bucket of candy for developers as well, including our new Post Formats support which makes it easy for themes to create portable tumblelogs with different styling for different types of posts, new CMS capabilities like archive pages for custom content types, a new Network Admin, an overhaul of the import and export system, and the ability to perform advanced taxonomy and custom fields queries.

With the 3.1 release, WordPress is more of a CMS than ever before. The only limit to what you can build is your imagination.

Here is a list of complete features and changelog in WordPress 3.1. All these exciting changes demand that you should upgrade your WordPress right now :D with no time delay. This update is available in your dashboard and you can download it as well from here

Be sure to check the previous parts:

• Part 1
• Part 2
• Part 3

You can see the live demo here. You can also download the source code here.

Firstly, open up a new HTML page, add the basic HTML code and then include jQuery like so:

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">

	</script>

I’ve also added another script tag that is blank. This is where our code will go. Notice that when I included jQuery from the Google CDN (we covered this back in the first post) I’ve used “jquery/1/jquery.min.js”. Using just “1″ means we will automatically be given the most recent version of jQuery, until we get to jQuery 2, which is a fair way off for now. You could be much more specific, of course, if you wished, but for me it makes logical sense to keep up to date with the most recent versions.

Now we’ve got that sorted, I’ve got a basic HTML structure for our gallery, ready made with five images. If you go to the bottom of this post, you can download them, along with the completed code.

div id="gallery">
		<div class="galleryitem"><img src="image1.jpg" alt="A beautiful Sunset over a field" /><p>A beautiful Sunset over a field</p></div>
		<div class="galleryitem"><img src="image2.jpg" alt="Some penguins on the beach" /><p>Some penguins on the beach</p></div>
		<div class="galleryitem"><img src="image3.jpg" alt="The sun trying to break through the clouds" /><p>The sun trying to break through the clouds</p></div>
		<div class="galleryitem"><img src="image4.jpg" alt="Palm tress on a sunny day" /><p>Palm tress on a sunny day</p></div>
		<div class="galleryitem"><img src="image5.jpg" alt="The sun bursting through the tall grass" /><p>The sun bursting through the tall grass</p></div>
	</div>

Next up we will apply some CSS styling to make it look nicer. Seeing as this is a jQuery tutorial, I’m not going to explain much of this. Essentially I’m just adding a border, styling the font and floating the images so they display next to each other.

	#gallery {width: 960px; margin: 0 auto;}
		.galleryitem {width: 300px; height: 300px;float: left; font-family: Lucida Sans Unicode, Arial; font-style: italic; font-size: 13px; border: 5px solid black; margin: 3px;}
		.galleryitem img {width: 300px;}
		.galleryitem p {text-indent: 15px;}

And your page should look something like this:

Looks pretty good!

Our next step is going to be some jQuery. At last! We are going to remove the paragraphs and make them appear on hover, with some nice CSS styling to make them look really nice. What I’ve done is create a CSS id which we will apply to a paragraph when the corresponding image is hovered over:

	#galleryhoverp { margin-top: -55px; background-color: black; opacity: 0.5;
		-moz-opacity: 0.5;
		filter:alpha(opacity=50); height: 40px; color: white; padding-top: 10px;}

So our first step is to hide all the paragraphs and then resize our gallery items so just the image is displayed. We’ll also save all our gallery items to a variable for later usage.

	$('p').hide();
	var galleryItems = $('.galleryitem');
		galleryItems.css('height', '200px');

And now lets add an effect for when the gallery item is hovered over. Firstly lets find all the images and save them.

var images = $('.galleryitem').find('img');

The hover function is slightly unusual in that it takes two functions. The first is what should happen when the image is hovered over, the second when the mouse stops hovering over that image.

	galleryItems.hover(
			function() {
				//when hovered over
			},
			function() {
				//when hovered ends
			}
		)

The code is very simple. We just select the next paragraph using the next() function, show it and then give it that id we created a while back. On the hover-out function, we just do the exact opposite:

galleryItems.hover(
			function() {
				$(this).children("id").next('p').show().attr('id', 'galleryhoverp');
			},
			function() {
				$(this).children("id").next('p').hide().attr('id', '');
			}
		)

And there you go! If you try it out now you should see the paragraphs show when you hover over, and then leave when you change to a different image.

There is one more effect we will add. When you click on an image, it should enlarge, fill the centre of the screen and all the other images disappear. Again, I’m creating some CSS which we will add to the image we want to display:

#singleimagedisplay {width: 800px;}
#singleimagedisplay img {width: 800px;}
#singleimagedisplay a {float: right; color: white;}

We’ll add this code to the image’s parent – the div with a class of ‘galleryitem’. The code for the entire click event is below:

	images.click(function() {
			$(this).parent().attr('id', 'singleimagedisplay').css('height', $(this).height()).siblings().hide();
			$(this).next('p').show().html($(this).next('p').html() + '<a href="jquery1.html">Back</a>');

		})

So, when each image is clicked, these are the steps we take:
1. Give the id of ‘singleimagedisplay’ to the image’s parent.
2. Set the height of the image parent to the height of the image. This uses jQuery’s height() function, which finds the height of the specified item.
3. Select all the other gallery item divs using siblings() and hide them.
4. Edit the paragraph that comes with the image to have a link on the end, which links back to the home page. jQuery’s HTML function allows us to edit the HTML code with in an item, but only if we put something inside the brackets. Else, it just gets us the value. So .html() gets the code inside the paragraph, and html(‘new stuff’) changes the content of the paragraph. Bear in mind, if you use .text() or .text(‘hello’) that will just edit the text, but if you wish to add HTML code inside an item, you need to use html().

And if you check out your page, you will find it works! There is one final issue. When viewing a single image, if you hover out, the paragraph goes away. We don’t want this, so we need to go back to our hover function and make a slight edit:

galleryItems.hover(
			function() {
				if($(this).attr('id')!='singleimagedisplay')
				{

					$(this).children("img").next('p').show().attr('id', 'galleryhoverp');
				}

			},
			function() {
				if($(this).attr('id')!='singleimagedisplay')
				{
					$(this).children("img").next('p').hide().attr('id', '');
				}
			}
		);

All we do is see if the id on the item is not set to ‘singleimagedisplay’ which means that we are on the main gallery page, and then we can run the code we had originally. And we are done. You can download everything below:

Download the page and images.

I hope you found this a useful lesson, and I will see you next time.

The technology has taken over, and the collective wisdom of humanity, is slowly getting harnessed onto the most powerful medium today – the WEB ! Kids are more concerned about making more friends on their favorite social-networking site than friends at school / college, we talk through comments and write on walls (I would’ve been happier, if we burn that much calorie to write on an actual wall … but this is something else J). The internet is slowly becoming a part of daily life now. Imagine a day, when you could gather all the data that you would need, fetched from the millions of servers on the web, custom tailored to fit into your global profile page, without needing to go searching deeply into the fathoms of the complex web traffic. Yes, that is where the web is heading towards, and that day will be called – ‘The day of Semantic Web’, and the most important players in that era will be none other than our old kid ‘HTML’ and the relatively sophisticated kid ‘Semantics’.

I plan to throw light on the relationship between these 2, from a web developer’s point of view.

What is ‘SEMANTICS’?

Wikipedia, says - ‘Semantics (from Greek  – semantikos) is the study of meaning, usually in language’. Relating this to the internet, semantics is the study of meaning of data, ie, it is the study of the concept which makes a machine, understand what type of data it is dealing with (as far as web is concerned, the ‘machine’ can be the browser, or any program / code, that deals with the data).

Example: A page may contain, a group of data, which are related to each other, like the steps to be taken to accomplish a task. There may be a tabular data, which comprehends the details of a product, its configurations and price details. There may be a date on which a particular document was created … and the list goes on and on.  In order to make those content / data meaningful to the machines, we need to follow some global guidelines, while creating them,  which entitles the data to be a particular type or the other. Streamlining the data like this would make it really easier to make the data ‘machine readable’ and this is the first step towards efficient data segregation and relation.

For instance, how would it feel like, if you are able to aggregate all the data available about a new gadget that you are planning to buy – the pricing, reviews, configuration, features  everything displayed in a single page, fetched from millions of machine readable data available over the web !

This exactly is the future of web, and the search god ‘Google’, is already relying on such search features, which would make them ‘uber-god’ of the search engine world!

How is HTML related to ‘Semantics’?

Since, a browser is the primary interface enabling the user to get connected to the internet (computer screen, mobile screen, TV, Projector are all different medias, but ultimately, all these needs a browser to download the page locally and view the contents), and there is only one way, with which content can be displayed in a browser – which is the ‘HTML’ way. So, HTML holds the major stake, in determining the way, data has to be displayed on a page, and the ‘tags’ used in rendering the output as HTML, to a browser determines the meaningfulness of the data contained. This is important, because a particular data/content can be rendered, using more than one HTML tag.

The page/content is said to be meaningfully rendered, or said to be ‘semantically correct’, if those are rendered using tags which represent the correct meaning of the data. Eg.  A date rendered in a tag, a quote rendered in a tag, a label rendered in a tag etcetra.

Find below, the ‘semantics’ of a few HTML tags

(courtesy: htmlplayground)

Why Semantics?

The actual advantages of sticking to semantically correct HTML are numerous. Here are a few of them …

Search Engine Optimization

With the advent of web, information is money, and getting the right information which you look for, at the right time is more important, since no body wants to waste time searching for an information too long. Here comes the era of search engines, and the key here is to make the data / content in your piece of land on the web, appear in a decent position of SERP (Search Engine Result Pages). Using semantically correct code means that your page is easy to read for the machines, and ‘search engine robots’ are nothing else, but machines / programs of search engines J. So, semantically correctly coded pages stands a better chance to appear on top of SERPs.

Scalability / Flexibility

Updating the pages, which are semantically well coded, is a pleasure! Since each sections are coded using the relevant tags, a change in style for the element can be done in the updation of CSS selector for that particular tag and markup level changes can also be done seamlessly.

Accessibility

There are visually impaired users using the internet, and they might use a screen reader to read out the contents aloud. These screen readers are programs (machines in our terminology J)which reads the content of the page, by trying to understand the meaning of the data represented.

There is not a better way to make things easier for these programs to understand the content of the page, than  using a semantically well coded page ?

Cleaner and shorter code

Semantically correct page means, a clean and crisper code, which also means lightweight stuff for the browser to load !

‘The pursuit of Semantic Wellness’ – some practical insights

The pursuit to achieve ‘semantic wellness’, never ends! Every time you code a page, and assume it to be the semantically perfect markup ever, there comes another better way to represent the same in a more correct way. It is all practice, experience and a thorough knowledge of the HTML specifications, which would make a coder compliant to semantics. Here are some insights that I have gained over a period of time as a UX evangelist and Front end engineer, that would help you to be successful in your pursuit of ‘semantic wellness’ :)

Avoid ‘DIV syndrome’

Separating content and presentation using a DIV based layout with CSS, doesn’t mean that DIV is the only tag that you should be using. Avoid ‘DIVITIS’ by carefully choosing the tags for coding your page. This is the first step for ‘ semantic wellness ’.  A great resource to start with is ‘htmlplayground’

It really is a pain, but learn to embrace it

Fast tracking your HTML coding can save you time and you may be able to earn more by billing more to the client. But ‘Better things come at a cost’ ! If you want to be a semantically correct coder, be ready to bear the brunt of the excess hours and frustrating cross-browser issues and fixes. But remember, all those hardships are worth it, and the more you learn to embrace it, the more valuable you would be as a web standard evangelist.

Know the structure of the content/information

For knowing which tags to use where, it is extremely important to understand the type of content, in an Information Architecture level.

For eg .

• The main navigation of a page, are a list of items that have something in common. ie, they all belong to the logical set called, main navigation. Here the ideal HTML tag candidate is unordered list (ul).
• A step wizard, where there are a number of steps required to accomplish a task, will need to have the chronological order of the step as a very important factor. Here the ideal HTML tag candidate is ordered list (ol)
• A list of posts displayed in a page are nothing but unordered lists (ul)
• A glossary with alphabetical segregation is a couplet of, a term and a definition. Here the ideal HTML tag candidate is definition lists (dl)

Some related resources

• Writing semantic markup
• Guide to semantic mark-up

Watch out your Class names and ID names

Semantic wellness does not mainly fall under well written HTML tags. But it spills over to the CSS also. I would easily find out a semantic compliant coder, by scanning through the naming conventions of the classes and IDs of the CSS file !

Always avoid presentational names for classes or IDs, and it would yell out to the world about your attitude towards semantics. Read this for more insights on structural naming convention.

HTML5 – The big leap towards ‘Semantic wellness’

As I told in the introduction of this article, the coming era of the web will be that of Semantic web, and the giants of web have already started embracing this in a very big way. This latest edition to the family HTML is going to be biggest leap of web towards a semantically correct place. With a lot of groundbreaking proprietary tags implemented, and the dependency of various third-party tools being dropped, this version of HTML is truly going to lead the bandwagon towards the semantic web.

Here is a brief account on the new tags that are implemented in HTML5

<header></header>
The header of a 'section', typically a headline or grouping of headlines, but may also contain supplemental information about the section.

<footer></footer>
This tag logically represents the footer section, with the copyright and other footer information including the footer links and all

<nav></nav>
Represents the navigation of the page, where normally there would be a list of links which leads to respetive contents/pages. This tag should be in the same level as header, footer and the main section tags used in a particular page

<article></article>
An article could represent content that logically is equivalent to an entry of a blog, an article or some other content from an external source

<aside></aside>
An aside indicates content that is tangentially related to the content around it.

<audio></audio>
Defines sound, like music or audio streams

<video></video>
Defines video, like video clip or streaming video

The following is a visual representation of the architecture of HTML tags in a typical web page.

Resources on HTML5

• HTML5 Readiness
• Caniuse.com
• HTML5 Security Cheatsheet
• Accessible HTML5 Video
• Test your browser support for HTML5

Resource to help you out in ‘The Pursuit of Semantic Wellness’

Semantics is a vast ocean by itself … and what i have covered here is its relation with the HTML. This article intends to throw on the aspects of semantics, when it comes to coding an HTML page, and is aimed at those aspiring front end engineers and web standards evangelists, to help them out in bringing out the best. Sharing few of the resources that I have gathered over years, which may help you out to become a semantic rockstar :)

• semantic-code-what-why-how
• Div Mania
• Tying web 3.0
• HTML Vs Body Element
• Preparing for HTML5
• W3C Semantic Web FAQ

Don’t forget to share your input with us via comments section. Thanks for reading.

Not only is it useful to the user because it makes the process of filling out the form a lot quicker and a lot less painful, but it also shows that you actually care about them. For the user there’s nothing better than knowing right away if they’re doing it correctly.

In this tutorial we’re going to learn how to build real-time form validation using jQuery. If you’d like to see what you’ll be building, you can watch the short video intro or hit the “Live Demo” button and check it out.

Table of Contents

1. How Will We Achieve That?
2. Project Structure
3. Coding the HTML
   • Some Basic HTML and Importing jQuery + Validation Script
   • The Form, Splitted Into Three Sections
   • Adding Fields + Submit Button
4. Spicing It Up With CSS
5. All The Fun: jQuery Magic
   • Planning
   • What Do We Need?
   • Our Script “Packaging”
   • Validating User’s Name
   • Validating User’s Date of Birth
   • Validating User’s Gender
   • Validating Vehicles Owned by User
   • Validating User’s Email Address
   • Validating User’s About Info
   • Final sendIt Method
   • Managing User’s Submit Action
6. Final Product
7. After Word

How Will We Achieve That?

Now, there are actually many ways to do that; here are the most common:

1. We could put </span> (which will be holding validation info) next to our form field and give it an ID so we can easily access its content later
2. We could wrap every field in </p> with applied ID, and put </span> (which will be holding validation info) inside it, so we can easily access its content, through that </p>‘s child-span
3. We could wrap every field in </p> with applied ID, and inject </span> with validation info to it

It will all work, but neither is the optimal way. Why? Because there’s too much messing with your HTML code and you’ll end up with bunch of needless tags that are required by your validation script, but which your form doesn’t really need.

It’s clearly not the way to go, so instead we’re going to do this the way I do it myself. In my opinion it’s the best solution, although it’s not very common; I honestly have never came across this method, I’ve never seen it used by someone. But if you have, please let me know in the comments.

OK, so what are we going to do?

1. We’re going to write simplest form possible, nice and clean, no unnecessary tags whatsoever
2. As the user fills out particular field, we’re goinng to validate it on the fly and:
   • grab its position in the window (top and left)
   • grab its width
   • add width and the left offset (from the field’s position) together so we know where the field ends
   • put validation info into </div> with applied ID, inject it to the document, position it absolutely on the spot where the field ends, and manipulate its class as needed (for example .correct or .incorrect)

That way we keep our HTML code nice and clean.

Note: It’s vital to always provide server-side validation as well (for users with turned off JavaScript).

Project Structure

We are going to need three files:

• index.html
• style.css
• validation.js

I’m gonna go roughly through the HTML coding, provide you with all needed CSS – and then focus mostly on our jQuery script, which is the most important thing and what we’re hoping to learn today.

Coding the HTML

Step 1: Some Basic HTML and Importing jQuery + Validation Script

First, make index.html file and put some basic code there; you can see that we imported jQuery at the bottom, along with our validation.js file, which will contain our validation script:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real-Time Form Validation Using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="content">

</div><!-- content -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="validate.js" charset="utf-8"></script>
</body>
</html>

Step 2: The Form, Splitted Into Three Sections

We’re going to split the form into three sections using </fieldset>, and </label> for each section headline:

1. Personal Info (user name, date of birth, gender, vehicles)
2. Email (user’s email adress)
3. About (little info about the user)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real-Time Form Validation Using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="content">
<form id="jform" action="http://1stwebdesigner.com" method="post">
	<fieldset>
		<legend>Personal Info</legend>
	</fieldset>

	<fieldset>
		<legend>Email</legend>
	</fieldset>

	<fieldset>
		<legend>About You</legend>
	</fieldset>
</form>
</div><!-- content -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="validate.js" charset="utf-8"></script>
</body>
</html>

Step 3: Adding Fields + Submit Button

Great, now it’s time to finally add some fields to our form. For this tutorial we’re going to use several different fields:

• three text inputs: for user’s full name, date of birth and email adress
• radio buttons for user’s gender
• checkboxes for vehicles owned by the user
• textarea for little info about the user
• button for submit button

We’re going to wrap every set (label + field) in </p> to keep them separated and display them as blocks.

Your final index.html file should look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Real-Time Form Validation Using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

<div id="content">
	<form id="jform" action="http://1stwebdesigner.com" method="post">
		<fieldset>
			<legend>Personal Info</legend>
			<p>
				<label for="fullname" class="block">Full name:</label>
				<input type="text" name="fullname" id="fullname" />
			</p>
			<p>
				<label for="birthday" class="block">Day of birth <small>(dd-mm-yyyy)</small>:</label>
				<input type="text" name="birthday" id="birthday" />
			</p>
			<p>
				<label class="block">I am:</label>
				<input type="radio" name="gender" id="man" value="man" /> <label for="man">Man</label>
				<input type="radio" name="gender" id="woman" value="woman" /> <label for="woman">Woman</label>
			</p>
			<p>
				<label class="block">I own:</label>
				<input type="checkbox" name="vehicle" id="car" /> <label for="car">car</label>
				<input type="checkbox" name="vehicle" id="airplane" /> <label for="airplane">airplane</label>
				<input type="checkbox" name="vehicle" id="bicycle" /> <label for="bicycle">bicycle</label>
				<input type="checkbox" name="vehicle" id="ship" /> <label for="ship">ship</label>
			</p>
		</fieldset>

		<fieldset>
			<legend>Email</legend>
			<p>
				<label for="email" class="block">Email <small>(mickey@mou.se)</small>:</label>
				<input type="text" name="email" id="email" />
			</p>
		</fieldset>

		<fieldset>
			<legend>About You</legend>
			<p>
				<label for="about" class="block">Tell us a little bit about yourself:</label>
				<textarea id="about" cols="50" rows="10"></textarea>
			</p>
		</fieldset>
		<p>
			<button type="submit" id="send">submit</button>
		</p>
	</form>
</div><!-- content -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="validate.js" charset="utf-8"></script>
</body>
</html>

It may look a bit messy, but it’s because of the WP’s syntax highlighting plugin. It’s actually really clean, and that’s what we wanted to achieve afterall. Check it: save the above code as your index.html file, open it in your browser and look at the source code. Now it looks clean, isn’t it?

Spicing It Up With CSS

Since CSS styling is not our main focus in this tutorial, I’m not gonna go over this, but simply provide you with the CSS you’re going to need for this to work.

Create style.css file, put inside all the code from below and that’s it! Now everything should look sweet.

body {
	background: #efefef;
	margin: 0;
	padding: 0;
	border: none;
	text-align: center;
	font: normal 13px Georgia, "Times New Roman", Times, serif;
	color: #222;
}

#content {
	width: 500px;
	margin: 0 auto;
	margin-bottom: 25px;
	padding: 0;
	text-align: left;
}

fieldset {
	margin-top: 25px;
	padding: 15px;
	border: 1px solid #d1d1d1;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;

}

fieldset legend {
	font: normal 30px Verdana, Arial, Helvetica, sans-serif;
	text-shadow: 0 1px 1px #fff;
	letter-spacing: -1px;
	color: #273953;
}

input, textarea {
	padding: 3px;
}

label {
	cursor: pointer;
}

.block {
	display: block;
}

small {
	letter-spacing: 1px;
	font-size: 11px;
	font-style: italic;
	color: #9e9e9e;
}

.info {
	text-align: left;
	padding: 5px;
	font-size: 11px;
	color: #fff;
	position: absolute;
	display: none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: -1px 1px 2px #a9a9a9;
	-moz-box-shadow: -1px 1px 2px #a9a9a9;
	box-shadow: -1px 1px 2px #a9a9a9;
}

.error {
	background: #f60000;
	border: 3px solid #d50000;

}

.correct {
	background: #56d800;
	border: 3px solid #008000;
}

.wrong {
	font-weight: bold;
	color: #e90000;
}

.normal {
	font-weight: normal;
	color: #222;
}

#send {
	background: #3f5a81;
	width: 100%;
	border: 5px solid #0F1620;
	font: bold 30px Verdana, sans-serif;
	color: #fafafa;
	text-shadow: 1px 1px 1px #0F1620;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

#send:hover {
	background: #4d76b1;
	border: 5px solid #253750;
	color: #fff;
}

#send:active {
	text-indent: -10px;
}

All The Fun: jQuery Magic

This is the most interesting and engaging part. First we need to do some thinking and describe our key points.

Step 1: Planning

We have to ask ourselves three questions before we can go on:

1. What do we need the script to do?
2. How do we want it to do this?
3. How do we achieve that?

It’s obvious we want the script to validate our form. But how?

• we want to be able to validate it both in real-time (when user is filling it out) and on the form submit
• therefore we need to make a “pack” of functions responsible for each of its fields, so we can call them:
  • individually, when the user is filling out particular field
  • all at once, on the form submit

To reduce our global footpring, we’re going to use JavaScript object for that.

Step: 2: What Do We Need?

JS object, in our case it will be:

• jVal

Methods of that object for each of the form fields, validating that particular field:

• jVal.fullName
• jVal.birthDate
• jVal.gender
• jVal.vehicle
• jVal.email
• jVal.about

Variable which will hold the status of error occuring:

• jVal.errors

And method that will be called as the last one; it will check if there were any errors and submit the form if not. If some errors occurred, it will take the user to the beginning of the form, so they can fill it out again.

• jVal.sendIt

Now we can finally start building our validation script. When finish our first validation method, then it will be much easier and faster, as we can reuse it for other methods, only applying some changes. Let’s crack into it!

Step 3: Our Script “Packaging”

The start is really simple, almost everything will go inside this code:

$(document).ready(function(){
	jVal = {

	};
});

Step 4: Validating User’s Name

Our first method will handle user’s name. Put it inside our jVal object, like this:

var jVal = {
	'fullName' : function() {

	}
};

Now let’s put some first lines of code inside our method. Just paste it, and then I will explain what the code “says”:

$('body').append('<div id="nameInfo" class="info"></div>');

var nameInfo = $('#nameInfo');
var ele = $('#fullname');
var pos = ele.offset();

• Line 1: We’re injecting </div> to the document. Class “info” gives it some styling (defined in our CSS file) and also make it invisible by setting display to “none” – so it’s there, but we don’t see it yet. As for the ID, it’s for easy “grabbing” and manipulating, since it will be positioned absolutely in the document. This </div> will contain our validation info that will be showed to the user, so they know if they filled out the field correctly.
• Line 3: We’re assigning our </div> to the variable nameInfo, because we’ll be using it couple times more.
• Line 4: We’re assigning our form field with ID “fullname” to the variable ele. The same reason as above, we will use it several times later.
• jQuery function offset() returns current position of an element relative to the document. It returns an object containing the properties top and left. We used this function on our ele (which is actually form input with ID “fullname”), so it will return position of that element, which we assign to the variable pos.

Great, so far so good. It’s time to add some few more lines:

nameInfo.css({
	top: pos.top-3,
	left: pos.left+ele.width()+15
});

• Line 2: We start to operate on nameInfo‘s CSS top property. Remember, our variable pos holds now the position of our form input with ID “fullname” in the document. We access its top value by simply joining pos with the word top using period . . Then we decrement that by 3 and assign it to the CSS top property of our nameInfo element.
• Line 3: We start to operate on nameInfo‘s CSS left property. We access left value of our “Full name” input’s position, increase it by its width (we grab that from calling jQuery function width() on our ele element) and increase it by 15. The result is assigned to the CSS left property of our nameInfo element.

We’re doing really great, we just acomplished 50% of fullName, our first validating method. It’s time to actually check if the user filled our “Full name” field correctly or not, and take appropriate action:

if(ele.val().length < 6) {
	jVal.errors = true;
		nameInfo.removeClass('correct').addClass('error').html('&larr; at least 6 characters').show();
		ele.removeClass('normal').addClass('wrong');
} else {
		nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
		ele.removeClass('wrong').addClass('normal');
}

Lot of weird crap, huh? Don’t worry, it’s not so scary as it may look:

• Line 1: We’re checking if the name that user typed in is shorter than 6 characters.
• Line 2: We set our object’s variable jVal.errors to true, as we just got our first error (user’s name is too short). We’re going to use it later.
• Line 3: We start to operate on our nameInfo element (which is the </div> we’re gonna display validation info in). First we remove the class “correct”; it may be applied to our nameInfo element from previous validation (if it was performed). Then we apply the class “error” to it. Next, we put content to our nameInfo element, it’s the information that the name should be at least 6 characters long. And finally we our alert-box visible to the user.
• Line 4: We start to operate on our ele element (which is our form “Full name” input). First we remove class “normal”, which may be there from previous validation, then we apply class “wrong” to it.
• Line 5: If the name user typed in was long enough, then…
• Line 6: We start to operate on our nameInfo element. We remove class “error” if it’s there, and apply class “correct”. We put √ inside to let the user know it’s all good. We show the alert-box (if it wasn’t visible before).
• Line 7: We start to operate on our ele element. We remove class “wrong” if it’s there, and apply class “normal”.

Well done! This is our first validation method. Now it’s time to test it, but before we can do that, we need to write few more lines of code.

We need to make sure, that our fullName method will be called when the user finished filling out the “Full name” field. To achieve that, we need to bind our method to certain user action. There are two great jQuery functions that would serve that purpose well: blur() and change(). We are going to use change().

Paste this code below the whole jVal object:

$('#fullname').change(jVal.fullName);

What it does in human words: if the user changes value of the “Full name” field and then leaves (e.g. to fill out another field), our fullName method is fired up, to validate “Full name” field.

Right now you should have one fully working validation method, so test it. Your whole validate.js file should like like this:

$(document).ready(function(){

	var jVal = {
		'fullName' : function() {

			$('body').append('<div id="nameInfo" class="info"></div>');

			var nameInfo = $('#nameInfo');
			var ele = $('#fullname');
			var pos = ele.offset();

			nameInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+15
			});

			if(ele.val().length < 6) {
				jVal.errors = true;
					nameInfo.removeClass('correct').addClass('error').html('&larr; at least 6 characters').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		}
	};

	// bind jVal.fullName function to "Full name" form field
	$('#fullname').change(jVal.fullName);

});

Step 5: Validating User’s Date of Birth

Starting from now, it will all get easier. Our validation methods are in 90% the same, so all you have to do is copy our fullName method, and only apply some changes

Great, so now just copy whole fullName method, paste it below and rename it to birthDate. The changes we need to make are:

• all nameInfo occurences have to become birthInfo
• instead of #fullname, assign #birthday element to variable ele
• add this regular expression pattern below the whole birthInfo.css() declaration:

  var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;
  

• our previous if() statement has to become:

  if(!patt.test(ele.val()))
  

• validation message has to become ← type in date in correct format

This is how birthDate method should look like after these changes:

	'birthDate' : function (){

		$('body').append('<div id="birthInfo" class="info"></div>');

		var birthInfo = $('#birthInfo');
		var ele = $('#birthday');
		var pos = ele.offset();

		birthInfo.css({
			top: pos.top-3,
			left: pos.left+ele.width()+15
		});

		var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;

		if(!patt.test(ele.val())) {
			jVal.errors = true;
				birthInfo.removeClass('correct').addClass('error').html('&larr; type in date in correct format').show();
				ele.removeClass('normal').addClass('wrong');
		} else {
				birthInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
		}
	}

• Line 14: It’s a regular expression pattern. It’s not our main focus in this tut, so let me just explain it very roughly. This pattern decides how the date format should look like, in this case it’s: two digits followed by hyphen then again two digits followed by hyphen and finally four digits at the end. So, the pattern applies for example to this date: 28-03-1987.
• Line 16: We’re checking if date that user typed in conforms to our pattern from above.

And of course, we need to bind this birthDate method to the “Date of birth” form field. It’s the same thing we did with fullName before, only with different names. Paste it at the bottom (outside of the jVal object), below our fullName binding declaration:

$('#birthday').change(jVal.birthDate);

And we have another fully working validation method. Great job!

Step 6: Validating User’s Gender

Again, simply copy the whole fullName method, rename it to gender and apply these changes:

• all nameInfo occurences have to become genderInfo
• instead of #fullname, assign #woman element to variable ele
• in genderInfo.css() declaration, the top value has to become top: pos.top-10 and the left value has to become left: pos.left+ele.width()+60
• our previous if() statement has to become:

  if($('input[name="gender"]:checked').length === 0)
  

• validation message has to become ← are you a man or a woman?

This is how gender method should look like after these changes:

'gender' : function (){

	$('body').append('<div id="genderInfo" class="info"></div>');

	var genderInfo = $('#genderInfo');
	var ele = $('#woman');
	var pos = ele.offset();

	genderInfo.css({
		top: pos.top-10,
		left: pos.left+ele.width()+60
	});

	if($('input[name="gender"]:checked').length === 0) {
		jVal.errors = true;
			genderInfo.removeClass('correct').addClass('error').html('&larr; are you a man or a woman?').show();
			ele.removeClass('normal').addClass('wrong');
	} else {
			genderInfo..removeClass('error').addClass('correct').html('&radic;').show();
			ele.removeClass('wrong').addClass('normal');
	}
}

• Line 14: We’re checking if user selected one of two radio buttons. $('input[name="gender"]:checked') selects all inputs with name “gender” (in this case all radio buttons) that are checked. Than we check if the number of selected radios (.length) equals 0, which would mean that user didn’t select any.

As always, we have to bind this gender method to our “Gender” radio buttons:

$('input[name="gender"]').change(jVal.gender);

There, another validation method completed. Three more to go :).

Step 7: Validating Vehicles Owned by User

This time copy gender method, rename it to vehicle and apply following changes:

• all genderInfo occurences have to become vehicleInfo
• instead of #woman, assign #ship element to variable ele
• in vehicleInfo.css() declaration, the left value has to become left: pos.left+ele.width()+40
• our previous if() statement has to become:

  if($('input[name="vehicle"]:checked').length <= 1)
  

• validation message has to become ← I am sure you have at least two!

This is how vehicle method should look like after these changes:

'vehicle' : function (){

	$('body').append('<div id="vehicleInfo" class="info"></div>');

	var vehicleInfo = $('#vehicleInfo');
	var ele = $('#ship');
	var pos = ele.offset();

	vehicleInfo.css({
		top: pos.top-10,
		left: pos.left+ele.width()+40
	});

	if($('input[name="vehicle"]:checked').length <= 1) {
		jVal.errors = true;
			vehicleInfo.removeClass('correct').addClass('error').html('&larr; I am sure you have at least two!').show();
			ele.removeClass('normal').addClass('wrong');
	} else {
			vehicleInfo.removeClass('error').addClass('correct').html('&radic;').show();
			ele.removeClass('wrong').addClass('normal');
	}
}

• Line 14: Weíre checking if user selected two or more checkboxes. $('input[name="vehicle"]:checked') selects all inputs with name ìvehicleî (in this case all checkbox buttons) that are checked. Than we check if the number of selected checkboxes (.length method) equals or is less than 1, which would mean that user didnít select any checkboxes or selected only one.

Again, we have to bind this vehicle method to our “Vehicle” checkboxes:

$('input[name="vehicle"]').change(jVal.vehicle);

Tired? We have couple more methods to cover :). Time for email validation.

Step 8: Validating User’s Email Adress

This time, copy our birthDate method, rename it to email and apply these changes:

• all birthInfo occurences have to become emailInfo
• instead of #birthday, assign #email element to variable ele
• our previous regular expression pattern has to become:

  var patt = /^.+@.+[.].{2,}$/i;
  

• validation message has to become ← give me a valid email adress, ok?

This is how email method should look like after these changes:

	'email' : function() {

		$('body').append('<div id="emailInfo" class="info"></div>');

		var emailInfo = $('#emailInfo');
		var ele = $('#email');
		var pos = ele.offset();

		emailInfo.css({
			top: pos.top-3,
			left: pos.left+ele.width()+15
		});

		var patt = /^.+@.+[.].{2,}$/i;

		if(!patt.test(ele.val())) {
			jVal.errors = true;
				emailInfo.removeClass('correct').addClass('error').html('&larr; give me a valid email adress, ok?').show();
				ele.removeClass('normal').addClass('wrong');
		} else {
				emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
		}
	}

• Line 14:For this tutorial I decided to go with very simple, almost basic regular expression pattern for email adress: one or more characters followed by @ smbol, then again one or more characters followed by . period, and at the end there should be two or more characters. So, the pattern applies to this email adress example: mickey@mou.se

Of course, bind this .email method to our “Email” form field:

$('#email').change(jVal.email);

Time for the last of our validation methods: about.

Step 9: Validating User’s About Info

For this last method, copy fullName, rename it to about and apply following changes:

• all nameInfo occurences have to become aboutInfo
• instead of #fullname, assign #about element to variable ele
• our previous if() statement has to become:

  if(ele.val().length < 75)
  

• validation message has to become ← come on, tell me a little bit more!

This is how our about method should look like after these changes:

	'about' : function() {

		$('body').append('<div id="aboutInfo" class="info"></div>');

		var aboutInfo = $('#aboutInfo');
		var ele = $('#about');
		var pos = ele.offset();

		aboutInfo.css({
			top: pos.top-3,
			left: pos.left+ele.width()+15
		});

		if(ele.val().length < 75) {
			jVal.errors = true;
				aboutInfo.removeClass('correct').addClass('error').html('&larr; come on, tell me a little bit more!').show();
				ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
		} else {
				aboutInfo.removeClass('error').addClass('correct').html('&radic;').show();
				ele.removeClass('wrong').addClass('normal');
		}
	}

And of course we need to bind it to our “About” form field:

$('#about').change(jVal.about);

This is it! We just completed all our validation methods. It’s almost like they say: the end is nigh! There’s only two things left to do:

• build our last sendIt method
• manage properly the submit action of the submit button

Step 10: Final sendIt Method

This method will be called after all our validation methods, as the last one, after clicking on the “submit” button. It will check if no errors occurred during validation (while performing any of our validation methods) up until the moment it’s called. The good news is, it couldn’t be more simple:

'sendIt' : function (){
	if(!jVal.errors) {
		$('#jform').submit();
	}

• Line 2: Remember that errors variable I told you we’re going to use later? Well, this “later” is right now :). If even one little error occurred during the validation, this errors variable was set to true. In human words it actually means something like: “yes, it’s true that we got some errors during validation”. So here we’re checking if it’s actually NOT true, which equals to no errors from validation.
• Line 3: If there were no errors, just finally submit the whole form.

Step 11: Managing User’s Submit Action

The only thing left now, is to manage what happens when the user clicks on our “submit” button. And it goes like this:

$('#send').click(function (){
	var obj = $.browser.webkit ? $('body') : $('html');
	obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
		jVal.errors = false;
		jVal.fullName();
		jVal.birthDate();
		jVal.gender();
		jVal.vehicle();
		jVal.email();
		jVal.about();
		jVal.sendIt();
	});
	return false;
});

• Line 1: We grab the send element, which is the “submit” button in our form, and if someone clicks on it we perform all code below.
• Line 2: The thing is: when you want to apply scrolling to browser window, different browsers will work with different elements. And so: Chrome and Safari will work with body. Internet Explorer and Firefox will work with html. Opera will work with both. Unfortunately in our case we can’t just use $('html, body') to target both these elements (I’ll talk about that another time). So we need to somehow decide which of these elements we should apply scrolling to. And this is where jQuery comes with help. It provides us with $.browser property – it allows us to detect which browser we are working in. By using $.browser.webkit we’re just checking if our browser is running on webkit engine; if so then we assign body element to the obj variable we just created, if not we assign html element to it. Important note: It should be avoided and it’s considered bad practice to perform any kind of “browser detection”, you should use “feature detection” instead. But we can get away with that for our learning purposes.
• Line 3:We apply scrollTop animation to our obj element. The point that scrolling should stop is the beginning of the form, which is determined by accessing top value of its position in the document, which we get thanks to jQueryoffset() function. Next we say that this scrolling animation should last 750 milliseconds, and when it’s done we…
• Line 4: Set variable jVal.errors to false, to clear errors that might occurred in previous validation, and then we…
• Lines 5-11: Call all our validation methods one by one, with sendIt method at the end, which will check if there were no errors and submit the whole form if so.
• Line 13:We return false to that click event of the “submit” button in our form, which means that the form won’t be submitted right away, the script will perform actions planned by us first.

Final Product

Right now our validation script is fully completed and should look like this:

$(document).ready(function(){

	var jVal = {
		'fullName' : function() {

			$('body').append('<div id="nameInfo" class="info"></div>');

			var nameInfo = $('#nameInfo');
			var ele = $('#fullname');
			var pos = ele.offset();

			nameInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+15
			});

			if(ele.val().length < 6) {
				jVal.errors = true;
					nameInfo.removeClass('correct').addClass('error').html('&larr; at least 6 characters').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					nameInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'birthDate' : function (){

			$('body').append('<div id="birthInfo" class="info"></div>');

			var birthInfo = $('#birthInfo');
			var ele = $('#birthday');
			var pos = ele.offset();

			birthInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+15
			});

			var patt = /^[0-9]{2}\-[0-9]{2}\-[0-9]{4}$/i;

			if(!patt.test(ele.val())) {
				jVal.errors = true;
					birthInfo.removeClass('correct').addClass('error').html('&larr; type in date in correct format').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					birthInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'gender' : function (){

			$('body').append('<div id="genderInfo" class="info"></div>');

			var genderInfo = $('#genderInfo');
			var ele = $('#woman');
			var pos = ele.offset();

			genderInfo.css({
				top: pos.top-10,
				left: pos.left+ele.width()+60
			});

			if($('input[name="gender"]:checked').length === 0) {
				jVal.errors = true;
					genderInfo.removeClass('correct').addClass('error').html('&larr; are you a man or a woman?').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					genderInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'vehicle' : function (){

			$('body').append('<div id="vehicleInfo" class="info"></div>');

			var vehicleInfo = $('#vehicleInfo');
			var ele = $('#ship');
			var pos = ele.offset();

			vehicleInfo.css({
				top: pos.top-10,
				left: pos.left+ele.width()+40
			});

			if($('input[name="vehicle"]:checked').length <= 1) {
				jVal.errors = true;
					vehicleInfo.removeClass('correct').addClass('error').html('&larr; I\'m sure you have at least two!').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					vehicleInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'email' : function() {

			$('body').append('<div id="emailInfo" class="info"></div>');

			var emailInfo = $('#emailInfo');
			var ele = $('#email');
			var pos = ele.offset();

			emailInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+15
			});

			var patt = /^.+@.+[.].{2,}$/i;

			if(!patt.test(ele.val())) {
				jVal.errors = true;
					emailInfo.removeClass('correct').addClass('error').html('&larr; give me a valid email adress, ok?').show();
					ele.removeClass('normal').addClass('wrong');
			} else {
					emailInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'about' : function() {

			$('body').append('<div id="aboutInfo" class="info"></div>');

			var aboutInfo = $('#aboutInfo');
			var ele = $('#about');
			var pos = ele.offset();

			aboutInfo.css({
				top: pos.top-3,
				left: pos.left+ele.width()+15
			});

			if(ele.val().length < 75) {
				jVal.errors = true;
					aboutInfo.removeClass('correct').addClass('error').html('&larr; come on, tell me a little bit more!').show();
					ele.removeClass('normal').addClass('wrong').css({'font-weight': 'normal'});
			} else {
					aboutInfo.removeClass('error').addClass('correct').html('&radic;').show();
					ele.removeClass('wrong').addClass('normal');
			}
		},

		'sendIt' : function (){
			if(!jVal.errors) {
				$('#jform').submit();
			}
		}
	};

// ====================================================== //

	$('#send').click(function (){
		var obj = $.browser.webkit ? $('body') : $('html');
		obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
			jVal.errors = false;
			jVal.fullName();
			jVal.birthDate();
			jVal.gender();
			jVal.vehicle();
			jVal.email();
			jVal.about();
			jVal.sendIt();
		});
		return false;
	});

	$('#fullname').change(jVal.fullName);
	$('#birthday').change(jVal.birthDate);
	$('input[name="gender"]').change(jVal.gender);
	$('input[name="vehicle"]').change(jVal.vehicle);
	$('#email').change(jVal.email);
	$('#about').change(jVal.about);

});

After Word

We’ve done it. Well, you have done it! I hope you enjoyed this tutorial and learned something. If you have any questions feel free to ask; I will be glad to talk more in the comments. Thanks for your time!

An accordion is a very good way of showing lots of content in a small area. You might have five headers, each with a paragraph below it. Showing all that at once is going to go down for a long way. With the accordion, only one paragraph is shown at a time, and users can click on the headers to view the content they wish. First we will build a simple one and then we will animate it. You’ll see just how many built-in functions jQuery includes that makes our lives much easier. You can see the online demo here.

Firstly I set up the accordion itself:

<h3>Item 1
    <p>Item 1 content</p>
    <h3>Item 2
    <p>Item 2 content</p>
    <h3>Item 3
    <p>Item 3 content</p>
    <h3>Item 4</h3>
    <p>Item 4 content</p>

And then just some very basic CSS to make it look a bit clearer:

 p,h3 {margin: 0; padding: 0;}
        p {height: 150px; width: 200px; border: 1px solid black;}
        h3 {height: 50px; width: 200px; background-color: blue; color: white; border: 1px solid black;}

This leaves us with something similar to this. I’ve only taken a picture of the first two items to save space, and besides, the next two are identical.

Now we can get onto the JavaScript. Include jQuery from the google CDN, add your script tags to the bottom of your page and away we go:

var headings = $('h3'),
            paras = $('p');

All I am doing here is selecting all the heading 3 elements and all the paragraphs, and saving them to two arrays. Note the syntax, I could have done this:

var headings = $('h3');
var paras = $('p');

However I find it quicker to just put a comma between them and emit one of the ‘var’s. It’s also more commonly done that way.

Once we’ve done that we now need to hide all but the first paragraph. This is done like so, using a function eq():

paras.hide().eq(0).show();

First I hide all the paragraphs and then use eq(0) to select the ’0th’ element of the ‘paras’ array. In JavaScript (and most languages) arrays start from 0, so 0 will select the first element. Using eq(1) would select the second element. I then use jQuery’s show() function show the first one. This leave us with something like this:

And now we can write the code for hiding and showing. Firstly, we need to add a click event to our headers:

 headings.click(function() {

 });

And we can write the code to go in it:

 var cur = $(this); //save the element that has been clicked for easy referal
 cur.siblings('p').hide(); //hide all the paragraphs
 cur.next('p').show(); //get the next paragraph after the clicked header and show it

Lets go through this line by line:

var cur = $(this);

Here we take the value of ‘this’ and wrap it in the jQuery object before saving it to a variable ‘cur’. ‘this’ refers to the current element being interacted with. In this case, it’s the heading element that has been clicked.

cur.siblings('p').hide();

The jQuery siblings() function finds all elements on the same level as the current element. Here we find all the siblings of the current element that are paragraphs and hide them. So now we know that there are no paragraphs being shown.

cur.next('p').show();

Finally we use jQuery’s next() function. This finds the next element from the one we have selected. In this case it finds the next paragraph and shows it.

And we’re done! If you try that in your browser, it works fine. However, seeing as jQuery gives us loads of animation functions, lets put a couple of those to use.

The two functions we will use are slideUp() and slideDown(). These do exactly what you would imagine, they animate an element sliding up until it’s gone, and then sliding it back down. In our click function that we wrote:

 headings.click(function() {
            var cur = $(this); //save the element that has been clicked for easy referal
            cur.siblings('p').hide(); //hide all the paragraphs
            cur.next('p').show(); //get the next paragraph after the clicked header and show it
        })

Replace the hide() function with slideUp() and the show() function with slideDown():

 headings.click(function() {
            var cur = $(this); //save the element that has been clicked for easy referal
            cur.siblings('p').slideUp(); //hide all the paragraphs
            cur.next('p').slideDown(); //get the next paragraph after the clicked header and show it
        })

And try now. Is it not beautiful?

That just about sums it up for this week. We’ve taken things discussed in the previous two weeks and put them together. We’ve also met another couple of functions to add to your jQuery repertoire.

Essentially, if we have already selected an element, how can be traverse the page to find its parent element? We could just use another selector, but there are much better ways to do it. For example, take this HTML code:

<div>
<h2>A header with <a href="http://www.1stwebdesigner.com">a link</a> inside.
<p>A paragraph in the div</p>
</div>

And then using jQuery we had already selected the h2 element:

$('h2').

How would we then select the div? We might just do a different selector:

$('div'). 

While this works fine in this case, imagine a much more complex site. Having rogue and vague selectors like that are not going to help. It would also mean giving other elements unnecessary ‘hooks’, such as an ID, just for the purpose of our JavaScript. In reality, jQuery makes it much easier:

$('h2').parent(); //this would select the div.

This is the cusp of this lesson – to learn how we can be ‘sneaky’ with our code to allow us to do less actual selecting and learn to work with what we already have.

Say now, instead of selecting the h2′s parent, we want to find its children, which in our case is the link. We could go back to CSS:

$('h2 a');

But in reality, for reasons not worth divulging into at this moment, that takes a lot of work on jQuery’s part. What if, instead, jQuery provided a method to do the same thing? Well, it does!

('h2').children(); //selects the link element

But what if the h2 element had more than one child element? jQuery actually allows us to pass in a selector to the children() function to be more specific:

$('h2').children('a'); //selects all children of the h2 that are anchor elements.

In our next example, let’s have a quick unordered list:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

Of course to select all the list items is as simple as:

$('li');

Or you could use our new function:

$('ul').children();

Generally which one you use depends on the situation on your page. For example, if I had two lists, one ordered (

1. ) and only wanted to select the list items from one of those, I would use the latter of the two methods above.

) and one unordered (

If we want to interact with a specific item in that list, we can use another jQuery function, eq():

$('li').eq(2); //selects list item 3

Please note that it selects the 3rd item. This is because in most languages, the index is zero based. This means it starts from 0. So in our list, we have 5 items, the first of which you could call the ’0th item’. If you struggle to remember this, just remember that you need to subtract one from the number you would usually use. Don’t worry, a few hours of coding and it will sink in.

Before we go any further it’s important for you to realise that one of the key principles of jQuery is its ‘chainability’. This means that functions can be run one after the other, or chained:

$('ul').children('li').eq(3).animate({...});

The above code takes the following steps:
1. $(‘ul’) => Select all unordered lists on the page.
2. children(‘li’) => select all children of the lists that are list items.
3. eq(3) => select the 2nd list item from each list.
4 animate({…}) => animate that specific item. We covered basic animations in the last lesson.

Whilst the children() function only finds the immediate descendants of the selected item, jQuery provides a way to delve deeper. Going back to our HTML code we used much earlier:

<div>
<h2>A header with <a href="http://www.1stwebdesigner.com">a link</a> inside.</h2>
<p>A paragraph in the div</p>
</div>

If I had the following selector:

$('div');

And now want to select the anchor element within the h2, you might think, correctly, to do this:

$('div').children('h2').children('a);

Generally, as a rule of thumb, when you use the same function twice in a row, there is a better way to do it. And of course, there is, using jQuery’s find() method. Using this, the above line of code becomes:

$('div').find('a');

The find function does not stop after the first descendants of the div element. It keeps going. It finds the immediate children, then the children of those children, and so on. Basically, find() searches all elements within the selected element, no matter how many levels down they are.

Next we have four basic functions to look at that allow us to select an element’s siblings. These are elements on the same level as the one currently selected. In our above HTML, the h2 & p elements would be siblings. Take a look at the following functions:

$('h2').next(); //selects the next sibling (the paragraph)
$('h2').nextAll(); //selects all the siblings after it.
$('p').prev(); //selects the previous sibling (the h2)
$('p').prevAll(); //selects the previous siblings

As you can see all of them are pretty simple, and handy if you need to jump along to the next element.

The final function we are going to look at is the siblings() function. Lets have a new block of HTML code to work with:

<p>A paragraph</p>
<h2>A heading</p>
<img src="somepic.jpg" alt="A picture">
<h1>A bigger heading</h1>

From the first paragraph, we could use nextAll() to select all its siblings (as it’s the very first sibling):

$('p').nextAll();

But if we were at the h2 element, how could we select all its siblings? Easy:

$('h2').siblings();

The siblings() function can also take a selector as an argument:

$('h2').siblings('p') //selects just the siblings that are paragraphs

Just before I end, as a quick side note, last lesson, we spoke about including your jQuery at the very bottom of the page, before the final </body> tag. However, you can include it in the header, or anywhere else in fact, if you add this line first:

$(document).ready(function() {...});

What that does is makes sure the code you write runs after all the page content is loaded – otherwise you could be manipulating elements that have yet to load. ALl you do is wrap your jQuery in the above function:

$(document).ready(function() {
//all your jQuery code goes here like normal
});

That only applies if you add your code anywhere except before the closing </body> tag.

The End

I hope you’ve enjoyed our brief foray into the world of jQuery selectors. In the next lesson we will get some cool stuff going and look at sliding elements in and out. We will also look at events and responding to, for example, an element being clicked. As always if you have any questions please feel free to leave a comment and I’ll answer them next time.

Along with the hundreds of bug fixes and improvements, 5 new plugins and 1 new effect found the way into the bundle.

What’s New in jQuery UI 1.8?

The jQuery UI team worked hard to make the framework even lighter, more modular and flexible. If you are a developer, it’s now even easier for you to build your own widgets or extend the pre-built ones.

To start right now, take a look at the new Widget-Factory and the jQuery UI CSS-Framework.

Also don’t forget about the ThemeRoller Firefox Developer Bookmarklet. This brings the ThemeRoller into any page on the web! To install it, simply drag the link into your Firefox toolbar. (or just click it right now to give it a try!).

The Position Utility

With this, you can position any element relative to any other, or even relative to the parent window or your mouse. Like in the “Write Less. Do More”-fashion, you just have to select the element you want and configuring which part of it should be positioned relative to which part of another element. That’s all!

Take a look at the official documentation here.

You can also take a look at the two provided demos which are included.

Position Utility – Demo 1:

Link to the Demonstration

You can use the form controls to configure the positioning or you can drag the positioned elements to modify the offsets.

Just drag around the orange parent element to see the collision detection in action!

Position Utility – Demo 2:

Link to the Demonstration

This is a prototype of the photo-viewer using the Position Utility to place the images at the center, left and right of your parent and cycle them.

To cycle them, just click the “Previous” and “Next” links at the top or on the images on the left or right. Also take a look how the images are repositioned after you re-size the window.

The Button Widget

With the button widget you can create a fully theme-able button from any imaginable element you want to use as a native button.

Use them right now in your dialog boxes or forms.

Take a look at the official documentation here.

They have also provided 6 different demonstrations there. Two of them I will show you now:

Button Widget – Demo 1:

Link to the Demonstration

You can use any markup for create your buttons: An ordinary button element, a form-input element with the submit type or an anchor tag.

	$("button, input:submit, a", ".demo").button();
	$("a", ".demo").click(function() { return false; });

Button Widget – Demo 2:

Link to the Demonstration

On this Demonstration you will see a (not functional) media player toolbar, filled with all types of buttons you can create with the new widget. Buttons with icons, checkbox-type buttons (“Shuffle”) and three radio-type buttons (“No Repeat”, “Once” and “All”).

Don’t forget to take a look at the source code. The setup/code is really very easy.

The Autocomplete Widget

This is maybe the most requested feature, which made it into the latest release of jQuery UI – The Autocomplete. Now you are able to make any text input field pop up a menu to help the user in completing their search or entry, provide suggestions or show all allowed values.

You are able to provide static data using the source option, or provide a callback function as the data source which can get the data from a server via Ajax.

Also there are a lot of demonstrations on the official documentation page. You can take a look at it here: Official Autocomplete Documentation. I will again present you two of them:

Autocomplete – Demo 1:

Link to the Demonstration

This is the demonstration with the default functionality. When you start typing, you will get static suggestions on the pop up box. The data source is a simple JavaScript array.

	var availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby", "python", "c", "scala", "groovy", "haskell", "perl"];
	$("#tags").autocomplete({
		source: availableTags
	});

Autocomplete – Demo 2:

Link to the Demonstration

In this demonstration, the data source is a remote JSONP. In this case: geonames.org webservice. While you will end up with only the city name itself in the input box, more info is displayed in the suggestions box to help you find the correct entry.

This data is also available in callbacks, as you will get it illustrated in the results area below the text input field.

Take A Look At The Complete Changelog

jQuery UI 1.8 – Final Changelog

Click the link above to take a look at the full list of changes between jQuery UI 1.7.2 and jQuery UI 1.8.

Downloading jQuery UI 1.8

Of course, you have a few options again to get the latest build of jQuery UI.

The Complete Package:

With the jQuery UI 1.8 Starter Pack you will get all components and the default themes. Also it is optimized to use it along the Getting Started Guide, in case you’re new to this all.

The Full Development Bundle:

Of course you can also get the full jQuery UI 1.8 Development Bundle, which also contains all components and the base theme. This package is optimized for development of jQuery UI itself or the redistribution of your own builds – not for the “Getting Started Guide”.

The Full Theme Pack:

With the jQuery UI 1.8 Themes Pack you will get all of the 21 Themes of the ThemeRoller Gallery. You can just take one and use it, or take one as a starting point and tweak it to your wishes. For example you can use it along this bookmarklet.

Customized Download:

If you know exactly what you want, you can go to the jQuery UI 1.8 Download Builder to customize your build and download it as a custom zip file. Of course it still takes care of plugin dependencies, so you don’t have to worry about that!

Other Download Sources:

Now jQuery UI 1.8 is also hosted on Google’s AJAX Libraries API page. As Usual you can directly use them in your script sources so you disburden your server.

• Minimized version: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js
• Full Version with comments: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js
• Always the latest 1.x build: http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js

Of course you can still go to GitHub to get the latest version there too.

Last Words And Links

If you are ready for jQuery UI 1.8, make sure to use it along the latest jQuery build (1.4+) so you get the full performance and compatibility.

The Core of jQuery UI is now 71% smaller. They have achieved this optimization by pulling the already modular but bundled components mouse and widget.

The new mouse plugin file makes the average jQuery UI 14% smaller. This plugin is not new, but now it is moved to its own file, where before it was in the core.

If you’re upgrading from 1.7 to 1.8, be sure to take a look at their comprehensive Upgrade Guide here. If you’re coming from an even older version, take a look at the 1.7 Upgrade Guide first.

Most interesting links:

• jQuery UI Developer Forum
• Full Changelog
• jQuery UI Bug-Tracker
• jQuery UI Design & Planning Wiki
• ThemeRoller Bookmarklet
• Support Center

What can we expect from jQuery UI 1.9? I’m already very excited – Discuss in the comments and have fun trying out all new features and lets fill the web with some nice jQuery User Interfaces!

Happy developing! :)

Not only will you be able to dynamically change the color of the logo, but also add patterns as you wish and even animate them later with a few lines of code. With this technique you will also be able to add transition effects and control any single part of the colors, patterns and animations.

Introduction and Demonstration

You can take a look to the finished Demonstration by clicking here. As you see, you will be able to adjust every single bit of the color, transparency, pattern and even the animation itself.

If you want to follow along, you can download the finished project files here (zip archive).

This technique generally does not require any jQuery at all – but we are using it, to make nice transitions and to be able to adjust the color, pattern and animation by a few sliders.

Step 1: Preparing the Mask and Pattern Images

The Key-PNG for this Effect:

First you have to create a PNG-24 (24bit, so the alpha-channel gets saved too) similar to this one:

As you see, the transparency is not the outside of the logo. It is inside of it, where you want to change the color, apply the gradients, add patterns and animate them. The background should be exactly the same as in the container, in which the logo is going to be. You can either use a single color or whatever else you want to. Just take care if your background has a pattern so the transition is seamless to your main background-pattern.

The Pattern-PNG for the Animation Effect:

The next image we will need is the one with the gradient and/or pattern. The one I will use looks like this:

The dimensions of my pattern are 450 x 3000 pixel. The width should be exactly the same as the PNG-mask. The height does not matter. The higher, the better. Also make sure to remember the size. We will need it later in our script to adjust the animation.

Step 2: Arranging the Folders and the XHTML Structure

Before we start creating our needed files, we first create our folder structure again. It should look something like this again:

Our index.html, which will be created at the root of this structure will need following wrappers around the PNG-mask:

<div id="wrapper">
   <div id="color"></div>
   <div id="pattern"></div>
   <div id="logobox"></div>
</div>

As you see here, we have 3 different wrappers for each element. The first one will contain only the color. The second one only the pattern. And the last one will only contain the PNG-mask, which also will be the topmost element.

Why three wrappers???

Maybe you ask yourself now, why we need 3 separate wrappers for each element, if we can do the same with only one. This is why: With 3 separate wrappers, we will be able to adjust different transparencies for every used element, without worrying about loosing opacity on the pattern or the logo itself.

For the sliders we will use the latest jQuery UI again – so you don’t have to worry too much about the structure there. Just make sure they have all the same class and different ID’s.

My Slider structure looks like this:

<!-- color sliders -->
<div id="red" class="slider"></div>
<div id="green" class="slider"></div>
<div id="blue" class="slider"></div>
<div id="alpha1" class="slider"></div>

<!-- pattern sliders -->
<div id="alpha2" class="slider"></div>
<div id="speed" class="slider"></div>

For the buttons I’m using ordinary a-tags – Just give them all the same class and different ID’s again, so you can style them and bind different functions to them. We will later escape the default link-behavior by returning “false” in the script.

Scripts and styles in the header:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" type="text/css" media="all" />

<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>

<script type="text/javascript" src="js/script.js"></script>

For saving bandwidth, we will link to the Google files again. Unfortunately the latest jQuery UI (version 1.8, release candidate 3) is not hosted there yet, so you have to host in on your own server. You can customize the download yourself here. You will only need the UI Core and the Slider Widget.

I cannot use the latest stable release (version 1.7.2) because there is a small “bug”, regarding the animation of the sliders, when changing the values programmatically. You can take a look at the bug-tracker ticket here. However, it is resolved in the latest release candidate, so I will not go further into the changes now.

Of course you can use the jQuery UI ThemeRoller to create your own slider-styles.

This time I will skip the CSS part completely because there is nothing special to take care of. The only thing you maybe want to add is classes for pattern-only settings and animation-only settings, so we can hide them later in our script by only using the class names as selector.

Step 3: Writing Some JavaScript Functions

The first thing we have to do is to create document.ready function, so the scripts start, as soon as the DOM is loaded and before the page contents are loaded.

$(function(){
   // put all your jQuery goodness in here.
});

Now we will setup a few variables at first:

// color container
var color = $("#color");

// pattern  container
var pattern = $("#pattern");

//  animation start/stop button
var startstop = $("#startstop");

// show/hide button
var showhide = $("#showhide");

// random-color button
var randomcolors = $("#randomcolors");

// default animation speed (5ms to 100ms)
var speed = 50;

// starting position of  the pattern
var  curPos = 0;

//  reset-position
var resetPos = -(3000-117);

The last variable defines when our pattern hits the end, so we can start from the beginning again – it will be for the animation later. 3000 is the height of our pattern image and 117 is the height of our logo.

Don’t forget to put a minus in front of this value. The pattern will move up in its container with the CSS background-position animated.

Converting the slider-div’s to the jQuery UI sliders:

// setting up the jQuery UI sliders

$("#red, #green, #blue").slider({ animate:true, range:"min", max:255, slide:colorChanger, change:colorChanger });

$("#red").slider("value", 52);
$("#green").slider("value", 174);
$("#blue").slider("value", 203);

$("#alpha1").slider({ animate:true,  range:"min", max:100, value:100, slide:alphaChanger1, change:alphaChanger1 });

$("#alpha2").slider({ animate:true, range:"min", max:100, value:100, slide:alphaChanger2, change:alphaChanger2 });

$("#speed").slider({ animate:true, range:"min", min:5, max:100, value:50, slide:speedChange, change:speedChange });

This is everything you need, to “install” the sliders and setup the starting-values and behaviors.

I will go true all options, so you know what you are doing here:

• animate:true: Smoothly scroll the handle of the sliders to the position where the user clicked or to the value of our random function. You can also also use one three predefined strings (“slow”, “normal”, “fast”) or the number of milliseconds to run the animation (e.g. 500).
• range:”min”: This is optional – I’m using this, so I can fill up the slider with a color or a pattern. With “min” the color/pattern will go all the way from left to the position of the handle.
• min:5: The minimum value of the slider (used only on the animation-speed slider).
• max:255: The maximum value of the slider.
• value:50: Setting the starting-value of the slider
• slide/change: Those two are events of the slider. They are triggered when the user slides or changes the values. We are calling our functions there which will be created in the next step.

If you need more information about the options and events we are using, you can take a look at the documentation here.

Now everything is ready to create our main functions.

Converting RGB to HEX

// RGB to HEX converter (with 3 arguments)
function rgbToHex(r,g,b){

   var hex = [
      // converting strings to hex (16)
      r.toString(16),
      g.toString(16),
      b.toString(16)
   ];

   // get all 3 values of the array
   $.each(hex, function(nr, val){

      // make sure they are not empty
      if (val.length == 1){

         // add leading zero
         hex[nr] = "0" + val;
      }
   });

   // returns a valid hexadecimal  number
   return hex.join("").toUpperCase();
}

With this function, we will convert the values of the red, green and blue sliders to a valid hexadecimal for using it in CSS.

For making this work, we need to pass 3 variables to the function (r,g,b) and convert those strings to hex-code. We do so by using .toString(16).

We also wrapped them into an array, so we can go through them now by jQuery’s each() loop, passing the index of the array (nr) and the value (val) to the loop.

Last thing we need to to is to join those 3 values and converting them to uppercase.

Background-color Changer:

// changing the colors
function colorChanger(){

   // value of the "red"-slider
   var red = $("#red").slider("value");

   // value of the  "green"-slider
   var green = $("#green").slider("value");

   // value of the "blue"-slider
   var blue = $("#blue").slider("value");

   // converting values to hex
   var hex = rgbToHex(red,green,blue);

   // changing the background-color of  the wrapper
   color.css("background-color", "#" + hex);

}

This function will get all 3 values of our red-, green- and blue-sliders, convert the values to a valid hex-code using the previous function and change the css of our color-container.

That’s all! You should now be able to change the color of your logo. (You have to comment out the alpha and the speed sliders, or you will get a JavaScript error.)

Opacity Changer:

// change the opacity of the color-wrapper
function alphaChanger1(){

   var opacity = $("#alpha1").slider("value") / 100;
   color.css("opacity", opacity );
}

// change the opacity of the pattern-wrapper
function alphaChanger2(){
   var opacity = $("#alpha2").slider("value") / 100;
   pattern.css("opacity", opacity );
}

Those two functions will handle the opacity of the color-wrapper and the pattern-wrapper. Nothing special there. Just make sure to divide your value by 100, so you get a value between 0.00 and 1.00. This step is important because the opacity attribute does not accept 3 digits as value. So a 50% opacity will be 0.50.

You can also combine those two functions by passing the correct container returning the right value. I skipped this step. It’s quick and dirty – but it works! :)

Function for the Animation:

// pattern animation
function patternScroller(){

   // substracting 1 with  every call
   curPos--;

   // if it hits  our reset-position, back to 0
   if (curPos == resetPos){ curPos = 0; }
   pattern.css("background-position", "0 " + curPos + "px");
}

Every time this function gets called, we will subtract 1 from our current position variable (curPos). If it hits the value of our reset position (resetPos), we will set it back to 0. The last step there is to change the vertical position of the background from our pattern-container.

Speed Changer:

// animation speed changer
function speedChange(){

   // get the current value of the  speed-slider
   speed = $("#speed").slider("value");

   // clear interval,  if there is any
   clearInterval(initScroll);

   // set a new interval with the current speed
   initScroll = setInterval(patternScroller, speed);
}

This function will change the speed of our animation. First we need to get the current value of our speed-slider. After this we have to clear any previous interval (if there is any). Last but not least we are creating a new interval. This will call our previous function (patternScroller) every x milliseconds. The x stands for the value of our speed slider.

Random Color and Alpha function:

// random color function
function randomColors(){
   $("#red").slider("value", Math.floor(Math.random()*256), true);
   $("#green").slider("value", Math.floor(Math.random()*256), true);
   $("#blue").slider("value", Math.floor(Math.random()*256), true);
   $("#alpha1").slider("value", Math.floor(Math.random()*101), true);
}

This function will change the values of the red, green, blue and alpha1 sliders randomly when called. It does so by using JavaScripts Math.random() function. To make sure the returned value is not 0, just add 1 to the maximum value. To make it a Integer we wrapped returned value into Math.floor(), so it gets rounded downwards to the nearest integer.

This function is now ready to be bound to button:

// random colors button
randomcolors.click(function(){

   // if button has  no "random" class
   if (!$(this).hasClass("random")){

      // add it
      $(this).addClass("random");

      // change the button text
      $(this).text("random-colors & alpha: ON");

      // call the  random function once
      randomColors();

      // set a intervall with the random function
      randomizer = setInterval(randomColors, 2000);

   } else {

      // remove the class
      $(this).removeClass("random");

      // change the button text
      $(this).text("random-colors & alpha: OFF");

      // clear the  interval
      clearInterval(randomizer);
   }

   // change the  default link-behavior
   return false;
});

We will check if the random-function is already running by adding and removing a class (“random”) to the button.

The important parts of this whole function is setting/clearing the interval. The interval will get called every 2 seconds (2000 milliseconds) and the first call is after 2 seconds, so we are manually calling it the first time. By returning false, we make sure the override the default behavior of a link.

Show and Hide the Pattern container:

// show and hide the pattern
showhide.click(function(){

   // if button has no "visible"  class
   if (!pattern.hasClass("visible")){

      // add it
      pattern.addClass("visible");

      // change the text
      $(this).text("hide pattern");

      // fade in the pattern-container
      pattern.stop().fadeTo(1000, 1);

      // fade in all elements with the class "forpattern"
      $(".forpattern").stop().fadeTo(800,  1);

   } else {

      // remove the  class
      pattern.removeClass("visible");

      // change the button text
      $(this).text("show pattern");

      // fade out the pattern-container
      pattern.stop().fadeTo(800,  0);

      // fade out all elements with  the class "forpattern"
      $(".forpattern").stop().fadeTo(800, 0);
   }

   // change the default link-behavior
   return false;
});

Again we are checking if the pattern is hidden or not by adding and removing a class to the button (“visible”). Nothing complicated in here – by now, everything should be clear. Just to make sure: The second fade-effect is used to show/hide all elements which have the class “forpattern”.

Start and Stop the Animation:

// start and stop the animation
startstop.click(function(){

   // if button has no  "scrolling" class
   if (!pattern.hasClass("scrolling")){

      // add it
      pattern.addClass("scrolling");

      // change the text
      $(this).text("stop animation");

      // start a new intervall with current speed-slider value
      initScroll = setInterval(patternScroller,  speed);

      // fade in  all elements with the "foranimation" class
      $(".foranimation").stop().fadeTo(800, 1);

   } else {

      // remove the class
      pattern.removeClass("scrolling");

      // change the button text
      $(this).text("start  animation");

      // clear the interval again
      clearInterval(initScroll);

      // fade out all elements with the "foranimation" class
      $(".foranimation").stop().fadeTo(800,  0);
   }

   // change the  default link-behavior
   return false;
});

This is the last button-function we need for this project.

It will start and stop the animation of our pattern. To distinguish if the animation is already started or not, we are again adding and removing a class (“scrolling”). If the button does not have this class yet we are adding it, initiate an interval with the current value of our “speed” variable. If it has this class, we remove it and clear this interval again. For a little bit eye candy we are again fading all elements with the class “foranimation” in and out.

That’s All Folks!

You should now have a Flash-like color and pattern morphing logo, using only a transparent PNG as mask and a few jQuery functions. You can take a look at the demo by clicking here or download all files by clicking here.

If you have any questions or need help with any of the steps, feel free to ask them in the comments!

Happy coding!