Hi there,
I am some real trouble getting
the transitions working for my iPhone site, I am trying to add
the 'flip' transition using,
<a class="button flip href="#about">About</a>
However I get no flip transition nor do is navigate to
the about anchor, here is my HTML,
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Elfm Iphone</title>
<script src="javascript/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/jqtouch.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="themes/apple/theme.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="javascript/text">
$.jQTouch({
icon:'kilo.png',
statusBar:'black'
});
</script>
</head>
<body>
<div id="about">
<div class="toolbar">
<h1>About</h1>
<p>Some about blurb, telling
the users about
the station and
the site, in most cases this won't be a very extensive page, just some background information, nothing that will overface
the user and not want them to carry on listening. I would probably be a good idea to push
the user to
the stream as well. This could be done as an internal link, something like, why not listen to our <a href="http://www.twovalleysradio.co.uk/iphone/stream.pls">live feed?</a></p>
</div>
</div>
<div id="blog">
<div class="toolbar">
<h1>Blog</h1>
</div>
<p>The blog should be an easy things to implement we should just be able to use
the stations RSS
feed from wordpress and then style up
the entries with CSS to match
the look and feel of
the sites. We could possibly implement
the nice listing features that come with
the theme available and if not we could easily build our own theme.</p>
</div>
<div id="home" class="current">
<div class="toolbar">
<h1>Home</h1>
<a class="button flip" href="#blog">Blog</a>
</div>
<div id="header">
<img src="images/elfm-header.png" alt="ELfm" title="ELfm" />
</div>
<div id="content">
<p>Here's a load of text about is and where it's based and why it's coll and who listen to it and a load more blurb and now I'm just adding filler for
the sake of it and I know dynamic text is a pain because then we have to consider what happens if there is too much of it but we'll show a live preview on
the web service of what
the app would look like.</p>
</div>
<div id="play">
<div id="button">
<a class="play_stream" href="">
Play
</a>
</div>
</div>
</div>
<div id="twitter">
<div id="tweet">
</div>
</div>
</body>
</html>
I am testing this is Chrome and Safari and also
the iPhone simulator.
