Underground Creative

Facebook Typeahead Ajax in IE

2008-07-10T16:26:00.006+01:00

Facebook provide developers with code for a great Ajax typeahead widget.

If you're using Firefox it's brilliant - just copy and paste all the various bits of code from the FBJS/Examples/Typeahead/AJAX page, make minor mods and you're away.

The only snag is - and it's a big one - is the line that reads "layout issues in IE7".

Great - so how to get round this without pulling all your carefully sculpted hair out?

The problem is that the drop down doesn't appear below the input box in IE. It appears over it - so when you're typing away, you end up typing over the newly loaded data.

I worked out that the following line in the suggest_list css was the problem:

margin-top: -1px;

To work in IE it has to be changed to:

margin-top: 23px;

After a great deal of searching the developer forums, and a fair bit of googling, it seemed noone has found a solution.

So I set about cracking it myself.

So here, dear readers, is the solution.

It lies in the use of Facebook's

<fb:user-agent>

tags. These allow you to determine which browser is viewing the page and load content accordingly.

So I added this code at the end of my CSS file:

<fb:user-agent includes="ie 6,ie 7">

<style type="text/css">

</style>
</fb:user-agent>

Noting I also added IE6 in the mix for good measure.

Now only IE6 and IE7 will read this extra CSS, leaving Firefox etc to use the original code.

Hope this helps you guys - any problems, other suggestions drop me a line.

Using Social Collaboration to boost business

2008-05-09T10:51:00.004+01:00

Social Networks have been a hot topic for a couple of years now, but a few new websites are now taking the online social networking phenomenon one stage further with the concept of social collaboration.

Social collaboration takes the power of social networking and adds an end product – for instance, getting groups of like-minded people to unite behind a common cause.

Many of the social collaboration sites aim to change the world for the better, with petitions, campaigns and charitable causes a common theme.

But they can also be used by businesses to boost sales and increase brand awareness, as two of our client projects proved yesterday.

Wooshare.com is a social collaboration site aiming to bring groups of people together, whether they want to save the planet or to make money.

FeelCreative.com are a leading canvas art print supplier, selling prints online and through their Manchester-based gallery.

They can normally only offer significant price reductions to customers who order a bulk purchase of prints, because bulk buying allows them to negotiate better deals with their suppliers of canvas, frames etc.

However, using Wooshare, they set up a deal where if 20 people pledged to buy a print each, those 20 individual customers would be able to achieve the same benefits as a customer buying in bulk.

Within 24 hours of setting up the 'Wooshare', FeelCreative had got the necessary 20 customers signed up.

That meant that FeelCreative had 20 new orders in one day, and the customers got their prints at a massively reduced rate!

Examples like this show how powerful social collaboration and the internet can be for businesses.

If you’d like a free consultation on how Social Collaboration could be used to boost your business, please contact us and we’ll be happy to help.

Dynamically cropping and resizing images with Flash and GD

2008-05-01T11:04:00.002+01:00

We're currently working on a project that uses a combination of Flash and GD/PHP to allow users to upload a photo and crop it dynamically using a Flash interface.

Once the user is happy with the cropped image, they simply click 'save' and GD creates the cropped image and saves it on the server.

The main problem we've come across is that GD requires sufficient memory limits in php.ini for image resizing. If somebody uploads an image that is too big, GD can't process it because it runs out of memory.

In years gone by, the best solution probably would have been to set a size limit for uploaded photos of 500kb.

However with digital cameras and phone cameras becoming increasingly powerful, more and more of our users are uploading much larger files, and a limit of 500kb just isn't really enough.

So luckily we can use an .htaccess file to increase the memory allocation and allow GD to process larger images.

We've added the following line of code to an .htaccess file in the folder with the PHP/GD script:

php_value memory_limit 128M

That solved the problem and means that our visitors can now create thumbnails from images of up to 2Mb in size.

jQuery or Prototype?

2008-04-30T09:45:00.006+01:00

I've been struggling to decide which Javascript library to use for a project I'm working on at the moment.

I've used both Prototype and jQuery on previous projects and both of them together on Wooshare.com.

Prototype was the first one I came across so I was drawn to that initially, especially when I saw what Scriptaculous can do.

I'm also aware of MooTools but I don't want to confuse myself further so have chosen to leave that for now!

One of the projects we're working on at the moment requires dynamic HTML tables, with sortable columns.

The other evening I was browsing through the jQuery plugin library (which I have to say is extensive) and came across TableSorter.

After a quick play, it seems its easy enough to set up and does what I need for now, so jQuery and TableSorter it is.

But last night I confused myself again.

I thought I'd do a quick search for something similar with Prototype and came across TableKit.

Not only does this sort columns in the same way, it also allows column resizing and table entry editing.

Very impressive!

I also found a link to a few more Prototype add ons here.

All useful stuff.. and enough to get me thinking - do I really have to choose between these libraries? I've used them together before and so I guess I'll just use whichever is most useful for the job in hand.

Until I allow myself to discover some useful stuff with MooTools that is...

Creating Facebook Adverts

2008-04-29T17:07:00.004+01:00

Most people are probably aware of how popular Facebook is these days, but very few companies seem to be taking advantage of the advertising potential of the site.

Facebook allow you to set up extremely targeted ads which will be viewed by people who fit whatever demographic you like. For example, you could target single females aged 21-30 in London, or males in Manchester who like Manchester United.

Over the last week or so we have been carrying out a number of tests on the Facebook ad system in order to discover which ads work best and whether it's better to go for a CPM (cost per thousand impressions) or CPC (cost per click) campaign.

If anyone would be interested to know more about what we've found out, and how we could use tailor-made Facebook ads to help to promote your business, please contact us.

Simple online ticketing solution

2008-04-29T11:24:00.006+01:00

One of our clients asked us to help them come up with the simplest possible solution to allow them to sell tickets online for an event that they're running - the Planet X Reunion in Liverpool.

They needed a basic one-page site with a link to allow visitors to purchase tickets for the event, paying online using credit or debit cards.

We set up a simple Paypal payment system for them - it was quick and easy, and visitors don't even need a Paypal account to buy tickets.

The page is at www.planetxliverpool.co.uk - if you would like a similar solution for your site, contact us and we'll be happy to help.

Our new blog site

2008-04-29T10:12:00.002+01:00

Today sees the launch of our new blog site. Since Underground Creative was set up a number of years ago, our site has been a Flash-based 'brochure' site displaying links to our clients and our portfolio.

However we felt that this type of site was getting outdated and that our broad range of design and programming work would be presented better in the form of a blog, where we can discuss our current projects and highlight links to other content that is interesting or useful.

Initially the blog will be fairly basic but we'll be adding new design features and interactivity over the coming weeks and months so please check back and keep an eye on what we're up to.

If you've got any questions about what we do or the skills we can offer, please don't hesitate to contact us.