Archive

Archive for the ‘jQuery’ Category

Using jQuery to add a Twitter Feed to Your Site

January 26th, 2010

This video goes through how to add a feed of your tweets to your web site by using jQuery.

You may find the video confusing if you are not familiar with jQuery. If you want you can simply use the code in the live demo page and copy it on your site to add the twitter feed without having to understand how everything works within it. Just be sure to change the twitterUser variable to be your twitter account.

If you have any questions, use the comments below.

External References:

Author: Erikk Categories: AJAX, IMD401, jQuery Tags: ,

AJAX Autocomplete Example

July 9th, 2009

In this video, I show how to build a simple autocomplete search box. You have probably seen this feature on popular sites such as Netflix, Google, Hulu and Adobe. When you start to type in a search box, you get results returned immediately that match what you typed.

I used PHP, MySQL and jQuery to create this example.

What you need to do in order to get this to work:

In order to get this working on your site, you will need to follow a few steps.

  1. Setup your database. You can use a database you already have or create a new one. If you already have a database and table created you can skip this step. You can view my other MySQL tutorials for more details on setting up a database.

  2. Modify the include/dbconn.php file. You will need to modify this file to connect to your database. You will need to provide your server name, username, password and database name.

  3. Possibly make changes to get_customers.php. You will most likely have to make some changes to this file as well in order to use your own table name.

    For example, on line 9 my query looks like this:
    $query = "SELECT first_name, last_name FROM Customers WHERE last_name LIKE '%" . $queryString . "%' ORDER BY last_name, first_name";

    You will have to change that line of code to match your database table and column names.

    You will also need to modify this line of code from get_customers.php:
    echo '<li onclick="fill(\'' . $row['first_name'] . ' ' . $row['last_name'] . '\');">' . $row['first_name'] . ' ' . $row['last_name'] . '</li>';


    You will need to change $row['first_name'] and $row['last_name'] to match the name of your columns.

Watch Video | View live example | Autocomplete Code


jQuery for Absolute Beginners

May 6th, 2009

I stumbled upon an excellent jQuery video series today called “jQuery for Absolute Beginners.” There are 15 videos that are geared toward jQuery beginners. I watched a couple of them and they are very well done.

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Author: Erikk Categories: IMD401, jQuery Tags:

AJAX Tutorials

April 12th, 2009

These tutorials show you how to incorporate AJAX into a PHP/MySql Web site. I’ve split this up into two tutorials. The first is an introdution to AJAX, explaining what AJAX is and showing several examples of it in use. The second video shows you how to create a simple AJAX application.

Watch Videos

  1. AJAX Introduction
  2. Using AJAX with PHP and MySql

View Live Demo | Download Code

Database
The database for this example is very simple. It contains a single table called Users. The Users table has the following columns: id, username, password, email, gender, and age. View the picture below for more details on the database table.

Users Definition

Users Definition

Links

Video Tutorial: Introduction to jQuery

March 18th, 2009

In this tutorial I introduce jQuery. jQuery is an open source JavaScript Framework which simplifies writing JavaScript code.

Source files used in the video can be found here.

Watch video | Download video| View Live Demo

Author: Erikk Categories: IMD401, Tutorial, jQuery Tags: ,