
You can view a demo and download the resources for this tutorial at the bottom of the post.
Web 2.0 websites have a lot of Ajax functionality, some times when you load a new element of a page you may want the user to be able to click the back or forward button so that they can see the previously loaded content. One method to add this function to a website is to use the jQuery Address plugin with jQuery.
jQuery Address has 4 main methods; init, change, internalChange, externalChange. The init method is what is called when the plugin is initiated. The change method is called when the URL is changed, an element in the page is changed or either the forward or backward button is pressed. The change method has the combined functionality of internalChange and externalChange. The internalChange is only called when a hyperlink inside the page is clicked; externalChange is only called when the URL is changed or the backward or forward button is pressed.
To allow deep linking within your website the only two methods that are required is init and change, you can then use internalChange and externalChange wherever you may need them.
(more...)
For this tutorial we are going to create a drop down box similar to the one on the Google homepage when you start typing.
The Markup
The first thing that we must do is create the markup HTML. We are also going to include a stylesheet called style.css, we will create the CSS further down the tutorial.
(more...)
I have already done this tutorial with CodeIgniter and jQuery it can be found here. I thought I would do this tutorial again but rewrite it for CakePHP because it is a popular PHP framework.
Before we start doing any PHP code make sure to copy in the code below into your MySQL database.
CREATE TABLE `tutorials`.`twitter_messages` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `username` VARCHAR( 30 ) NOT NULL , `message` VARCHAR( 140 ) NOT NULL ) ENGINE = INNODB
Create the controller
Under the folder named controller create a file and call it twitter_controller.php.
We create a class inside it called TwitterController and it will extend AppController. We then set the name of the controller to twitter and tell CakePHP which table we are using in our database.
(more...)
If you use Twitter you'll notice that there is a more button at the bottom at the bottom of your timeline, when you click this more tweets appear. This is Twitters way of paginating a page. In this tutorial I'll show you how to create a pagination system using CodeIgniter and jQuery that is almost identical to Twitters.
First of all copy this SQL into your database to create a table that we will be using to grab rows from.
CREATE TABLE `tutorials`.`twitter_messages` ( `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY , `username` VARCHAR( 30 ) NOT NULL , `message` VARCHAR( 140 ) NOT NULL ) ENGINE = INNODB
The class that we are going to create within CI will simply add a math question that the user will have to enter correctly to continue. This is useful to stop bots from mass submitting information to your forms.
The class we are going to write is only very short and simple, but it will give you an idea of how to create classes for your own projects.
Creating the new class
First of all we need to create the file for the class, navigate to libraries then create a file called math_question.php.
All we are going to do within this class is generate two random numbers that will be added together.
(more...)
FancyBox is a plugin for jQuery that allows you to easily display images in the same window with a simple yet effective code. The plugin takes no time to set up and all that is required is that you include the jQuery javascript library within the pages that you are using the FancyBox plugin on.
Features:
- Display single images
- Create image galleries
- Display iFrame
- Execute Ajax
- Include Flash, movies or audio files
Using FancyBox
First of all we need to link to the jQuery and FancyBox file after we have downloaded.
<script type="text/javascript" src="path-to-file/jquery.js"></script> <script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>
Create a form that requires the user to enter both a username and password. If the username field or password field is left blank then a message will be displayed.
Learn how to use the animate function within the jQuery library to create an effect similar to the table of contents for the table of contents on codeigniter.com.
There are many ways of getting traffic to your website such as with search engines, social network websites and telling friends. The best way that I have found besides search engines of getting traffic to your website is by submitting your tutorials to tutorial submission websites.
There are tutorial websites that allow for submission of specific tutorials such as only PHP or Photoshop tutorials and there are websites that allow you to submit a lot of different types of tutorials to that website.

CodeBounce is one of the tutorial submission websites that allow you to submit a range of different tutorials. Its system is somewhat similar to that of Digg's. CodeBounce is a great website and is easy to get to grips with. They allow for the submission of ASP.NET, PHP, CSS, Photoshop, WordPress, Graphic Design, Web Design and Java.
Developer Links and Tutorials.
(more...)

