Dev Tips | Become a Better Developer, One Tip at a Time. » Javascript

AJAX and PHP, Building Modern Web Apps – Book Review

Drew Douglass — Thu, 28 Jan 2010 21:48:26 +0000

As many of you know, I'm a huge fan of reading actual web development books to increase ones skills. Sometimes, you just need to step away from the computer and read an actual physical book. I recently had the pleasure of reading AJAX and PHP: Building Modern Web Applications - Second Edition, and I absolutely loved it. I'm going to take some time today to go over the some of the book, and what I feel it has to offer the average reader.

Review Overview

Book Summary
Who is this book for?
Subject Matter
Notable content/features
Final Thoughts

Book Summary

The main focus of AJAX and PHP: Building Modern Web Apps is to get you up and running using raw Javascript and php to build practical and useful applications. I was happy to see the book mentions Javascript libraries, but really teaches the reader how to do things with plain old Javacript while accounting for all browsers. It was actually fun learning how to create your own AJAX cross browse compatible objects, which is something I never though I'd say.

To quote the books description and give you a better idea of the subject matter:

This book is a step-by-step, example-driven AJAX tutorial, featuring complete case studies. Each chapter contains a friendly mix of theory and practice, so that your journey through the book will be pleasant, yet efficient. You’ll be coding your first AJAX application at the end of the first chapter, and with each new chapter you’ll develop increasingly complex AJAX applications featuring advanced techniques and coding patterns.

Who is this book for?

In my opinion this book is great for beginners to web development, intermediate web developers looking to polish their AJAX and php skills, or advanced users who may have not had much experience using raw Javascript in web applications.

Anyone wanting to learn how php and Javascript can integrate asynchronosuly together will probably find this book behooving.

Subject Matter

I can't reveal all the details, but there are some seriously awesome applications and tutorials used in this book.

You are first introduced and walked through the basics of everything you'll need to get started, there is also a great primer on Javascript and even OOP style of Javascript, which is a nice bonus.

After that, you jump right in to building example AJAX applications, taking advantage of different web services and API.

Both XML and JSON formats are covered, which is essential.

Notable Content/Features

The section dealing with JSON vs XML is just awesome no matter which side of the fence you happen to stand on. Truth is, both data formats are in wide use, so it's helpful to know how to use them both when it relate to AJAX and PHP.

Another feature of the book I really enjoyed was the bonus on "Design Patterns" where common JS and PHP design patterns are evaluated and explained, it's very helpful for anyone trying to improve their application workflow.

Lastly, I'm very happy with how thorough of a job the authors did when it came to handling and dealing with cross browser issues. This isn't the most fun thing in the world, but any developer knows it's vital that their app work seamlessly across all common browsers.

Final Thoughts

As with nearly every single book from Packt, AJAX and PHP: Building Modern Web Applications is absolutely worth the price. It's a book to keep on your shelf when you're done reading to resort back to anytime you want to get your hands dirty with AJAX, and want things explained in a clear and precise manner.

As Always...

As always, I like to show all of you that I do in fact read all of these books I talk about and review, so here is my wonderfully extremely good looking self rocking the book:

Drew approves; he needs a haircut too!

Get It Now!

You can pick up the book directly from PacktPubs website and get started with AJAX and PHP today

Awesome radio button grouping with jQuery

Barry Roodt — Sun, 20 Dec 2009 02:21:13 +0000

I was asked to do something rather interesting with some radio button inputs the other day. I haven't come across this particular problem before and google didn't return anything helpful, so I decided to share what I came up with.

Live Demo

First, the scenario

We have a standard form with 4 radio button groups. Each group has 4 radio buttons labeled from "1" to "4". Now, when the user selects "option 1" in "group 1", all the remaining "option 1" items need to be disabled. To see an example in action, you can view the demo here.

The problem

When I first started, I thought that it's simply a matter of giving each "option" (regardless of group) a common class name - then just disabling all other options with the same class name. That works, to a point, but what if the user changes his mind and selects another option ? Now I had to find all previously disabled options, re-enable them and start all over again.

The solution

Essentially what I came up with was a basic nested loop to handle setting and unsetting the relevant "disabled" attributes. To achieve this, first we assign all "option 1" a class of "number1", "option 2" a class of "number2" and so on.

Next, we run a basic for loop, and go through each "number" class (i.e. number1 to number4). For each class, we call a function. Inside this function is another loop - this time iterating over each radio button assigned the current class name. Using this loop, we remove any "disabled" attributes which may have been assigned previously.

We also find out which item in that group is currently selected (if any) - this is so we can run a second loop to disable all those options not currently selected. Confused ? Now might be a good time to go through the code.

The code

$(function(){
		// fire our code when a radio button has been selected
		$("input[type=radio]").change(function(){
			var name = $(this).attr("name"); // get the current button's group name
			$("input[name="+name+"]").removeAttr("selected"); // first we deselect "all" radio buttons within the same group
			$(this).attr("selected","selected"); // make sure our currently "changed" button is selected
			for(i=1;i<=4;i++){ // go through the 4 radio classes
				processRadio(".radio"+i);
			}
		});
		/**
			Loops through each item with same "class" name and disables/enables where appropriate
		**/
		function processRadio(myclass){
			var empty;
			var id = "";
			var buttons = $(myclass); // read all buttons with the specified class name into a jQuery object
			buttons.each(function(){ // loop through each item
				var me = $(this);
				var isSelected = me.attr("selected"); // bool value, based on whether the "selected" attribute is present or not
				me.removeAttr("disabled"); // clear the disabled attribute if present
				me.siblings("label").removeClass("disabled"); // same with the associated label element
				if (isSelected != empty && isSelected != ""){
					id = $(this).attr("id"); // set our tmp id var to our currently selected item
				}
			});
			// make sure we have an id, otherwise we'll get an error
			if (id != empty && id != ""){
				buttons.each(function(){ // loop through each radio button once again
					if ($(this).attr("id") != id){ // set the disabled attributes if id attribute doesn't match our tmp id var
						$(this).attr("disabled", "disabled").siblings("label").addClass("disabled");
					}
				});
			}
		}

	});

I've commented as best I could, which hopefully makes more sense than my rambling above. Once again, there is a working demo available for you to play with. Be sure to have a look at the markup as well, might clear up a few questions.

I strongly suspect that there's a more efficient method for achieving the same result - so if you have a better suggestion, tweak or link please let me know - I'd greatly appreciate it.

Live Demo

Editors Note - PHP Book Giveaway

I'll be announcing the winner for the PHP For Absolute Beginners book giveaway on monday, so now is your last second chance to get your comment in for a chance to win. See here for more details and to enter.

Link Nudge jQuery Plugin

Drew Douglass — Wed, 05 Aug 2009 21:06:02 +0000

I think it was David Walsh who first showed me the idea of link nudging using jQuery. You can see on the sidebar we also use this technique. I haven't seen a plugin made to do this yet (as it is really simple) so I figured this would be perfect for a quick jQuery plugin tutorial. You can download the plugin and/or view the demo below.

View Demo

jQuery Link Nudge Plugin (526) - 19.9 KB

Authors Note:This plugin has now been given the name of NudgeIt and has had a lot of new features added! Please see the two updates at the bottom of this page for more information.

The Plugin Javascript

Creating the plugin is simple and is as easy as creating any other jQuery plugin. I'll try to comment the source code some so you can get an idea of how it all works.

jQuery Link Nudge Plugin
Posted by DrewDouglass on August 5th, 2009
Plugin Source.

Usage

$(function(){
		$('ul li:even').linkNudge({
			elapseTime: 500
		}).css('list-style-type', 'circle');//Plugin allows for chaining, as seen with the css call.
	});

Documentation

To use the plugin, simply include the plugin and jQuery library on your page and make a call to the linkNudge function. You can include three optional parameters, as discussed below.

padding - Allows you to set how far the link should be nudged. Defaults to 20px.
elapseTime - The time, in milliseconds, over which the nudge should occur. Default to 300.
returnPadding - Optional padding to return to when the element is no longer being hovered. Defaults to 0.

Terms of Use

You can't sell it. Otherwise, use it how you would like in your projects, a credit to this page in the notes or documentation would be appreciated. Donations even more so.

View Demo

jQuery Link Nudge Plugin (526) - 19.9 KB

Feed Me

If you have used or enjoy this plugin, I urge you to consider making a small donation so I can buy some Chinese food.

Update:

David Walsh has modified the flexibility of the plugin in a new post on his blog. I encourage all of you to give it a look and download and see how they differ. You can find Davids plugin on his website. Thanks for adding on to and improving the plugin David!

Update Two!

David and I have decided to collaborate on this plugin and host it on a GitHub so everyone can easily keep track of any updates or changes. We are now also calling the plugin, quite appropriately, NudgeIt.

CSS Tip: How to Make Circles Without Images

Vasili — Mon, 04 May 2009 02:53:28 +0000

About a month ago, Jeffery Way posted an article about creating shapes with pure CSS, no images added. I've been using the CSS3 property of border radius a lot in a design I've been working on and thought, "why can't I use this to make circles?" Today, I'll show you how to make your very own CSS circles. In addition, we will use our new knowledge to create a simple jQuery plugin!

View Demo

Structure, structure, structure!

How are we suppose to make a circle without any HTML to style? Because this is just a simple shape, I'll be using an "empty" span tab — I've just put into it.






CSS Circle




&amp;nbsp;

I'll be using inline CSS because this is just a demo, but if this were for a project you'd probably want to put it in an external style sheet. I've also reset the margins and padding, then gave the body a one inch margin to push our circle away from the sides of the page.

Basic Styles

For now, I'll give the circle a background of #333 just so we can see it. You'll also want to give it the same height and width, this is the length of the diameter. The size doesn't really matter just make sure it's en even number.

.circle {
display: block;
width: 80px;
height: 80px;
background: #333;
}

Note: If you're using an inline element (like a span tag), you'll want to give the element a display of "block". If you don't know if your element is a block level element or not, just load the file in a web browser and if it's height and width look larger than 1px it is.

Circles Are Really Made With CSS3

What really gives this circle its arcs is CSS3's -moz-border-radius and -webkit-border-radius properties. What we're going to have to do is give the border radius a value of half the height/width; this is the radius of the circle. For my example, I've used 80px for the height and width so I'll set the border radius to 40px.

.circle {
display: block;
display: block;
width: 80px;
height: 80px;
background: #333;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
}

Conclusion

CSS3 is a very powerful tool to know how to use. Just make sure you don't base your entire website around it because not every browser supports it yet. However, if you can get the effect in certain browsers and still have you're design looking okay in other browsers, I think it's fine to use browser specific styles.

Create a jQuery Plugin For Our Circles

You can also take this a step further by making it into a jQuery plugin.

(function($){

	$.fn.jCircle = function(options) {
		var defaults = {
			size: 40
		},
			settings = $.extend({}, defaults, options);

		settings.size = parseInt(settings.size) || 40;
		settings.radius = (settings.size/2) + 'px';

		return this.each(function(){
			var $this = $(this);

			$this.css({
				display: 'block',
				width: settings.size + 'px',
				height: settings.size + 'px'
			});

			$this.css('-moz-border-radius', settings.radius);
			$this.css('-webkit-border-radius', settings.radius);
		});
	}

})(jQuery);

View Demo

Javascript Tip: Easy Fading Using jQuery

John Bloomfield — Thu, 30 Apr 2009 22:29:49 +0000

Whilst working on a project recently I came across a need for us to show a selection of images depending on their type and when a link to them is clicked. I decided to use jQuery as it saves a lot of time as most of the work is done for you. I will step through the code so you can see how I did it.

View Demo

As with any jQuery, we are required to use the following line to tell our jQuery code to run as soon as DOM is ready rather than when the page has finished loading.

$(document).ready(function(){

The next line detects any click from a link inside the div with an id of “links”

$('#links a').click(function(){

Once a link has been clicked any attribute from that link is accessible through $(this), so the next line sets up a new variable called “color” and takes the “rel” attribute from the tag and puts it into our new variable.

var color = $(this).attr('rel');

Once we know which colour link has been clicked we can then fade out all images that have a different colour and fade in the colour that has been clicked.

$('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
$('#tiles div.' + color + ' img').fadeTo("slow", 1);

To finish off we need to close our function brackets. You will notice there is a “return false;”. This is to stop the link actually activating the href attribute and basically overriding it so we can do our magic. This becomes useful when users don’t have Javascript activated in there browser, you can make the link work as normal. Unfortunately, you would need to create separate pages with different colours highlighted instead. (sigh!)

So, to sum up I have put all the code below and you will need to remember to include the latest jQuery Javascript file from www.jquery.com
All the HTML you can grab from the source of the demo page.

Final Code

$(document).ready(function(){
   $('#links a').click(function(){
      var color = $(this).attr('rel');
      $('#tiles div.tile:not(.' + color + ') img').fadeTo("slow", 0.3);
      $('#tiles div.' + color + ' img').fadeTo("slow", 1);
   });
   return false;
});

Hopefully, this will be useful to someone. Have fun!

View the Demo

How to validate Date of Birth with jQuery

Barry Roodt — Tue, 10 Mar 2009 00:38:13 +0000

In a recent project I had to implement what's commonly referred to as a Legal Drinking Age (LDA) page. Basically what needs to happen is that the user has to enter their date of birth and thus 'confirm' that they are of a legal drinking age for their respective country. You can view an example of just such a page here.

This brought me to an interesting requirement - the user needs to enter their birth of date (in this case via 3 select boxes), their age then needs to be calculated from the entered date and they are either granted, or denied access based on the result.

Interestingly enough, after having a quick look around I hadn't been able to find any similar example, so I had to come up with something myself. The following code is my solution:

$("#lda-form").submit(function(){
var day = $("#day").val();
var month = $("#month").val();
var year = $("#year").val();
var age = 18;

var mydate = new Date();
mydate.setFullYear(year, month-1, day);

var currdate = new Date();
currdate.setFullYear(currdate.getFullYear() - age);
if ((currdate - mydate) < 0){
alert("Sorry, only persons over the age of " + age + " may enter this site");
return false;
}
return true;
});

First, we get the relevant entered date values - the "day", "month" and "year". I've also added an "age" var so that this can be easily edited if necessary - the current value is set to 18.

Next we create a Date object and call it "mydate". We then use the object's "setFullYear" method to set the value of "mydate" to the user's entered birth date. You can view more information about this method here. The only thing to notice here is that we have subtract 1 from the "month" value as it's 0 indexed.

Now that we have the user's birth date sorted, we then create another Date object and call it "currdate". The default value for "currdate" is the current date. We then set "currdate" to whatever the current date is minus our "age" value - i.e. Today - 18 years. Once again, we use the "setFullYear" method to set the date. However, to get the current date in a useable format, we use the "getFullYear" method and THEN subtract 18 from the resulting value. So to do this we use "currdate.getFullYear() - age".

Once we have the date of 18 years ago and the user's birth date, both in the same format, it's simply a matter of making sure that the required date minus the birth date isn't greater than 0. If so, we output an alert to inform the user then return "false" to make sure that the form doesn't get submitted.

Pretty straightforward.

PHP Tip: Add Custom Google Search Results to Your Site with PHP

Brian Cray — Fri, 16 Jan 2009 23:06:25 +0000

Have you ever wanted to integrate a custom google search on your site, and style it to your liking? Today, one of our new Dev-Tips author Brian Cray will take you through adding custom google search results to your site with php.

What you need

Quickly...

Mike Migurski's PHP JSON decoder
allow_url_fopen set to On in your PHP.INI (many hosts have this on by default)
A desire to learn to be even more awesome than you already are

You'll end up with 2 files to make things work: search.php that shows a search form and results and querygoogle.php that pulls search results from Google. Put the CSS used in this tutorial wherever you want... if you want it.

How will this make your life better?

Being the awesome Web developer/designer/jack-of-all-tradeser you are and your clients know you are, you receive frequent requests to add a "little search box" as a part of your client's Web site. What follows is a twitch you disguise as a sneeze because you know you haven't got a solid easy-to-impliment custom solution that the client won't groan at.

But that'll all change now. Armed with a little PHP wizardry, we can turn you into a star. This is a ridiculously easy to implement solution for adding CSS-able custom results straight from Google to your client's Web site. And, we'll do it all in 3+1 easy steps. (note: please read Google's Terms of Use).

Step 1: The search form/page - search.php

Since computers can't yet read minds, we'll have to create a simple search form that includes a text field for the search query and a search button. This should be pretty ho-hum to you, but it's important nonetheless.

Notice the form posts to querygoogle.php. We'll create that script in step 2.


Search this site

Yeah baby! We've created a simple search form ready for any daunting search challenge. Let's create the real muscle be your custom search engine, the famed querygoogle.php.

Step 2: The script to query Google - querygoogle.php

Now the fun stuff you've been skip scrolling to see (I know your scanning tendancies!). I wrote this PHP script to take advantage of Google's AJAX Search API to provide a transparent, usable, branded experience to end-users. My customers were happy, and yours will be too. Save this PHP as querygoogle.php.

Here's what the code is doing:

Includes the JSON library
Sets up the URL that you will give you Google's search results. The URL includes your domain to make it a site specific search and the user's search query. The search uses Google's "site:domain.com keywords" search syntax
Uses fopen and fread to grab the JSON that results from a call to Google
Decodes the JSON into a PHP object with Mike's JSON library
Iterates through the object, creating custom HTML-formatted results
Sets a session variable that contains the custom HTML-formatted results to send to your custom results page
Uses PHP's header function to send the browser to your custom results page

decode($body);

// now $json is an object of Google's search results and we need to iterate through it.

foreach($json->responseData->results as $searchresult)
{
if($searchresult->GsearchResultClass == 'GwebSearch')
{
$formattedresults .= '

' . $searchresult->titleNoFormatting . '
' . $searchresult->content . '
' . $searchresult->visibleUrl . '
';
}
}

$_SESSION['googleresults'] = $formattedresults;
header('Location: ' . $_SERVER['HTTP_REFERER']);
exit;
?>

Important Note

We are having a small issue with the code syntax formatting, be sure the '&' signs in the url on line 9 above do *not* have a semicolon after them. Please see 'Renes' comment below for more. Apologies for the inconvenience!

Step 3: The results page - back to search.php

I know you're itching to see the results. So was I! Boy I wish I could do it all over again for the first time...

Anyway, the HTML formatted results are now stored in a PHP session variable from querygoogle.php. Groovy. All we have to do is display them and add some more CSS to make the results look sexy.

Make sure you can pull the results from the session by verifying that you are starting the session at the beginning of search.php and then echo the results. See below for the final search.php code (we started it in Step 1):

<?php
session_start();
?>


Search this site  


<?php
if(!empty($_SESSION['googleresults']))
{
echo $_SESSION['googleresults'];
unset($_SESSION['googleresults']);
}
?>

Your search results work! But they're ugly. Here's some sexy CSS like I promised to get your started.

body
{
background-color: #000;
color: #ccc;
font: .75em/1.5em Arial, sans-serif; /* EMs calculated with pxtoem.com */
padding: 1.5em;
margin: 0;
width: 40em;
}

.searchresult
{
padding: 1.5em 0;
border-bottom: 1px solid #333;
}

.searchresult h3, .searchresult p
{
margin: 0;
}

.searchresult h3 a
{
font: italic 1em Georgia, serif;
color: #f30;
border-bottom: 1px solid #900;
text-decoration: none;
font-weight: bold;
font-size: 1em;
}

.searchresult .resultdesc b
{
color: #fff;
}

.searchresult .resulturl
{
color: #666;
font-size: .75em;
}

If you'd like to style your own results your way, each result will be placed in the following HTML format:


Page Title
Page description/highlights
URL that google always shows in green

Step 3+1: Celebrate!

Congratulations! Your clients are happy. You've worked hard and you should take some "you time."

Need Web Hosting?

If you're looking for a quality web host, check out Web Hosting Search for an array of quality hosting services.

jQuery Tip : How to Select Radio/Checkbox Input On Click

Barry Roodt — Sun, 11 Jan 2009 01:43:35 +0000

I've been faced with the following scenario a few times during my web development career : First, you have an unordered list - within each list item you have a radio input. Secondly, when you click on the list item (i.e. the entire container), it must select the radio input and add a css classname of "selected" to the list item, thus highlighting the item that has been selected.
The following example will explain how to implement a workable solution. For a preview of what we will achieve, check out the demo.

The HTML :




	
    
    
    


	
		
			Test 1 
			Test 2 
			Test 3 
			Test 4 
			Test 5

There is nothing out of the ordinary here - just a simple unordered list of radio inputs.
There's a basic stylesheet to highlight "selected" items.

For those of you wondering why I'm including the jQuery library from the Google Code repository :

It saves on bandwidth, it'll load very quickly from Google's CDN.
It'll already be cached if the user has visited a site which also delivers it from Google Code.

Our Javascript/jQuery:

$(document).ready(function(){
	$('li').click( function(){
		$('li.selected').removeClass('selected');
		$(this).addClass('selected').children("input[@type=radio]").click();
	});
});

As you can see, the actual code involved is short and straightforward - just the way we like it.

First - we tell jQuery to execute the following code once the document has finished loading, ensuring that the DOM has been registered successfully.
Next we bind a click event to all list item elements on the page - you can of course change this to all list items with a class of "myselection" for example ( $("li.myselection").click... )
When a list item is clicked - we first need to remove the "selected" class from any previously "selected" list items.
Now we need to add the "selected" class to the list item which fired the event ( $(this) ).
Finally, we need to make sure that the radio button inside the list item is "clicked" : we do this by using the .children() selector and executing a click() event on the input.

The important bit is the .children("input[@type=radio]") selector. Known as an XPath selector. What we're doing here is telling jQuery to find all all radio inputs inside "this" list item. We then use .click() to..as you guessed it... execute a click event on the returned element (in this case the radio input).

And that's all there is to it. You can read up some more on jQuery selectors here.
I would also highly recommend reading the following article : Improve your jQuery - 25 excellent tips.

jQuery Tip: Quick and Easy Font Resizing

Drew Douglass — Thu, 08 Jan 2009 03:02:42 +0000

One of the many great features of jQuery is how easy it is to edit the css via a user event, such as a click. We can use this to knowledge to edit any css property we wish. Recently, NETTUTS had a great article that went all out with a font resizing slider bar using the jQuery UI. While this article was certainly in-depth and well done, we want something quick and simple. Today we will create a simple script to allow the user to edit the current font size of an element.

Our Goal

Before starting any project, we need to know what we want to do. We want a simple and quick script to resize the text within a certain element 'on click'.

Basic HTML

First thing we need to do is setup our simple HTML page, we will use the code below for the demo.

jQuery Font Size Change | Dev-Tips

Text Resizing with jQuery Demo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Setup some variables

Now it's time to setup some variables to use later on in our script, I'll explain more after the code below.

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);

First we use some shorthand jQuery, which is the same as using document.ready(). Next we will setup some variable to use when the input buttons are clicked. The variable ourText will be our paragraph to re size. The variable currFontSize gets the current font size of the paragraph. The variable finalNum uses the parseFloat function to convert the string into a floating point number (with a base of 10). The variable stringEnding gets the pixels or em ending so we can add it back on later.

Conditional Statements

Next we need to decide what to do depending on the button the user is clicking on.

if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

The above should be pretty self-explanatory. If they clicked on the large button, we multiply the current font size by 1.2, and if they click on the small button the font size is divided by 1.2.

Full Script

Our final script looks like this:

$(function(){
		$('input').click(function(){
			var ourText = $('p');
			var currFontSize = ourText.css('fontSize');
			var finalNum = parseFloat(currFontSize, 10);
			var stringEnding = currFontSize.slice(-2);
			if(this.id == 'large') {
				finalNum *= 1.2;
			}
			else if (this.id == 'small'){
				finalNum /=1.2;
			}
			ourText.css('fontSize', finalNum + stringEnding);
		});
	});

And that's it, we now have a quick and simple font resizing script using jQuery. Don't forget to check out the demo below if you want to see it in action.

View the Demo

Update with animation!

Due to the popularity of this article, we have published another font resizing script, this time with animations on the resize. Be sure to check it out 'Font resizing with animation effects.'.

jQuery Tip: Resources for Creating Your Own Plugins

Drew Douglass — Tue, 06 Jan 2009 13:10:02 +0000

With jQuery easily becoming the quickest growing Javascript library on the market right now, it's no wonder the demand for quality tutorials is so high. One of jQuerys great features is the ability for anyone to quickly and easily create a plugin. Today, we will have a look at some extremely helpful resources to get you started with created your own jQuery plugins.

The Definite Guide to Creating a Practical Plugin

First up we have an excellent article by Dan Wellman over at NETTUTS. This article is extremely in depth and aimed towards those who are new to jQuery but have used it before.

Visit Article

Developing a jQuery plugin via Snook.ca

Anyone who knows me knows that I am stalking Jonathan Snook. OK, maybe not stalking but the guy is a web dev hero. In this article he takes us through the process of getting ready to create your plugin and putting the code into action.

Visit Article

Building Your First jQuery Plugin

In this plugin tutorial you learn how to create a plugin which truncates text, or in other words, allows you have a a drop down 'read more' effect.

Visit Article

A Plugin Development Pattern

Learning jQuery brings us an excellent article aimed more towards the development steps and patterns of developing a basic jQuery plugin.

Visit Article

Learn How to Create a jQuery Plugin

Again, NETTUTS delivers with a quality tutorial on every single step of creating your first jQuery plugin. Be sure to check out jQuery for absolute beginners, a 15 day series by Jeffrey Way on the ThemeForest blog for some excellent tuts.