Need to have an iPad friendly (html) header file load when detected instead of regular flash header

Question

I have a client that wants to make her website iPad/iPhone friendly. The website has a menu header that is made in flash. I converted the file using Google's Swiffy to a flash_1.html file.

When the website detects an iPad/iPhone I want it to load the Swiffy flash_1.html file. Otherwise, it should load the site as normal.

I am having trouble doing this, mostly writing the correct if/else statement and having it work. I realize that I have to change the BODY tag for the onload for the regular site to something else since it's going into the function. That is also sort of the problem i'm running into.

Anyways, any input or help would be GREATLY appreciated! XD

This is what I have so far:

<script type="text/javascript"> 
if ((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1) || (navigator.userAgent.indexOf('iPad') != -1)) {
    document.location = "mobile/";

$(function{
$("#includedContent").load("flash_1.html");
});
else

The regular site's code looks like this:

***NOTE: I could not get the code appear correctly in this text window, so I made it an image. (The information cut off on top are the functions for the script to preloadImages, and swap images)

website code

Answer 1

Sniffing a browser usually isn't the way to go, why not see if they can run flash?

if(swfobject.hasFlashPlayerVersion("1"))
{
//flash is supported
}
else
{
//flash is not supported
}

Answer 2

According to your image, it looks like your body tag is inside your head tag, instead of being its sibling.

You also appear to have some erroneous script endtags.

The if statement also doesn't have an end } and the else isn't surrounded by }{ either.