Contextual Page Design
This page describes an old technique that developed for the Village Hall website. I was trying to meld the hard-coded website that I developed from scratch with a Wordpress site. I have subsequently given-up on the Wordpress website.
I also used it on my old webpage layout where I was using the context of the page to change the menu options. For techinical pages I had links to technical topics, these made no sense to my history and local pages.
Depending on the content of a web page the header, footer and some links can be different. Pages that relate to website design, such as this one, will have headers and footers related to that fact. Pages where I am "railing on" can have pontification text and links.
Local pages have Belchamp Walter as a header.
The reason that pages didn't work on iPad was due to Javascript switch case logic
The switch/case structure is in script.js and seperate functions are triggered setting menu option and text.
The function setText()
// Set the text in the header and footer of each page Web Design
function setText() {
document.getElementById("htext").innerHTML = "Tempusfugit Web Design";
document.getElementById("ftext").innerHTML = "Experiments in web design";
// set the About Page link(s) - as there there could be more than 1
document.getElementById("about_link1").innerHTML = "About Web Design on tempusfugit .me.uk";
var a = document.getElementById("about_link1");
a.setAttribute("href", "about_web.html"); // I did this for the Home link on VH pages
var b = document.getElementById("site_map1");
b.setAttribute("href", "site_map.html"); //can have dedicated site maps for each page
}
The DOM code
The contextual nature of pages is determined using DOM Manipulation.
What needs to be changed on template
OnLoad needs to call SetContext(x) - where the argument x designates settings for web, local, drone, pont(ification) plus a default if not specified