The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
How to make an iPhone compatible website with accelerometer support.
I was sitting here thinking what could Freeola benefit from and I thought an iPhone compatible version of their website of forums, so thought I would show you all how.
Summary
I will show you how to add a script to your website so that when it is viewed using the iPhone’s Safari browser it will load a specific page that has been styled and created to be viewed specifically on the iPhone. It will also allow you to change the page by rotating the phone and I will also show you how to incorporate your own icon so that when you bookmark the page to your iPhones ‘desktop’ it will show an iPhone type icon that you have designed.
The code to detect the iPhone
Within your tags of your normal index page for your website you need to add the following code.
This code tells your website to load a different page. So change the yourwebsite url in the code to that of where your specific iphone styled site is.
The coding for the iPhone website
Like a normal webpage your iPhone webpage needs the normal HTML within the tag, along with this will we will tell the website which Icon to use if the website is saved as a desktop icon, it tells the browser to show the website in the same dimensions as an iphone screen and to tell the page to allow orientation change.
Laying out the page’s content
Before we javascript and CSS sorted we need to get the content in place so that you can’t see everything before the site has finished loading.
Within your tags you will need to add the following code:
The CSS
The following CSS controls which containers are presently being shown and which are hidden which will be controlled by the javascript.
Orientation Controls to make sure that everything is hidden by default so you do not got flashes upon loading:
Then the width of the containers is specified. If your site is to fit the screen precisely you might want to include some heights as well:
The following code simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript.
The JS code for Orientation Detection
The first lot of code initializes the orientation change.
[CODE}
window.onload = function initialLoad(){
updateOrientation();
}
[/CODE}
The next lot of code is what makes the page change depending on what way you are holding the phone
Then don’t forget to reference your iphone.css and orientation.js in your pages tag as shown below.
I was sitting here thinking what could Freeola benefit from and I thought an iPhone compatible version of their website of forums, so thought I would show you all how.
Summary
I will show you how to add a script to your website so that when it is viewed using the iPhone’s Safari browser it will load a specific page that has been styled and created to be viewed specifically on the iPhone. It will also allow you to change the page by rotating the phone and I will also show you how to incorporate your own icon so that when you bookmark the page to your iPhones ‘desktop’ it will show an iPhone type icon that you have designed.
The code to detect the iPhone
Within your tags of your normal index page for your website you need to add the following code.
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.yourwebsite.co.uk/iphone/";
}
This code tells your website to load a different page. So change the yourwebsite url in the code to that of where your specific iphone styled site is.
The coding for the iPhone website
Like a normal webpage your iPhone webpage needs the normal HTML within the tag, along with this will we will tell the website which Icon to use if the website is saved as a desktop icon, it tells the browser to show the website in the same dimensions as an iphone screen and to tell the page to allow orientation change.
<head>
<title>YOUR PAGE TITLE</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="apple-touch-icon" href="images/ /YOURICON.png"/>
</head>
<body onorientationchange="updateOrientation();">
YOUR CONTENT
</body>
Laying out the page’s content
Before we javascript and CSS sorted we need to get the content in place so that you can’t see everything before the site has finished loading.
Within your tags you will need to add the following code:
<div id="page_wrapper">
<h1>YOUR TITLE OR LOGO</h1>
<div id="content_left">
<p>You are now holding your phone to the left</p>
</div>
<div id="content_right">
<p>You are now holding your phone to the right</p>
</div>
<div id="content_normal">
<p>You are now holding your phone upright</p>
</div>
<div id="content_flipped">
<p>This doesn't work yet.</p>
</div>
</div>
The CSS
The following CSS controls which containers are presently being shown and which are hidden which will be controlled by the javascript.
Orientation Controls to make sure that everything is hidden by default so you do not got flashes upon loading:
/*-----------------------------
ORIENTATION
-----------------------------*/
#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}
Then the width of the containers is specified. If your site is to fit the screen precisely you might want to include some heights as well:
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
The following code simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript.
.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
display:block;
}
The JS code for Orientation Detection
The first lot of code initializes the orientation change.
[CODE}
window.onload = function initialLoad(){
updateOrientation();
}
[/CODE}
The next lot of code is what makes the page change depending on what way you are holding the phone
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break;
case 90:
contentType += "left";
break;
case 180:
contentType += "flipped";
break;
}
document.getElementById( "page_wrapper").setAttribute("class", contentType);
}
Then don’t forget to reference your iphone.css and orientation.js in your pages tag as shown below.
<style type="text/css">@import url("iphone.css"); </style>
<script type="text/javascript" src="orientation.js"></script>
I used that guide to create my Mr Happy Chainsaw iphone page about 4 months ago, so that may be why there are similarities.
But I think you'll find that the actual guide here was all written by myself and the code was taken from the code for my iphone site. If there is only certain code that can be used to resolve a problem then surely all documentation/code would be similar anyway.
But if that is a problem then I will delete my entry because I spent over an hour writing up a guide to help people on here for the fun of it didn't I. It's no wonder that there isn't as many submissions to the site as Freeola want when you get this kind of response to posting a good helpful guide and spend your own tiem doing so.
But I think you'll find that the actual guide here was all written by myself and the code was taken from the code for my iphone site. If there is only certain code that can be used to resolve a problem then surely all documentation/code would be similar anyway.
But if that is a problem then I will delete my entry because I spent over an hour writing up a guide to help people on here for the fun of it didn't I. It's no wonder that there isn't as many submissions to the site as Freeola want when you get this kind of response to posting a good helpful guide and spend your own tiem doing so.
How to make an iPhone compatible website with accelerometer support.
I was sitting here thinking what could Freeola benefit from and I thought an iPhone compatible version of their website of forums, so thought I would show you all how.
Summary
I will show you how to add a script to your website so that when it is viewed using the iPhone’s Safari browser it will load a specific page that has been styled and created to be viewed specifically on the iPhone. It will also allow you to change the page by rotating the phone and I will also show you how to incorporate your own icon so that when you bookmark the page to your iPhones ‘desktop’ it will show an iPhone type icon that you have designed.
The code to detect the iPhone
Within your tags of your normal index page for your website you need to add the following code.
This code tells your website to load a different page. So change the yourwebsite url in the code to that of where your specific iphone styled site is.
The coding for the iPhone website
Like a normal webpage your iPhone webpage needs the normal HTML within the tag, along with this will we will tell the website which Icon to use if the website is saved as a desktop icon, it tells the browser to show the website in the same dimensions as an iphone screen and to tell the page to allow orientation change.
Laying out the page’s content
Before we javascript and CSS sorted we need to get the content in place so that you can’t see everything before the site has finished loading.
Within your tags you will need to add the following code:
The CSS
The following CSS controls which containers are presently being shown and which are hidden which will be controlled by the javascript.
Orientation Controls to make sure that everything is hidden by default so you do not got flashes upon loading:
Then the width of the containers is specified. If your site is to fit the screen precisely you might want to include some heights as well:
The following code simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript.
The JS code for Orientation Detection
The first lot of code initializes the orientation change.
[CODE}
window.onload = function initialLoad(){
updateOrientation();
}
[/CODE}
The next lot of code is what makes the page change depending on what way you are holding the phone
Then don’t forget to reference your iphone.css and orientation.js in your pages tag as shown below.
I was sitting here thinking what could Freeola benefit from and I thought an iPhone compatible version of their website of forums, so thought I would show you all how.
Summary
I will show you how to add a script to your website so that when it is viewed using the iPhone’s Safari browser it will load a specific page that has been styled and created to be viewed specifically on the iPhone. It will also allow you to change the page by rotating the phone and I will also show you how to incorporate your own icon so that when you bookmark the page to your iPhones ‘desktop’ it will show an iPhone type icon that you have designed.
The code to detect the iPhone
Within your tags of your normal index page for your website you need to add the following code.
if ((navigator.userAgent.indexOf('iPhone') != -1) ||
(navigator.userAgent.indexOf('iPod') != -1)) {
document.location = "http://www.yourwebsite.co.uk/iphone/";
}
This code tells your website to load a different page. So change the yourwebsite url in the code to that of where your specific iphone styled site is.
The coding for the iPhone website
Like a normal webpage your iPhone webpage needs the normal HTML within the tag, along with this will we will tell the website which Icon to use if the website is saved as a desktop icon, it tells the browser to show the website in the same dimensions as an iphone screen and to tell the page to allow orientation change.
<head>
<title>YOUR PAGE TITLE</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<link rel="apple-touch-icon" href="images/ /YOURICON.png"/>
</head>
<body onorientationchange="updateOrientation();">
YOUR CONTENT
</body>
Laying out the page’s content
Before we javascript and CSS sorted we need to get the content in place so that you can’t see everything before the site has finished loading.
Within your tags you will need to add the following code:
<div id="page_wrapper">
<h1>YOUR TITLE OR LOGO</h1>
<div id="content_left">
<p>You are now holding your phone to the left</p>
</div>
<div id="content_right">
<p>You are now holding your phone to the right</p>
</div>
<div id="content_normal">
<p>You are now holding your phone upright</p>
</div>
<div id="content_flipped">
<p>This doesn't work yet.</p>
</div>
</div>
The CSS
The following CSS controls which containers are presently being shown and which are hidden which will be controlled by the javascript.
Orientation Controls to make sure that everything is hidden by default so you do not got flashes upon loading:
/*-----------------------------
ORIENTATION
-----------------------------*/
#content_left,
#content_right,
#content_normal,
#content_flipped{
display:none;
}
Then the width of the containers is specified. If your site is to fit the screen precisely you might want to include some heights as well:
.show_normal,
.show_flipped{
width:320px;
}
.show_left,
.show_right{
width:480px;
}
The following code simply shows the containers if the #page_wrapper has the correct class. These classes are going to be set by the javascript.
.show_left #content_left,
.show_right #content_right,
.show_normal #content_normal,
.show_flipped #content_flipped{
display:block;
}
The JS code for Orientation Detection
The first lot of code initializes the orientation change.
[CODE}
window.onload = function initialLoad(){
updateOrientation();
}
[/CODE}
The next lot of code is what makes the page change depending on what way you are holding the phone
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break;
case 90:
contentType += "left";
break;
case 180:
contentType += "flipped";
break;
}
document.getElementById( "page_wrapper").setAttribute("class", contentType);
}
Then don’t forget to reference your iphone.css and orientation.js in your pages tag as shown below.
<style type="text/css">@import url("iphone.css"); </style>
<script type="text/javascript" src="orientation.js"></script>