Award-winning web development since 1995
Written: December 20, 2013
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:
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: jQuery 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
Once you choose by clicking, then a new choice appears dynamically prompting for your City location:
Clicking in this field brings up a 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:
As you choose an Internet service then the add-ons appear dynamically:
As you choose each service then the shopping cart populates instantly and shows if you have any discount:
Clicking the Checkout button brings you to a summary page where you see all the details of 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: jQuery, WordPressI 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.
Then I got inspired to create my own Christmas Card, click to see the message and hear the music.
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: animation, jQuery, Merry ChristmasPPI 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:
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 |
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: autocomplete, jQuery, json, MySQL, PHPOver the past few months I’ve been contracting with Pivot Group on a site for 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:
©2018 Tualatin Web LLC. All rights reserved. |
Payment |
Web Hosting |
Could you please upload your code? I really need this code in my project .
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.
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 .
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.?
No, it’s just a school project. Thank you for the offer but I just have to figure it out myself.