UltraMega Blog

Create an Upload Progress Bar With PHP and jQuery

When it comes to uploading files, users expect visual feedback, usually in the form of a progress bar. The problem is that PHP doesn’t offer a way to track file uploads in progress by default. Fortunately, there is an extension that enables this functionality and this tutorial will show how it can be combined with jQuery UI to create a progress bar.

Here is a demo of the effect we will be building in this tutorial:


Record HTML Canvas Animations to Video

Sometimes it might be useful to be able to record your canvas animation to a video format. Maybe you want to use your JavaScript skills to create fancy effects for a video. You could use some kind of screen capturing program and crop the video, but I'll show you how to do it with code!

Note: You'll need an HTTP server with PHP running on your local machine to do this. Don't try this with your website over the Internet, unless you don't mind waiting for tons of images to upload... Also, I recommend using Chrome for best results.

Let's start with our simple animation. You can see it in action here.


Add Records to a Queue with jQuery

This tutorial will explain how to make an animated "add to queue" type functionality with jQuery. Since it is hard to explain the results, check out the demo. First, I'll show how to create the actual effect, and then how to implement AJAX submission to a back-end script for database storage or some other processing.


Saving Time With jQuery

jQuery is a popular JavaScript library that greatly simplifies developing advanced JavaScript applications. It is extremely powerful and lightweight at the same time. I've been using it for the first time on a current project, and I really like it.

jQuery supports all major browsers, has a small file size, and is used by major websites such as Google! Here is the description from their website:

"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development."


AJAX Loading Image Generator

I came across this handy online tool that generates animated "loading images" for use with AJAX (or anything else): http://www.ajaxload.info/

You can choose from a selection of styles, set background and foreground colors, click generate, and you have your image. It's a real time saver for AJAX applications, and the best part is that they are free to use for anything!


What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. Many modern websites, big and small, implement this technology in many different ways, but what exactly is it? Here is an explanation in simple terms...

An AJAX application is a web page that functions more like a desktop application than a traditional web page in that it feels more responsive. It works by transferring small pieces of information in the background and updating just the affected area of the page without reloading the whole thing. This not only speeds up web applications and lowers bandwidth consumption, it also increases end-user enjoyability. As AJAX becomes more popular, the gap between the Internet and desktop applications will become increasingly smaller.