Written: December 20, 2013

animated christmas card

Animated Christmas Cards

I have a web client that runs 13 businesses, and they’ve had me create animated Christmas cards for the past three years. The requirements are:

Here’s a snapshot of what the 2013 card looks like:

animated christmas card

 

 

Animations include:

For the technical readers, this animation uses jQuery effects.

To watch this animation click here, and enjoy.

Merry Christmas and a Happy New Year to you in 2014.

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

Millions of Choices

TCT West is a telecom company in Montana and Wyoming that wanted to offer a way for customers to visit their site and choose services like:

The challenge was that TCT West serves 61 cities, and the pricing, packaging and options change for each city. Furthermore, each service has optional add-ons. In summary, there are literally millions of choices possible, so how do you make that intuitive to the customer trying to order a single service, multiple services, or even a pre-packaged bundle of services?

We started out the design by making it very simple with a single choice: Residential or Business

Bundle Builder

 

Once you choose by clicking, then a new choice appears dynamically prompting for your City location:

location

 

Clicking in this field brings up a City picker:

City Picker

 

Based upon what you just clicked in the City Picker, you next see only the packages and services designed for your specific city:

a la cart items

 

As you choose an Internet service then the add-ons appear dynamically:

Internet Add Ons

 

As you choose each service then the shopping cart populates instantly and shows if you have any discount:

Shopping Cart

 

Clicking the Checkout button brings you to a summary page where you see all the details of your order:

confirm your order

 

There you have it, this is how we simplified the process of having millions of choices by offering dynamic content based upon customer choices, one step at a time.

This project was developed in WordPress, see what the back-end looks like in another blog.

For the technically inclined reader, this project used the powerful jQuery library.

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Merry Christmas

I recently had a client that wanted to send out animated Holiday Greeting cards to their customers so we made several versions for each division in the company.

Chrome Country

Then I got inspired to create my own Christmas Card, click to see the message and hear the music.

Merry Christmas

These animations used to be created with Flash technology a few years ago however today we now use a technology called jQuery that allows you to enjoy these on your iPad, iPhone or iTouch products.

Tags: , ,

Comments are closed.

Speeding Event Registration with Auto Fill

PPI is a client that organizes several annual events with online registration. Jules at PPI asked me to look into automating the process for companies that are returning again this year so they don’t have to re-type so much information again.

I did some searching on Google and found a solution that uses jQuery, then another site that showed how to integrate that with a MySQL database.

Here’s what the visitor sees when they register:

speeding event regisration

As they type in their company name like “canon” they see a list of possible matches:

They click the matched name “Canon” and the next 8 fields are auto-filled:

Coding

Adding this new feature required that I add jQuery and CSS in the HEAD of my page and define which fields should be auto-filled:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {

   
    $("#company").autocomplete({
        source: "test_company.php",
        minLength: 2,
        select: function(event, ui) {
            $('#address').val(ui.item.address);
            $('#city').val(ui.item.city);
            $('#state').val(ui.item.state);
            $('#zip').val(ui.item.zip);
            $('#phone').val(ui.item.phone);
            $('#email').val(ui.item.email);
            $('#first_name').val(ui.item.first_name);
            $('#last_name').val(ui.item.last_name);
           
        }
    });
   
});


</script>

On line 9 I used #company as the name of the input field where a visitor types the company name.

The connection to the database with all of the company info stored is defined on line 10 as “test_company.php”.

Lines 13 thru 20 have the eight field names that I want to auto fill in my form.

The HTML for each field uses the same ID just defined in the Javascript listed above:

1
2
3
<input name="company" type="text" id="company" />
<input name="first_name" type="text" id="first_name" />
...

The connection to the MySQL database is defined in the file “test_company.php”:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?
/* Connection to the database. */
include 'database.php';

$return_arr = array();

/* If connection to database, run sql statement. */
$fetch = mysql_query("SELECT * FROM ppigolf WHERE company LIKE '%" . mysql_real_escape_string($_GET['term']) . "%'");

/* Retrieve and store in array the results of the query.*/
while ($row = mysql_fetch_array($fetch) ) {
    $row_array['address'] = $row['address'];
    $row_array['city'] = $row['city'];
    $row_array['state'] = $row['state'];
    $row_array['zip'] = $row['zip'];
    $row_array['phone'] = $row['phone'];
    $row_array['email'] = $row['email'];
    $row_array['first_name'] = $row['first_name'];
    $row_array['last_name'] = $row['last_name'];
    $row_array['value'] = $row['company'];

    array_push($return_arr,$row_array);
}

/* Free connection resources. */
mysql_close();

/* Toss back results as json encoded array. */
echo json_encode($return_arr);
?>

Line 20 is where I define that “company” is the ID being typed by the web visitor and is requires the array key of “value”. For simplicity I named my form fields the same as my database table fields.

Enjoy automating your registration forms and using auto-fill to speed up the process.

Tags: , , , ,

5 responses to “Speeding Event Registration with Auto Fill”

  1. Chiusuzaki Hime says:

    Could you please upload your code? I really need this code in my project .

    • Daniel Payne says:

      The code is already posted in the blog. Are you a developer or just a web user? This code is meant for someone that knows how to program with: jQuery, CSS, HTML, PHP and MySQL.

      • Chiusuzaki Hime says:

        I’m a developer, a beginner . I try to run your code after adjusting several places (where necessary) but I couldn’t get the same result as posted here .

  2. Daniel Payne says:

    I’m available for hire at $75.00/hour to make this work on your web site. Are you using any CMS like WordPress, Drupal, Joomla, etc.?

Leave a Reply

Your email address will not be published. Required fields are marked *

Dascom Systems, Client Exmaple

Over the past few months I’ve been contracting with Pivot Group on a site for Dascom Systems.

Dascom Systems

We just launched on Friday and I’m excited to show you what our team accomplished:

WordPress is a very popular blogging and CMS plaform and most people just find a theme and use it. For this client we had a talented designer named Drew Dunn provide all of the beautiful page layout and Flash animations.

This design was created from scratch using Dreamweaver, Photoshop, CSS and Javascript, then turned into a WordPress theme.
FancyBox was used to show larger photos when you click on a thumbnail:

The CEO of Dascom sent us a thank you email, which felt just wonderful to read:

Tags: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Blog Tags

Recent Posts

Blog Directory & Business Pages at OnToplist.com