JavaScript Listings for Mobile Website

JavaScript Listings

Copyright Assertion

I ask you to include the comments in the final JavaScript as follows:

// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below.
// Scripts written by Ken Curwen, Webmaster
// http://www.seniornet.com.au/Webmaster/javascript.html

Variable Fields

Items (mainly link destinations) which vary from site to site are in italic and red

Quick Jump to Complete JavaScript

I have shown a progressive development as I did it to the final script. If you don't want to know that part click this link to jump to the final version.

Mobile Detection Function

//mobile test function - screen width, browser mobile, phone type
//comment out first line which is for test purposes
function IsMobile(){
// return true
if(screen.width < 800)return true;
if (navigator.userAgent.match(/Mobi/))return true;
if(navigator.userAgent.match(/iPhone/i))return true;
return false;
}

Mobile Home Page Callback

<a href="../index.htm?GoFull=1">View Full Website</a>

Full Home Page Loader - Initial

// Is the call from the mobile subsite?
if (document.location.search.indexOf("GoFull") == 1)
{}

// Otherwise check for mobile and switch sites
else if (IsMobile() )
{window.location = "mobile/MobileHome.html";}

Full Home Page Loader - Include Cookie

//Check for mobile - if called from mobile subsite set cookie
if (document.location.search.indexOf("GoFull") == 1)
{
document.cookie = "NotMobile=1"
}
else if (IsMobile() && (document.cookie.indexOf("NotMobile") == -1))
{window.location = "mobile/MobileHome.html";}

Set Cookie Function to Create Permanent Cookie

This function creates a permanent cookie string "NotMobile=1". It uses a couple of Date functions - see w3schools for reference.

//Puts up cookie with specified timeout in ms (0 is immediate)
function GoMobile(timeout)
{
var d=new Date();
d.setTime(d.getTime() + timeout);
var expires="; expires="+d.toUTCString()
document.cookie = "NotMobile=1" + expires;
}

Full Home Page Loader - Include Cookie with Timeout

//Check for mobile - if called from mobile subsite set timeout (10 mins)
if (document.location.search.indexOf("GoFull") == 1)
{
GoMobile(600000)
}
else if (IsMobile() && (document.cookie.indexOf("NotMobile") == -1))
{window.location = "mobile/MobileHome.html";}

Mobile Website Link to Clear Cookie

the onclick action calls GoMobile with zero delay so cookie is instantly deleted.

<a href="mobile/MobileHome.html" onclick="GoMobile(0)">View Mobile<br />Website</a>

Final Full Home Page Loader and Functions

This loader includes the page reload to clear the query, and also has my copyright assertion

Script for Data Page

<p>
<script language="javascript" type="text/javascript">
document.write("Pixel width ")
var swidth=screen.width
document.write(swidth)
var dprat=window.devicePixelRatio
document.write(": pixel ratio= ")
document.write(dprat)
document.write(": true screen width ")
document.write(swidth*dprat)
document.write("<br>")
document.write("Pixels per inch ")
var sppi=getPPI();
document.write(sppi)
var inwidth=swidth/sppi
document.write(": width ins= ")
document.write(inwidth.toPrecision(4))
if(navigator.userAgent.match(/Mobi/)){document.write(": mobile phone")}
else{document.write(": computer/tablet ")}
document.write("<br>")
document.write("User agent string: ")
document.write(navigator.userAgent)

//var ppi=System.get_property("ppi_x")
function getPPI(){
// create an empty element
var div = document.createElement("div");
// give it an absolute size of one inch
div.style.width="1in";
// append it to the body
var body = document.getElementsByTagName("body")[0];
body.appendChild(div);
// read the computed width
var ppi = document.defaultView.getComputedStyle(div, null).getPropertyValue('width');
// remove it again
body.removeChild(div);
// and return the value
return parseFloat(ppi);
// return ppi;
}

</script>
</p>

Script for Cookies Page

First the Form element which contains the buttons; each has a call to a cookie function basically as GoMobile()

Then the cookie scripts

<p>
<script language="javascript" type="text/javascript">
document.write("Cookie string: ")
document.write(document.cookie)

function persistant(){
var d=new Date();
d.setTime(d.getTime() + 30000);
var expires="; expires="+d.toUTCString()
document.cookie = "persistant=0" + expires;}

function session()
{document.cookie = "session=0";}

function endsession(){
var d=new Date()
d.setTime(d.getTime())
var expires="; expires="+d.toUTCString()
document.cookie = "session=0" + expires;}
function refresh()
{location.reload()}
</script>
</p>

Next Page - Tips

Seniors helping seniors use computers and the internet

Mobile Design Subsite