Logo

Seniors helping seniors use computers and the internet

 

Mobile Design Subsite

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 language="javascript" type="text/javascript">
<!-- Hide script from old browsers
// 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
//Check for mobile - if called from mobile subsite set timeout (10 mins)
if (document.location.search.indexOf("GoFull") == 1)
{
window.location="index.htm" //force page reload to remove query
GoMobile(600000)
}
else if (IsMobile() && (document.cookie.indexOf("NotMobile") == -1))
{window.location = "mobile/MobileHome.html";}
//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;
}
//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;
}
// End hiding script from old browsers -->
</script>

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()

<form>
<input type="submit" style="font-size:x-large" onclick="session();return false;" name="theme" value="Session" id="Session"/>
<input type="submit" style="font-size:x-large" onclick="persistant();return false;" name="theme" value="Persistant" id="Persistant"/>
<input type="submit" style="font-size:x-large" onclick="endsession();return false;" name="theme" value="End Session" id="endSession"/>
<input type="submit" style="font-size:x-large" onclick="refresh();return false;" name="theme" value="Refresh page" id="refresh"/>
</form>

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

Website supported by Ipswich Web Hosting  (Ingenuity Hosting Pty Ltd)
Copyright © Ken Curwen 2012, 2013, 2014, 2015, 2016, 2017