The title is fairly generic, so if you have found this, congratulations, your life is about to become far simpler. When working on or with ajax enabled web sites we usually run into the issue of request times, users need to be shown that something is happening in the background and visually we accomplish this with an Ajax Loader. You would have seen plenty of these by now, little animated gifs that give you a sense the web-page is loading something.
Now the drama here is they are a PITA to create all the time on the fly while your writing those fancy ajax queries, some of the framework simplify the task by letting you specify a loading attribute, but the behaviour isn’t standard and I find the implementation is lacking because it is usually an after thought of the original Ajax request in the framework. Also you don’t want to create useless mark-up in you page by having a permanent but hidden until needed ajax overlay like I see a lot of sites doing. Less code = better at everything, remember that.
So here is the solution, create on the fly ajax loaders when and where-ever you may need them!
Demo
Funny title I know, but really that is what this code will allow you to achieve. Recently I was working on a project that let users edit some source code in a HTML textarea box and send it back to us, so to provide some simple functionality and formatting whilst editing code in a textarea I needed to find a way to mimic tab based behaviour from a text editor.
Key features
- Single tabbing from any point
- Selection tabbing
- Multiple line tabbing
Demo
View Demo – MooTools
View Demo – jQuery
The demo has a textarea that has tabbing enabled and one below it that does not. That way you can see what pressing tab does normally in a textarea and how it would be a real pain for someone trying to edit code. Basically tabbing in a normal textarea will move your focus elsewhere, if you are trying to tab a selection, it will in some browsers delete the selection.
Have you ever wanted to immediatly create a valid URL from a text input field or some kind of semantic input filed, I know I’ve had to implement it a few times now for different projects. Typically it will be something like, this new created object needs a name or title and that name or title needs to be converted into a URL which the user can see, and then edit to something more meaningful should they choose to. A good example of this already in action is in your wordpress blog, when you type in your post title Worpress automatically creates a URL for you and allows you to then edit and change the URL without also annoyingly changing the original title.
I’ve implemented this a few times now for different applications so here is the base code I tend to start with.
View Demo – MooTools
View Demo – jQuery
Notice how after editing the URL field the title will stop changing the URL value. The logic being that once you have edited the URL to your liking, updating the title will cease to overwrite your new URL.
Ok so hands up if your a fan of Ajax, you can’t see it but I certainly have my hands up as do many of the other developers out there, so what is this post about? Well if you have ever built an Ajax application or website you would know that Ajax breaks the browsers natural navigation, things like the ‘back button’, ‘forward button’, history, favouriting a page or browsing to it via the URL input all become useless because there is no physical URL for those elements to use or save.
Now yes there are some solutions out there for providing Ajaxified links that keep your back buttons working, they are complex and usually written in a specific framework, so if you want to use them well your going to be adding a lot more code then you thought to your web site. Plus this is how Gmail and Facebook do it, you won’t find there code or get any help from them on the topic so I decided to build it myself so everyone could get the benefits of Ajax URL navigation. Below is an example of a simple yet elegant Ajax Pagination system I’ve written to relieve the navigation hicups Ajax causes.
Demo
Easy Ajax Pagination – MooTools
Easy Ajax Pagination – jQuery
