Contextual Page Design

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 swtich/case structure is in script.js and seperate functions are triggered setting menu option and text.

// 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

Links used to test the contextual content

External Sources

Contextual Page Design - January 2021