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.
- The Firebug Extension for Firefox
- 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…
“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
Plugins are useful, but a lot of the time you don’t need their…
I recently erased Fedora 9 from my hard drive, and installed Linux Mint. Im enjoying it so far but it didn’t come with a webserver. Heres a little tutorial on how to install XAMPP and get it up and running.
First of all, download XAMPP from sourceforge. As of writing this, the latest version is 1.6.7 so ill be referencing to that in the tutorial. Save it to your /home/$USER/ directory.
Extract the archive to your /opt/ directory.
sudo tar xvfz xampp-linux-1.6.7.tar.gz -C /opt
Now its installed 
To start it:
sudo /opt/lampp/lampp start
To stop it:
sudo /opt/lampp/lampp start
To launch the panel/manager:
sudo /opt/lampp/lampp panel
You can test if its on by going to http://localhost
To add files to the server, you would need to put them in /opt/lampp/htdocs/ but since that directory is owned by root, your user doesn’t have neccesary privilages. The easiest way to “get around” this is to set up a symlink folder in your home directory. You may be familiar with public_html or www directories on your webhosting, we are basically setting the same thing up here.
First we want to set up the directory we are going to link to in htdocs. So..
sudo mkdir /opt/lampp/htdocs/homefiles/
Then make the equivilant directory in our home directory.
mkdir ~/public_html/
And finally link them together.
sudo…
Woo! Another screencast. In this one i show you how to include your twitter stream into your blog or website, and then format it using jQuery so your tweets have an alternating background colour.
Heres Part 2 of the jQuery AJAX login tutorial. If you haven’t already, i suggest you read part 1 located here.
We are going to start writing the PHP code to process the form. This is fairly basic stuff, using $_POST to get the values from the form, then checking them against pre-assigned values, if they match, then echo approved, if they don’t then echo denied.
So at the end of this stage, you will have an HTML form set up and this PHP file. You can enter the username Panzer and the password of query7 into the form and it will return Logged in.
Next tutorial, the fun part, the AJAX!
Heyo. This is going to be the first of 4 tutorials on making a jQuery powered AJAX login system with a PHP backend. The series of tutorials will go like so.
- Plan, code the form (This tutorial)
- Code the PHP backend, make it work
- Code the AJAX, implement it.
- Tidy it up, make it look snazzy
Ok then. So we will have a forum with 2 inputs; username and password. The user will enter the details and we’ll use PHP to authenticate them. If its true, we can set a cookie or echo some text. We will then implement jQuery’s AJAX and make the whole thing seemless. Some nice little fades will be added at the end.
So, the form. Its a plain and simple HTML form. Nothing special about it.
Thats all for now. Next lesson we will code the PHP and “make it work“.
Im a big Fan of PHP and one day i wanted to make a desktop application that could pull down posts and private messages from one of my forums. I didn’t want to learn a whole new language, just code the small application so i dismissed C, and looked at Python. I saw there was PyGTK, saw i wondered if there were PHP-GTK, which indeed there is.
I bought Scott Mattock’s PHP-GTK 2 book (Only to learn later that it was based on one of the early alphas) and dove straight in. Installation wasn’t hard, and i could get started straight away. I learned the hello world example first, and here it is..
So far you should have read/watched:
So you know the very basics of jQuery, and multiple ways to select the HTML element that you want to manipulate. In this tutorial i’ll show you how to manipulate that element after you have selected it; changing the contents, changing the HTML and getting values. I won’t be showing you slides/effects , that’ll be in a tutorial coming up.
I will be using the HTML example from the selectors tutorial, and ill only be calling on cells by using their id - im focusing on the manipulation rather than the selecting. Anywho, lets get into it. First the HTML code we’ll be manipulating.
Ok, say we want to change the text value of a column. We can do this using text() . Take note that text does not parse HTML, it keeps it as plain text.
$("#3").text("wowow");
This changes the value of the #3 td to wowow
What if we wanted to put some HTML in their, mayby make some text bold? We use the html function, very much alike the text function except that it parses the HTML. So the text “cool this is bold” is bolded.
$("#2").html("cool this is bold");
Lets say we…
