From Page to Sitemap

gendv 0 Newbie Poster

20 Years Ago

A little backround into the mission: My sitemap is a tree menu, i need to navigate from a page to the tree menu, but in the tree menu, the page that the visitor came from needs to be highlighted.

Here is my code for the tree menu : tree_

// Tree structure definition
var TREE_NODES = [
["Module1: Use of Firearms", null, null,
["General Safety and Req of Firearms Control", "#sectionName", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Safety Considerations", null, null],
["Summary", null, null]],
["Fundamentals of Shooting", "other.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Body Position", null, null,
["The Interview Position", null, null],
["The Ready Position", null, null],
["Kneeling Position", null, null],
["The Prone Position", null, null]],
["Firm Controlled Grip", null, null],
["Correct Sight Picture", null, null],
["Trigger Squeeze", null, null],
["Controlled Relaxed Breathing", null, null],
["Correct Technique for Follow-Through", null, null],
["Fault Identification on the Shooting Range", null, null],
["Psychological Preparation", null, null],
["Summary", null, null]],
["Z88 / Pietro Beretta Pistol", "../other_folder/file.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Names of Visible Parts (External)", null, null],
["Making Safe Procedures", null, null],
["Description", null, null],
["Characteristics", null, null],
["Stripping and Assembling", null, null],
["Names of Internal Parts", null, null],
["Mechanism", null, null],
["Different Carry Conditions", null, null],
["Stoppages (Malfunction)", null, null],
["Immediate Reaction Drill", null, null],
["Cleaning & Maintenance", null, null],
["Magazine Filling", null, null],
["Shooting Range Commands", null, null],
["Summary", null, null]],
["Republic Arm Pistol ", "../other_folder2/file.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Visible Parts", null, null],
["Making Safe Procedure", null, null],
["Description", null, null],
["Characteristics", null, null],
["Stripping", null, null],
["Assembling", null, null],
["Names of Internal Parts", null, null],
["Understanding the Mechanism of the RAP 401", null, null],
["Different Carry Conditions", null, null],
["Maintenance", null, null],
["Magazine Filling", null, null],
["Loading and Unloading", null, null],
["Identification of Stoppages/Malfunctions", null, null],
["Immediate Reaction Drills", null, null],
["Shooting Range Commands", null, null],
["Summary", null, null]],
["R5 Assault Rifle ", "../other_folder2/file.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Visible Parts", null, null],
["Making Safe Procedure", null, null],
["Description", null, null],
["Characteristics", null, null],
["Stripping and Assembling", null, null],
["Names of Internal Parts", null, null],
["Mechanism", null, null],
["Different Carry Conditions", null, null],
["Maintenance", null, null],
["Magazine Filling", null, null],
["Loading and Unloading of the R5", null, null],
["Identifying Stoppages", null, null],
["Rectification of Malfunctions/Misfires", null, null],
["Shooting Range Drills", null, null],
["Summary", null, null]],
["Musler 12 Gauge Shotgun ", "../other_folder2/file.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],
["Visible Parts", null, null],
["Making Safe Procedure", null, null],
["Description and Characteristics", null, null],
["Stripping and Assembling the Musler", null, null],
["Maintaining the Musler", null, null],
["Names of Parts", null, null],
["Mechanism", null, null],
["Different Carry Conditions", null, null],
["Magazine Filling", null, null],
["Identification of Stoppages", null, null],
["Rectification of Stoppages", null, null],
["Shooting Range Commands", null, null],
["Summary", null, null]],
["Tactical Shooting Techniques ", "../other_folder2/file.html", null,
["Learning Outcome", null, null],
["Introduction", null, null],

["Draw and Fire in Condition 2", null, null],
["Single-Hand Firing", null, null],
["Magazine Change", null, null],
["Draw/Turn and Fire in Different Directions", null, null],
["Instinctive Shooting", null, null],
["Shoot in a Ready Position", null, null],
["Shoot from Behind Cover", null, null],
["Technique to Shoot During Low Light Situations", null, null],
["Summary", null, null]],
],
["Module2: Legal Principles", null, null,
["Private Defence", "#sectionName", null],
["Use of Force in Arrest", "other.html", null],
["Section 49 - Use of Deadly Force", "../other_folder/file.html", null],
["Police Directives - Use of Firearms", "../other_folder2/file.html", null],
["Requirements of Firearms Control Act 2000", "../other_folder2/file.html", null]
],
["Module3: Obstacle Shooting Course", null, null,
["Introduction", "#sectionName", null],
["Activities and Assessment", "other.html", null]
],
["Module4: Simulated Exercises", null, null,
["Introduction", "#sectionName", null],
["Simulation Excercise", "other.html", null]
]
];

Here is my code for the tree menu : tree_

// Tree format definition
var TREE_FORMAT = [
// 0. left position
10,
// 1. top position
10,
// 2. show buttons ("+" and "-" images)
true,
// 3. button images: collapsed state, expanded state, blank image
["graphics/collapsed_button.gif", "graphics/expanded_button.gif", "graphics/blank.gif"],
// 4. size of buttons: width, height, indent amount for childless nodes
[16, 16, 16],
// 5. show icons ("folder" and "document")
true,
// 6. icon images: closed folder, opened folder, document
["graphics/closed_folder.gif", "graphics/opened_folder.gif", "graphics/document.gif"],
// 7. size of icons: width, height
[16, 16],
// 8. indent amount for each level of the tree
[0, 16, 32, 48, 64, 80, 96, 112, 128],
// 9. background color for the tree
"",
// 10. default CSS class for nodes
"treeNode",
// 11. individual CSS classes for levels of the tree
[],
// 12. "single branch" mode
false,
// 13. padding and spacing values for all nodes
[0, 0]
];

Note: Nothing is linked as yet

1 Contributor
0 Replies
123 Views

Dani AI

Generated 9 Months Ago

A reliable approach is to pass the originating page identifier to the sitemap and let the sitemap script find, expand and highlight that node. Three common patterns (ranked by reliability):

Query string (best): link to the sitemap with ?active=/path/to/page. Works across tabs and is bookmarkable.
Fragment/hash: simple and visible (#node-id), works if your tree can map hashes to nodes.
Storage + referrer fallback: set sessionStorage on the source page and fall back to document.referrer if no explicit parameter (useful when you can’t alter every source link).

Key points to get right: normalize URLs before comparing (strip trailing slashes and index.html), run the matching code after the tree DOM is rendered (or hook the tree’s ready callback), and prefer an explicit parameter when referrer may be suppressed.

Example workflow (adjust selectors to match your tree markup):

// run after the tree is rendered
function canon(href){
  try{
    const u = new URL(href, location.origin);
    let p = u.pathname.replace(/\/index\.html$/,'');
    if(p !== '/') p = p.replace(/\/+$/,'');
    return p + (u.search||'');
  }catch(e){ return href; }
}

const params = new URLSearchParams(location.search);
let active = params.get('active') || sessionStorage.getItem('sitemapActive') || (document.referrer ? new URL(document.referrer).pathname : null);
if(active){
  active = canon(active);
  const anchors = document.querySelectorAll('.your-tree-selector a[href]'); // adjust
  const match = Array.from(anchors).find(a => canon(a.href) === active || canon(a.href).endsWith(active));
  if(match){
    match.classList.add('sitemap-active'); // add CSS to highlight
    // expand ancestor nodes (either via your tree API or by toggling the DOM classes created by the tree)
    let p = match.parentElement;
    while(p){
      if(p.classList && p.classList.contains('collapsed')){
        p.classList.remove('collapsed'); p.classList.add('expanded');
      }
      p = p.parentElement;
    }
    match.scrollIntoView({block:'center'});
    sessionStorage.removeItem('sitemapActive');
  }
}

If adding a query param from source pages is easy, use links like:

<a href="/sitemap.html?active=/current/page/path">View sitemap</a>

Notes: document.referrer can be absent when navigation suppresses referrer; sessionStorage is per-tab; and if the tree library exposes an expand/highlight API, prefer calling that instead of manipulating classes. For reference on the browser APIs used see MDN: Document.referrer, URL, and Window.sessionStorage.

This builds on ’s goal: send an explicit identifier to the sitemap, find the matching link in the rendered tree, expand its ancestors and add a highlight class.

Be the first to reply

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.