As we all know jQuery is a very small language. Not only is the file size of the jQuery library small, but the amount of code you need to write to achieve something is also very small. Because of this it is sometimes more efficient to write and test jQuery code in the browser than in a local file. To do this we need a couple of things.

1. The Firebug Extension for Firefox
2. Greasemonkey

If the page that we are going to manipulate doesn’t already include jQuery on it, then we can include it with this small Greasemonkey script. If jQuery is already included on the page, there is no use for this script.

// Add jQuery
    var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);

// Check if jQuery's loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == 'undefined') { window.setTimeout(GM_wait,100); }
    else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }
    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
        alert($); // check if the dollar (jquery) function works

    }

Source
With the jQuery library on the page we can now go ahead and start entering commands. For this example we’ll take jQuery.com, we can enter a basic jQuery Selector…

This is part 2 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX

In part 1 of the tutorial, we covered the PHP and MySQL side of things. In this part we will be enhancing it with jQuery’s AJAX and manipulation functionality. The to-do list will degrade fine - if the user has Javascript disabled, the application will still work. All changes occur in the index.php file.

There are two parts to the script. One handles the posting of new posts, while the other handles posts being deleted. We’ll start with adding new posts.

//When the button with an id of submit is clicked (the submit button)
$("#submit").click(function(){

//Retrieve the contents of the textarea (the content)
var formvalue = $("#content").val();

//Build the URL that we will send
var url = 'submit=1&content=' + formvalue;

//Use jQuery's ajax function to send it
 $.ajax({
   type: "POST",
   url: "process.php",
   data: url,
   success: function(){

//If successful , notify the user that it was added
   $("ul").before("<p class='new'>You just added: <i>" + formvalue + "</i></p>");

   }
 });

//We return false so when the button is clicked, it doesn't follow the action
return false;

});

The url part confuses some people. What we are doing…

This is part 1 of a 2 part series on making a Todo List with PHP and enhancing it with jQuery’s AJAX

In this two part series I’m going to show you how to make a simple to-do list in PHP, and then enhance it using jQuery’s AJAX and manipulation capabilities. This won’t follow any proper coding principles, but will give you the skills to adapt the code to fit your own situations. A todo list isn’t that far away from a simple threaded forum.

It will consist of a few files.

• delete.php - delete the note.
• process.php - create the note, display the notes.
• index.html - form, javascript

We will be storing the list items in a MySQL database. The query:

CREATE TABLE `notes`
(
`id` INT PRIMARY KEY AUTO INCREMENT NOT NULL,
`content` VARCHAR(500) NOT NULL
)

index.php will only contain the form (for now). It’s a fairly basic form, it contains a textarea (where the user enters their note) and a button they hit to submit it. The information is sent to a file called process.php through the post method.

<form id="form" action="process.php" method="post">
<textarea name="content" id="content" cols="50" rows="3"></textarea>
<input type="submit" id="submit" name="submit" value="Post it" />
</form>

process.php then handles the information that was sent from the form. We…

PHP is a very vast language. It’s hard to say that you’ve mastered it. For example, do you know how to crop an image using GD and process web requests with XML-RPC off the top of your head? You may know one of them, but probably not both. That being said, there are a lot of resources out there that help you learn the basics of PHP – Processing forms, security, database interactions and array manipulation. I’ve compiled a list of 5 websites that I think will help you learn the ‘basics’ of PHP as well as taking them a step further.

KillerPHP.com’s Video Tutorials
I used these when I was initially learning PHP and are still a great resource today. These screencasts are typically 10 minutes long and cover the absolute basics – getting your development enviroment up and running to variables and includes.

• Local server setup
• Variables
• Arrays
• Includes
• Loops
• Form Processing
• Functions
• Sessions
• OOP

Pixel2Life’s Tutorial Index
Pixel2Life is a tutorial index where bloggers can submit their tutorials and articles. The result of hundreds of people doing this is a very large library of ‘specialised’ links. For example, at the time of writing this, the frontpage contains tutorials about Twitter, Code Igniter, Gravatars and Converting Excel to CSV with PHP.…

In an attempt to sharpen up my jQuery, i purchased the book jQuery in Action by Bear Bibeault and Yehuda Katz. Reading through the book, i could see that the first few chapters were obviously aimed at beginners. They covered selectors (If you know CSS already your fine) and events. You can easily get this information off the jQuery doc site, nothing spectacular there. Chapter 5 covers the effects, slides and fades but goes into depth abit more on the animate function. Something (in my opinion) which is under documented on the jQuery doc site. It shows off a few different examples.

Chapter 7 is another excellent chapter - showing you how to write your own plugins. It goes into alot of detail, from extending the wrapper to proper naming conventions to looping through each element effected. This chapter is a must read for anyone considering writing their own jQuery plugins. Again, the authors have written 3 example plugins providing alot of reference material.

Fedora 9 includes the new package manager called Package Kit. It aims to be the package manager for your system, as it can install apts, slackware packages,rpms and many other file formats. I booted into it and noticed 2 things.

• The first, its incredibly slow - It took along time to download the updates i needed (Slower than downloading a normal file that size from the server) and it took along time to generate the meta data of plugins list.
• The second is that (in my opnion) the User Interface is horrible. Its hard to navigate to select the packages you want, When you select a package it takes a few more clicks to even see the dependencies it requires, whereas adept and synaptic show you right away.

I tried it, i can honestly say i gave it a good go, but its not for me. Since im new to the rpm system, i searched around for alternatives, i found one called Yum Extender (Yumex).  Its easy to install, just yum install yumex or download it from the websit.

A stumbled across an amazing online app, meant to be like a CAD im guessing but then i realised the different things it could be used for. Project Draw gives you a grid to start off with, you can then place various shapes onto the grid and resize them. Further more you can add colours, text, gradients, alignments and borders which makes it a really good tool to design layouts.

With the arrival of jQuery UI 1.5 i was browsing its’ wiki pages and learning all of the API. I came across the jQuery UI wiki page, its essentially more jQuery effects except these ones are alot more dynamic! You can explode, puff, slide, highlight and alot more. I was a amazed that i hadn’t seen this page or been linked to it before, its something the jQuery UI team should be proud of.

Check it out

For those of you with no jQuery background what-so-ever, jQuery UI is a series of user interface (UI) enhancements made in Javascript. These range from tabs (which also support ajax loading), to dialog boxes which you can drag, drop and resize. All cross browser! Although its currently still under development the finish line is in sight for the 1.5 release. I encourage everyone to check it out, it can add some really professional effects to your website for minimal lines of code.

“Whats a good jQuery menu?” is a question I hear quite frequently on blogs and forums. As jQuery is such a simple language to learn, most people code their own for their own sites. I’ve compiled a list of 3 menu plugins, and and 5 ‘custom’ solutions that people have setup.

http://p.sohei.org/jquery-plugins/menu/
Latest release: Jan 07

This plugin was constructed to emulate a desk top apps menu. They don’t close until clicked off and are activated by clicking them (rather than hovering). It requires the jQuery dimensions plugin to perform ‘smart calculations’.

Example Usage: http://p.sohei.org/stuff/jquery/menu/demo/demo.html
Download: http://p.sohei.org/jquery-plugins/menu/

http://jdsharp.us/jQuery/plugins/jdMenu/
Latest release: April 08

Although the jdMenu plugin is only 3kb itself, it depends on or looks a hell of a lot better with the plugins dimension, positionBy and bgiframe. jdMenu boasts keyboard access and can be easily made into a verticle menu by changing an option.
Example Usage & Download: http://jdsharp.us/jQuery/plugins/jdMenu/

http://users.tpg.com.au/j_birch/plugins/superfish/
Latest release: Sometime in 08

Superfish takes a CSS based dropdown then enhances it with jQuery so if the user has Javascript disabled, it degrades perfectly well. Since the menu is mainly CSS based, I’d imagine it’s a fair bit faster than the other options.

Example Usage: http://users.tpg.com.au/j_birch/plugins/superfish/#examples
Download: http://users.tpg.com.au/j_birch/plugins/superfish/#download

More menus

• http://www.detacheddesigns.com/blog/blogSpecific.aspx?BlogId=58
• http://www.kriesi.at/archives/create-a-multilevel-dropdown-menu-with-css-and-improve-it-via-jquery
• http://javascript-array.com/scripts/jquery_simple_drop_down_menu/
• http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/
• http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/

Plugins are useful, but a lot of the time you don’t need their…