jQuery Ajax Progress Indicator

So you have a button on your website which when you click it makes an ajax call to some script, but you dont have any way of telling the user that its loading completed or failed!

With this simple jQuery script you can!

Screen Shots

Buttons before click

Buttons on click

Buttons Complete (successful)

Buttons Complete (error)

To get this functionality you just need to include the javascript file and add one line of code and add a unique id tag to your button.

$('button').ajaxbuttonindicator();

Variables

There are a few variables that you can set to customise the images.

$('button').ajaxbuttonindicator({'loader_img':'http://your/loading_image.gif',
'error_img': 'http://your/error_image.png',
'complete_img': 'http://your/complete_image.png'});

Demo

Ajax Button Indicator demo

Download

Ajax button Indicator download

PS: If the time between loading and complete is too fast – put a sleep into your backend code
A PHP Example is:

sleep(2); // sleep for 2 seconds.

Having an effective call to action is an important part of any professional website design. There is obviously a goal to every website whether that is getting emails for your newsletter or getting someone to download an item. Making sure you have an effective call to action is essential to the success of your website.

How then do you lay the round work for an effective call to action. Here are some simple techniques that if implemented will surely help your conversion rate.

Create Urgency:

Probably the most important aspect of any call to action is urgency. If there is no urgency your customer will not do the designated action as there is no immediate need.

So how do we create urgency? There are numerous ways to do this some of them include phrases such as “act now” or “try today for free”. Make sure the action creates urgency and makes them take immediate action. Which is better “sign up” or “sign up now”.

Positioning and Consistency:

Make sure your call to action is positioned properly. Ideally you want it towards the top of the page and make it one of the first things that your clients see every time. Generally, most visitors eyes start on the left side of the screen. In addition, make your call to action consistent it should be in the same position, same color, and same button on every page.

Create a Win-Win situation:

Of course you want to benefit, but make sure that the visitor will benefit as well. Making it a win-win situation will just result in a higher conversion rate don’t forget about your customers.

Don’t forget about everyone else:

Although your ultimate goal is to convert users don’t forget about your non-converting customers. Don’t make your call to action get in the way of the information on your website. It is important to make sure that the user experience is still pleasant as a whole. The more information you provide the more trust the user will put in you and will ultimately result in a conversion.

I have not posted in awhile but I’m back and plan on posting again. Please follow me on twitter and as I add new articles and posts I will let you all know! Twitter

I have been playing around with Apaches mod_rewrite on my other site http://www.2big2send.com and i must admit its a whole lot easier than i first thought..

Here is a quick guide for most general use:

Create a new file in your main directory (public_html for cPanel or httpdocs for plesk – not sure about other ones) called .htaccess (Dont forget the ‘.’ dot before the name – you may already have one of these file, thats ok, just edit it and follow the guide below.

RewriteEngine On
# Check if the file or directory actually exists - if it does we dont want to redirect
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# Pass the rewritten URL onto index.php with a $_GET['url'] parameter
RewriteRule ^(.*)$ index.php?url=$1 [PT,L]

What the above Apache code does is firstly check the actual URL and ensure that is it not a file or directory, that actually exists.
Then it passes the request onto index.php for handling

Here is the index.php code with the handler

    function handleRequest($urlString) {
        $url = array();
        // Split apart the URL String on the forward slashes.
        $url = explode('/', $urlString);
 
        switch($url[0]) {
            case 'home':
                include_once('home.php');
                break;
            case 'news':
                include_once('news.php');
                break;
            default:
                include_once('home.php');
                break;
        }
    }
 
    $incommingURL = (isset($_GET['url']) ? $_GET['url'] : '');
    handleRequest($incommingURL);

So… The handleRequest function takes in the URL GET parameter we setup in the .htaccess file.
We split that apart on the forward slashes so it can be easily expanded.
I have assumes that the first part of the URL will be the base page; so for example: http://www.domain.com/home will cause the home.php page to be included.
If the URL was  http://www.domain.com/news/page-1 then the news.php page would be included, and then you would do some processing on the news.php page to handle the /page-1 part of the URL ($url[1]).

Here is the part you are most interested in – the

Mod_Rewrite and PHP Demo

and

Mod_Rewrite.zip Download

There are a few Gotchas that I found; the main one being that you must edit your httpd.conf file, you will find a <Directory /> part where AllowOverride None is listed – you MUST change this part to AllowOverride All or mod_rewrite will not work.
There are others – but i will have to answer them as you come across them as i cant remember off the top of my head.

This tutorial is very simple and easy to follow, and you can use this for image roll overs, buttons, and navigation…  Once you’ve done this a couple times it becomes very simple.
CSS Rollovers can be done with either two images or one single image.  I prefer to always do only one image as it allows for faster loading.
The first step is to make our images.  For this example I used an image with a height of 25px and a width of 100px.
For this tutorial because we are only using one image we will have to double the height.  Make sure when you make your image that you have it aligned perfectly so the roll over looks smooth.  Here is a demo Milwaukee Website Design first

Having a successful website is important, it can be very easy to lose your focus when building a website.  When a website is built properly it preforms as a revenue generating tool for your business.  At website design Madison, WI we don’t just show off our creativity its about getting results.  Before you can do that you must understand the 5 keys to an effective web design:

Simplicity:
A successful website is able to draw in visitors and make it easy for them to navigate around the site.  Do not be afraid to use white space.  If your website has to many flash animations, drop down menus, and graphic you are going to distract your visitors from what is really important and they will be leaving your site fast.

Content:
The old saying content is king still holds true.  Having unique content is still one of the best ways to climb up the search engine ladder.  Great content is fresh and updated regularly.  Make sure that the content on your website is useful to the visitors on your website .  If the content doesn’t come up as immediately useful then you need to find new content.

Titles:
Make sure you put titles for each web page that is relevant.  Titles are still one of the largest contributing factors for SEO.  You need to have unique titles for every page and make sure that your titles have your keywords.  There is no reason to put your business name in the title a common mistake a lot of websites make.

Fonts and Colors:
Pick a font and stick to it.  Do not use different fonts through out your entire website.  The only time it is OK to use different fonts is for headings and sub headings, but make sure that your headings and sub headings all use the same fonts as well you need to have a uniform and professional look through out your site.

SEO:
Make sure you take the time to optimize your website.  A web design is worthless if it does not generate results for your business.  Search engine optimization is a must in today’s market.  You will need to do SEO as an on going project set time away each week just to focus on SEO aspects of your website.  Link building, blogging, forum posting, and more it all helps make sure you are doing it.

There are many more elements to a successful web design this is just a small outline of some.  If you implement these you are on your way to having  a successful online presence.

Hi Everyone!

Its been aaaaaggggggeeeeeessssss since i posted anything up here, i’ve been up to my eyes with work and other things!

I noticed that alot of you are asking questions that could be answered and shared to the Entire Twitter Community! So i setup a Twitter Feed – feel free to ask me your programming questions http://twitter.com/nodstrum

iPhone Telescope or Cleverly Disguised Dalek

Found on Engadget

You can buy one here http://mobile.brando.com.hk/prod_detail.php?prod_id=03534