Fullscreen background slider – jQuery plugin

There are literally thousands of sliders currently developed for you to pick from, but there are two things these sliders do very very badly. The first is that they rarely are use-able for a fullscreen website or gallery. Secondly they always, always handle the loading of those large background images badly. All examples I could find of fullscreen jQuery sliders or galleries loaded the imagery at the beginning when the slider loads. This is a terrible outcome for the user, they have to sit there staring at a blank screen while the app loads. Mobile was even worse. Also when the user clicks through the image slides they get black screens. It’s terrible UI experience and that is where this slider comes in.

Fullscreen background slider is a slider yes, but it is also far more than that, it is a way of using large beautiful background imagery, while maintaining a fluid and simple user experience, which should always be paramount!

Best way to see it in a action is to check out this demo.

Demo

Demo :: Fullscreen slider

Keep Reading...

Blog Post default image

I have a love hate relationship with Plupload, if you are unsure what Plupload is, it’s a jQuery script that gives your users the ability to upload files. Very useful, but oh so difficult to implement, hence why we use Plup.

The issue is, Plup if it were a political leader is a Facist, it has a certain way it wants you to do things, and you will not differ from the assignment. The plugin is rigidly attracted to it’s own stupid plupload interface. Now if you are an interface developer like me and you work on different applications you will know the interface for a plugin gets thrown out on day one, it’s the actual API and functions you are interested in. You want your site to look uniform and there are client expectations to meet. Sadly Facism does not fit this model which is why Plup sucks so badly as soon as you want to roll a custom uploader, I mean it doesn’t even have a reset method, NO SERIOUSLY, you can’t reset the plugin via the API.

Keep reading and I will show you guys a bunch of ways to beat Plup into submission for your custom uploaders.

Keep Reading...

jQuery Ajax Loader & Spinner

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

View Demo :: jQuery

Keep Reading...

Textarea Tabbing – code based tabs

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.

Keep Reading...

Title to URL – WordPress style

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.

Keep Reading...

Ajax Pagination & Back Button

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

View Demo :: MooTools
View Demo :: jQuery

Keep Reading...