Explore the Premium Content

Beautifying forms with jQuery part 3

In part 3 of this series you'll add more methods to the form class that add new features to the form elements, focusing on text entry fields including standard text fields, password fields and textarea elements. Dan will show you how to add cool new usability features including password unmasking and field-clearing buttons that enhance the user experience and empower your visitors to choose which form features are implemented using the control panel that was added in part 2.

Read More

Beautifying forms with jQuery part 2

Beautifying forms with jQuery part 2 introduction
In part 2 of this series Dan shows you how to add new methods to the beautify namespace that was created in part 1 in order to add new features to the form class. You’ll see how by adding two opposing methods to the form class you can enable or disable a single feature. Dan also shows how a simple user control panel can be created which automatically adds switches so that the visitor can enable or disable the features that they require.

Read More

Beautifying forms with jQuery part 1

This series of articles looks at how jQuery can be used to progressively enhance simple HTML forms to make them more usable and attractive. In this part Dan shows you how to start with simple and semantic underlying form HTML and progressively improve it, first with some simple CSS and then with the basic definition of the JavaScript pseudo-class.

Read More

Capturing Pages with a Twitter Bar Part 2

In part 1 we looked at the base HTML page which holds our twitter toolbar and displays the linked content in an iframe. In this part of the tutorial we’re going to style the toolbar and add the PHP file that will enable easy retweets and follows.

Read More

Capturing Pages with a Twitter Bar Part 1

Sometimes on Twitter when people post a link to some interesting content they have discovered, they don’t just post a link, they link to the content within a frame and add a special toolbar to let visitors easily retweet the link to their own followers.

Read More

Adding Your Tweet Stream to Your Website

It's becoming increasingly fashionable to include in an area of your website, perhaps the side bar, a widget that lists your most recent tweets, as a kind of advertisement for your twitter profile. People browsing your site or blog will see this information and if they are interested in what you have to say may wish to follow you.

In this article we'll be looking at how we can easily add a tweet preview box to our site that automatically fetches your five most recent tweets when the page loads. We'll be using jQuery, of course, to help us achieve this simple but effective widget, and will also look at the excellent Yahoo Pipes service.

Read More

Creating an AJAX Loading Spinner

When we’re working on our AJAX widgets locally or on a development server it’s easy to forget that the data we are getting takes time to be requested, returned and processed. This can, in some situations, lead to unresponsive, blank or otherwise boring pages that our visitors must look at while the content is generated. In this tutorial we’re going to look at adding a lightweight loading spinner so that our visitors get visual feedback that the page is doing something while content is loaded.

We’ll be using jQuery to make AJAX requests and display the spinner in an attractive popup. We’ll just load some dummy content in a container and will need to delay the response slightly so that we get to see the spinner. We’ll be working mainly with jQuery-flavoured JavaScript, with a little HTML and CSS, as well as some basic PHP and JSON.

Read More

Creating a Poll System with jQuery Part 2

In part 1 of this tutorial we created the initial page and the underlying mark-up of our poll widget. We also did all of the necessary JavaScript work to obtain the visitors selection and initiate an AJAX POST request to the server. We also styled the poll widget.

In this part of the tutorial we’re going to pick up right where we left off and add all of the server-side code that we in order to store the selection made by the visitor and send the updated results back to our poll widget. We’ll be using a combination of PHP and MySql to achieve this.

Read More

Creating a Poll System with jQuery Part 1

In this tutorial we’re going to look at how we can create an interactive and engaging widget for our web pages that asks our visitors a multiple-choice question and records how many people choose which option. This is great for gauging the opinions of our visitors and finding out which topics are the most popular. It’s a great, interactive little widget we can add to our sites that gives positive feedback to our visitors and gives us a platform from which to research our visitor’s opinions.

Read More

Fresh Baked Goodness with the YUI Cookie Utility

Cookies provide an essential service to web developers, giving us a quick way of deciding whether someone has visited our site before and allowing us to tailor the site to them in some simple way if they have, by providing a welcome message, or by putting any moveable elements into a particular configuration for example. The only problem with cookies is not that they are particularly hard to work with, it's just that they're so cumbersome to code for, as anyone that's used them will know.

Thankfully, the YUI provides us with an easy way of setting and getting cookie data, which abstracts away the strict syntax and dramatically shortens our scripts which is a very good thing considering even the most basic functions for getting and setting cookie data are often in excess of 20 lines of plain-vanilla JavaScript, even without error checking that prevents an error being thrown if document.cookie is empty.

Throughout this tutorial I'm going to be assuming that you've worked with cookies before the old fashioned way and understand the principles behind their use. Even if you've never worked directly with cookies before however you should still be able to use the YUI Cookie utility without any difficulties. The examples in this tutorial have been tested on a variety of the most common web browsers in use today, but only on the Windows platform. You should note that these examples do not work seem to work in Google Chrome.

Read More

Intelligent YUI Resource Loading with YUI Loader

In my last article we looked at the YUI Get utility, something constructed for the sole purpose of dynamically adding additional script or CSS resources to a page after it has loaded. Following on from this we’re going to take a look at the YUI Loader, a very similar utility with a very similar purpose.

YUI Get will indiscriminately get the files you specify but the big difference with YUI loader is that it has been designed to specifically get YUI files. YUI Loader is an intelligent utility that saves you having to include or specify all of the necessary individual files and dependencies for any component; you simply tell it the component(s) you wish to use and it looks at what YUI content exists on the page, and then adds anything else need to make the component work.

Read More

Getting Resources with YUI Get

The YUI Get utility is a relatively recent addition to the growing suite of developer tools that come under the YUI family. Its only purpose is to allow us to dynamically add new CSS or script resources after a page has loaded. Why would we want to do this? There are many reasons, but the most prominent would probably include Progressive Enhancement,Lazy Loading, Cross Domain Data Resources.

Read More