Archive - September, 2009

Create Your First jQuery Plugin

September 23, 2009 in Uncategorized with 1 Comment

Today is a big day. Up until now we have been using other people’s plugins to improve our web applications. Today we will create our own. It will be an incredibly simple plugin, but will build a foundation for creating more advanced plugins.

This plugin will require you to look at the following pages:

http://www.learnjquerynow.com/lib/addresshide/1.0/addresshide.js

http://www.learnjquerynow.com/demos/addresshide.php

The addresshide.js file contains the actual code for the jQuery Plugin. The php file is our implementation test. What our plugin will do is hide an email address from spam crawlers. It does this by taking in a series of arguments and simply concatenating them together to create a single string. You could do this with simple jQuery or JavaScript code but why not create a plugin? It is a useful function that you will could use over and over again in many different projects.

So on to the explanation of the code.

In the plugin you will notice that there really is not much code here. The most important part of this file is the jQuery.extend({}) line. What this does is tells jQuery that this code is an extension. You will notice that we are using jQuery instead of $. This is because there are other JavaScript libraries use the $ function and this will force the JavaScript to use the jQuery object.

Inside of the extend function you will notice addresshide: function(options) {}. This is the name of our function that is going to be called. This function will be called in the format $.addresshide(opts).

The options parameter is actually a JavaScript object. It contains the following values:

name - The username of the email address (The “josh” in josh@notarealaddress.com)
separator - The separator of the email address (The “@” in josh@notarealaddress.com)
domain - The separator of the email address (The “notarealaddress” in josh@notarealaddress.com)
tld - The separator of the email address (The “com” in josh@notarealaddress.com)
write - This is a boolean value that when true, writes the created email address out using document.write command
selector - This is a string value that places the created email address in selector provided.

Now you can take a look at the PHP file and see how the plugin is utilized. You simply call it using the code described above, giving it the options required and you have yourself your first plugin.

What I would recommend is creating your own “jQuery” library that is your own personal toolbox of things that make your life easier.

Basic Form Validation Using The jQuery Validation Plugin

September 21, 2009 in Uncategorized with Comments Off

Form validation is a very important part of any web application. You have to make sure that your users are going to enter a numerical value when they put data into a quantity field (You don’t want them to enter “one” into a quantity field, unless of course you want to try and handle that kind of input). However it goes much deeper than just requiring a number. You have phone numbers, URL’s, email addresses, numbers that can’t be negative. It goes on and on.

jQuery has a plug in that will handle all your form validation needs. It is called the jQuery Validation Plugin. It is once of the earliest plug ins that were developed for jQuery. What it allows you to do is define what form elements needs to be validated, how to validate the element, and what to do if the element is invalid.

This post has an accompanying demo that can be found here.

Hot Linking The jQuery Validation Plugin

Microsoft allows hot linking of the Validation Plugin so you do not have to host the library. The URL of the plugin is: http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

Basic Validation

This form has very basic validation. It is ideal if you want quick and dirty validation of a form. All you have to do is put your validation rules into the class attribute for your form input elements (there are some other elements that these can go into). The form is automatically validated when the form submit button is clicked, but before the form is actually submitted.

In the example, the required value in the class attribute specifies that the field is required. Any value inside of the element is acceptable. It just cannot be blank. The email value in the class attribute requires that the value in the input field be an email address. The url value in the class attribute requires that the value in the input field be formatted as an URL (complete with the http:// at the beginning)

Some of the basic validation can take place outside of the class attribute. These tend to go inside of their own attributes on the input element. For example, the minlength attribute. The minlength attribute, specifies that the input tag be a specific length.

Use jQuery To Disable Right Clicking On Your Page

September 11, 2009 in Uncategorized with Comments Off

Let me be clear about one thing before we begin. I think that doing this is obnoxious. If you really think you can achieve something by stopping right clicking, you are wrong. If someone wants to get to something on the right click, they will find a way around it.

Having said that, jQuery makes it extremely easy to disable right clicking on your pages. All you have to do is enter the following code:


$(document).ready(function(){
  $(document).bind("contextmenu",function(e){
    return false;
  });
});

Use jQuery To Determine Your Page Load Time

September 11, 2009 in Uncategorized with Comments Off

Any serious web developer has had to deal with determining page load time. No other issue is as important as how fast a page loads. You can have an amazing site, but if it takes too long to load, your users (or customers) will not wait around for your site to load.
Continue Reading…

Use jQuery To Detect What Browser Your Users Are Using

September 10, 2009 in Uncategorized with Comments Off

jQuery has the ability to identify what browser your users are using to visit your site.  It may be more useful to use CSS conditional comments to detect a browser, jQuery makes it very easy:


if( $.browser.safari ) {
  alert('You are using Safari');
} else if( $.browser.msie && $.browser.version > 6 ) {
  alert('You are using a modern version of Internet Explorer');
} else if( $.browser.msie && $.browser.version <= 6 ) {
  alert('You really really need to upgrade your browser');
} else if( $.browser.mozilla && $.browser.version >= "1.8" ) {
  alert('You are using Firefox version greater than 1.8');
}

Page 1 of 3123»