Fixing the Hover event on the iPad/iPhone/iPod

Note: This information may now be out of date. It was published in 2010!

In truth it’s not a fix as the iPad doesn’t have the ability to hover.

Apple has developed extra events to replace hover on it’s mobile touch devices. I’ve recently been working a lot on the iPad and came across the problem of hovered navigation not showing up. It’s a css :hover event that fires through a CSS selector on an <a> element with no href attribute.

To emulate the hover we simply add an event listener to the element we want to have a hover event. In jQuery we do this (make sure you insert it into document.ready):

//ipad and iphone fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").click(function(){
        //we just need to attach a click event listener to provoke iPhone/iPod/iPad's hover event
        //strange
    });
}

That should enable the element to be touched, and stimulate and iPad hover event.

If you’re having problems getting hovered elements to fire you could also try using touchstart or touchend which is probably a better method depending on what you’re trying to accomplish:


if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
    $(".menu li a").bind('touchstart', function(){
        console.log("touch started");
    });

    $(".menu li a").bind('touchend', function(){
        console.log("touch ended");
    });

}

Developing for multiple browsers *sigh*

I know it’s unfortunately the “taboo” of modern website design, but many developers don’t want to simply leave their IE7 visitors and IE6 visitors in the dark. It’s fine for sites like this one, or for web applications but what about corporation websites? For sites that HAVE to support older/alternative browsers. This came to light ever more when I recently worked on a website which would mean that customers worth millions could possibly be using IE6. There’s 50% of employees there too who still run IE7 so not supporting them wasn’t an option. I needed (and used) a large set of tools to help me accomplish this task, and I’m going to tell you about them.

Every web developer should (and probably does) use these tools on a daily basis. They streamline your development and help speed up little niggles with your site. Continue reading Developing for multiple browsers *sigh*

University is over! (for a year anyway)

Stamps

So University is done and dusted for 2009. I won’t be returning until September 2010 which makes for a nice break. In the end I got my grades (A,A,B,B,B,C) which I was very happy with. To top all this off I thought I’d showcase some of the work I did to receive these grades.

Visual Design (B Grade)

Plugs
I’ll start with a Module I didn’t thoroughly enjoy this year due to boring briefs, however, I did a little bit of illustration for it which included some postage stamps, posters and even included some Video in After Effects. You can see the video, the illustrations and the posters over at http://turnitoff.info/ (the posters reside in the footer of the page)
The site was built using the latest in Javascript and jQuery technology so check it out, hover over the elements, play with the buttons. Your probably better off using FireFox too, as IE couldn’t really handle it’s superior web modernness. Make sure you check out the video at the bottom of the website too (yes that is me speaking sounding common as muck).

For Visual design I also illustrated the stamps shown in the header image. It’s based on Music Technology over the years and I think I captured the best four from the past century or so. You can see them in all their vector glory too.

WebsiteMultimedia Product (C Grade)

This was a complex one, which also means I can’t demonstrate it online. The idea was simple, Unique Bidding auctions.

The site featured a worlds first in online bidding. Live real time bidding in auctions. You could actually watch LIVE bidders placing their respective amounts on the page as it went along. This meant users could bid against each other based on other users’ bids. Clever eh! It was all jQuery and PHP grabbing the data from a database. It was awfully complex and also included a 10,000 word document explaing the process and research behind it. There was also a very fancy presentation which explains the fundementals if anyone wants to watch it. Its the branding, the functionality and the UI all rolled into a short few slides.

It also had it’s own iPhone web application which tied into the whole site shwoing live bids from anywhere in the world at any time.

Web Programming (A grade)

Another interesting one. And one which I actually really enjoyed.

guestAssignment one involved building a file based Guestbook with full admin features, the ability to edit posts and delete them, a swear word filter to stip out those naughty words and a slick simple UI. It also had AJAX editing of comments right in the page. No loading, no navigating, just click and change! I think you can guess what Lady Part and Ping Pongs were supposed to say! It maybe available as a free download if anyone is interested in the future.

Assignment two was a dog database website. Very similar to Battersea dogs homes website. It needed full admin controls and the ability to save dogs as favourites and have the ability to search the dogs too. The brief was very extensive, and I covered everything. Check it out online right now. I ended up building a commercial site based on this for Cliffe Kennels.

Authoring (B Grade)

It was basically Actionscript 3.0 work. For assignment 1 I had to develop an interface which included an animation, using the drawing API and the components within Flash 8. I ended up building a Spirograph kind of application which allowed you to colour it yourself and watch the application build it for you. Very nice! Have a look at it. I also built a flash gallery using XML and class files. But it’s not something I have online at the moment.

Multimedia Design & Production (A Grade)

This is a group project, and something which is a real challenge working with four different creative minds. My University chum Chris Kovalenko was part of our A grade group which created a chairty website and CDROM called the West Yorkshire Autistic Society (completely fake). Check out the site.

Intro to Video (B Grade)

My mate Adam Fisher helped me out with this one as I couldn’t star, edit and film the whole video. He rode the bike, I edited it, The Chemists supplied the music. It actually works quite well for my first every video. So I’m quite happy with it as a 2nd year project.

That’s it! I hope this gives someone some kind of inspiration either for university or for their next project. If it did help you in any way shape or form, drop me a comment!

TwiPho – Twitter Photo Search

twipho

Well, it seems I have more time on my hands than I need. Wednesday my on-line chum Matt decided he wanted to “build something”. Anything he said. He was open to suggestions. One of those was a Twitter photo search. To cut a long story short I stole by own suggestion and built it myself.

TwiPho was born out of two days coding (Thursday, 7th May and Friday 8th May) which accumulated to about 8 hours coding. Not bad to say I visited Alton Towers on Friday too.

Anyway, TwiPho is a Twitter Photo Search engine. It uses Twitters brilliant API (which I wrote about Wednesday) including TwitPic’s API, img.ly’s API and yfrog’s API. All Twitter image hosts. It searches though Twitter to find images related to a search keyword and shows you the images. 100% JavaScript, 100% AJAX. It uses the powerful jQuery framework too, which is a massive boost for my programming ego.

Anyway please have a look at it over at http://twipho.net/ and even let you friends know about it on Twitter!

It’s even been featured on jQuery Style, so thanks again to them!

UPDATED: Using Twitter and TwitPic, the API’s

twitpic

UPDATED: I have now added in a few lines to cache the file. This saves on bandwidth and can sometimes speed things up when the twitpic service is running slow, it’s a simple extension to an already simple script.

Most people have become addicted to Twitter, and I’m no exception.

I got an iPhone the other week and have been posting regularly, but there is one thing that is very nice, and that’s the API built into Twitter. It’s quite a nice feature, and one that I have been getting to grips with recently.

I decided I wanted to show my Twitter updates on the new website I have been building and because Twitter supports JSON feeds, I thought I’d have a crack at using jQuery to show these posts.

It’s something that’s actually quite easy. Using jQuery’s AJAX function $.getJSON it meant I could grab the feed and format it how I wished. First off make sure you have included the latest version of jQuery into your website.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

This needs to go where scripts usually reside. In your HTML <head> tag. You will also need to wrap all the below code in the jQuery documen.ready() function.

In this example I only wanted to grab one result so I started off with… Continue reading UPDATED: Using Twitter and TwitPic, the API’s