Jquery

Even though i’ve been using jQuery to make web apps for quite a while, this simple function passed me by until quite recently.

When loading data asynchronously, the end user doesn’t get any feedback that anything is actually happening (unless you display a loading gif or something similar). This can often lead to the user clicking repeatedly and risking things fucking up. I usually would include an animated loading gif next to the call to action, initially hidden by CSS, and then using jQuery would display it when the call to action was clicked. After the response was received I would set the gif back to hidden. This worked perfectly fine, but would result in numerous gifs over the page (while still small, still take time to load).

jQuery actually has a built in function for detecting when an Ajax call is started and when it ends. With this in mind it’s really easy to invoke some action when this happens. In around six lines of jQuery, a few lines of HTML and CSS we can make a pretty nifty slide down loading message (a bit similar to Google).

I suppose it would help if you knew what the hell I was on about, so here is a little video of the script in action (the web app is ReviewSpace – a really clever file sharing and collaboration tool that i’m working on) (it’s a bit quick but you should be able to make out the yellow loading box slide down from the top of the screen)

ReviewSpace ajax loader demo from Gas Street Works on Vimeo.

So now you know what is happening, you probably want to know how to do it.

The ajaxStart() function is called when jQuery detects an ajax call. By binding this to the whole document, it gets triggered after any ajax call in the page. When this is called we slideDown a div containing our loading text.

When the ajaxEnd() function is triggered, we slideUp the same div, in effect showing and then hiding our loading text. Simples!

jQuery

$(document).ajaxStart(function() {

$('#loading_display_holder').slideDown("fast");

});

$(document).ajaxStop(function() {

$('#loading_display_holder').slideUp("fast");

});

HTML

<div id="loading_display_holder">

<div id="loading_display">

loading...

</div>

</div>

CSS

#loading_display_holder{

position: fixed;

display: none;

Over the last few month’s I have been using jQuery more and more in my web projects to do everything from style forms to adding interactivty to lists via drag and drop. In this post I will share with you my simple jQuery alert plugin – altertr.

About

Alertr is a simple jQuery alert plugin.

Use it to give feedback to your users when they have updated a page for example.

Features

There are three types of alert:

• Success
• Error
• Information

The alert can fade away after a specified amount of time

The alert can be clicked to fade away

Find out more, view a demo and download from here.

This did work fine when I had it running locally, I may post a video of it in action instead of the demo. In the meantime I am thinking of another tool. The other day I worked out how much my iTunes collection was worth based on 79p/track. The figure was over £18k!! Maybe a little tool to work out your last.fm value based on your plays would be fun, if I was feeling cheeky this could be linked to how popular each artist was. It may even be nice to plot these against your friends in a share index style way. Pretty much anything is possible with the api so when I have a few spare minutes I will give it a try.

So I finally gave in and brought an Apple TV last month and managed to get a little discount thanks to the Thanksgiving Sale. It was a long and arduous decision; I read many blogs and really did my research as i’d heard mixed reviews about the device. I must admit that the ability to install Boxee onto it did swing my decision slightly. 

The ATV out of the box is a bit pants (a bit like the iPhone) but with a few simple hacks the thing can be really good – again like the iPhone. For this reason I decided to apply the aTV hack. I even forked up the 30 quid for it. The process was simple and easy and I now have a device that will play almost any media file. I can also use my favourite FTP client Transmit to get files onto the hard drive. This is great as I don’t have to rely on iTunes to get video’s and movies onto it.

The best bit is that I have hooked it up so that I don’t even need my TV on to enjoy music. To do this I ditched the HDMI option and went for component leads. As I don’t have any HD video content  the difference isn’t noticeable, plus I still get 1080i resolution over component.

The advantage of using component is that I have the video going to my TV, but the audio is sent to a set of old PC speakers. This means that I use the Remote App on my iPhone to control the ATV when the TV is turned off. Apart from being a brilliant gadget I can control the music from anywhere, and save power (and the TV screen) by not having the TV on just to get the music to come through the TV speakers.

For me this is great as I can even play on the Wii and have music all at the same time.

The next step is to get a full 5.1 surround sound system and use the digital connection for the sound output, but for now a cheap pair of 2.1 PC speakers is more than good enough.

Just a quick post to show you a web service that allows you to create and download ringtones for your iPhone. Simply head to http://audiko.net and follow the instructions.

Here is one I made earlier:

http://audiko.net/ringtone/Roots+Manuva/886290/Buff+Nuff+%28Prod.+By+Toddla+T%29/en.html?fresh

You are creating a Flash project that feeds text in from an external XML file. The text is currently in English but there is a requirement that the text be changed to other languages.

The Problem

You have added foreign characters such as é, ü or ß and they don’t show up in Flash.

The Solution

Follow these steps below and all should be well:

Ensure that your XML document is formatted as UTF-8. If you are using Coda, it’s simple enough.

and that is also has the correct XML declaration in the header: 

<?xml version=”1.0″ encoding=”UTF-8″ ?>

Ensure that you have a dynamic text box in Flash and that you have given it an instance name.

Ensure that the font you are using supports foreign characters.

Make sure that you embed the font and select the relevant glyphs. Use shift to select more than one set. It is also a good idea to manually add the specific characters that you need to embed. For example to add é on a Mac, hold down the Alt key and then the letter e. The accent will turn yellow and then press the e letter again. 

As soon as I can I will investigate these errors.

Sorry for any inconvenience caused.

Leon

The latest issue of Web Designer Mag recently landed on my door mat and I was pleasantly surprised to see some of my work included in the mag and on their promotional disc.

I was contacted by the editor a month or two ago about flCodr – the online repository for actionscript snippets. The site allows you to add and view snippets of actionscript code, perfect for when you can’t remember how to parse XML.

Web Designer Mag say that:

flCodr.com is a repository of code that has been placed in a single centralised location for quick and easy access. The site works by providing a simple search facility to find snippets of code. For instant access, introduce the flCodr search plug-in to your browser. Add a search term, click a link and you are ready to copy and paste the code.

I couldn’t have put it better myself. I’m really chuffed that I managed to make it to both the mag and the disc!

Head on over to their site to view the mag and subscribe. It’s well worth the money as each month it’s full of tips, tutorials and assets to make your creations even better!

Looking for a Flash extension that will allow you to find a latitude and longitude based on a location?

Then you need my locator panel, which is now also available on the Adobe Exchange.

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1526018