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*

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

php.ini and Undefined Variable errors

It all started with a new server. After setting up and installation everything was working fine, until I read the error_log files in the servers logs.

There were loads and loads of error messages reporting that there were “undefined variables” throughout every script on the server. Strange!

It ended up being very easy to fix… Continue reading php.ini and Undefined Variable errors

Free XHTML Template

The other day I realised I had loads of spare web stuff lying around on my hard drive which included canned designs, unused web pages, old university assignments and old website designs (PSD’s and XHTML/CSS).

Well, today I decided I’d start releasing this spare stuff online. If I’m not using it maybe someone else can get something out of it. That was the idea behind the WordPress Olivia template, it was an old design which morphed into a pretty popular free template.

Anyway, we start this new routine of free downloads with a free XHTML template complete with instructions on how to use and modify it.

You can view a demo of the free XHTML theme or even download it for yourself to dissect, prod and poke.
There is also a tutorial on how to edit the pages, adding paragraphs and headers and also how to edit the CSS. It’s a basic tutorial but it explains the beginner methods.

Unfortunately there won’t be much support for it. You’ll have to work it out for yourself. If you are really really stuck you can drop comments for this post below and I’ll try my damn hardest to answer. Honest.

Download (370kb) | View Demo

How to? Basic website design using Adobe Photoshop

Please note: This tutorial is for beginners. It’s a short vague guide to push you in the right direction. I believe “learn by seeing and doing” is the best approach.

Many developers struggle to use the basic tools in Adobe’s award winning software Photoshop when designing websites. It can help a lot to know some simple techniques and tools when building XHTML pages. You don’t have to use the very awful splicing function at all.

Let’s start with the idea of building a very simple design using a set colour palette and a set width. After these simple tips I will also supply a number of useful links to visit to help you further. Continue reading How to? Basic website design using Adobe Photoshop

Olivia WordPress Theme – V0.9.5

This theme is no longer supported. Sorry!

Theme DemoDownload Now 670kb
I am pleased to announce that you can now download the brand new WordPress theme named “Olivia” direct from our website and soon from the official WordPress themes gallery.

It has been in development for a long time but good things come to those who wait!

Key features of the theme:

  1. Seven brilliant styles including a Grunge style and Magic style!
  2. Beautifully designed
  3. WordPress 2.6.3 compatible
  4. Widget ready!
  5. Built on the famous 960 grid system
  6. FamFamFam Silk Icons
  7. jQuery functions including text size modification
  8. Basic stylesheet for accessibility
  9. Thumbnail generation

To coincide with the release of the theme I have written a quick tutorial explaining how to use the features explained… Continue reading Olivia WordPress Theme – V0.9.5

10 Web Design NO NO’s

The web has changed a lot and web designers (of all people) know about the need to keep up to date with the latest design “trends”.

This short 10 point guide will hopefully help some people understand the minor problems website design (and content) brings when being viewed by a potential customer.

  1. Pointless Flash Animation
    I’m all up for interactive flash in websites, but only use it if it’s necessary. Many a web developer will say “try doing the same in javascript, it’s better”, which is usually true, but animations which have no purpose other than to distract the user are pointless, bandwidth consuming and damn irritating.
    Check out Avistar’s Globe Animation. It’s awful to look at, and awfully slow. Continue reading 10 Web Design NO NO’s

Playing with light in photography

Starting off in digital photography can be a very unrewarding and unsatisfactory time.

Many beginners try photographing normal subjects without actually playing with the settings on their camera. We hope to quash any questions you may have with what your settings mean and what you can do with them as a beginner.

For this article we will be using light trails as a starting point as you can produce beautiful looking images while at the same time working out what each setting does. Please also note that each image used in this article will also display the settings used. Every image is taken using a Canon EOS 400D (aka RebelĀ  XTi). Please also note this is an article for digital beginners. Continue reading Playing with light in photography