Dynamic Breadcrumb.
January 24, 2005 12:00 AM
I'm trying to avoid a manual process for this and was wondering if anyone has creating a Lectora solution using the change contents action. While i can get it to display the chapter/section/page/sub-section title, i need the title to link to the corrent loction, and also to be follow by a single space and teo chevrons so, something like this:chapter name >> section name >> page namei'm hoping there is a solution for this, i realy do not want do this for over 200+ pages.
Discussion (7)
... But you do know what chapter and section the student is in. So why not "hard-code" those - including the Chevrons and the hyperlinks - at the Chapter and Section levels respectively and then "import" them to all sub-pages. Then just have the last text field be dynamic with the "change contents" and CurrentPageName variable.... But you do know what chapter and section the student is in. So why not "hard-code" those - including the Chevrons and the hyperlinks - at the Chapter and Section levels respectively and then "import" them to all sub-pages. Then just have the last text field be dynamic with the "change contents" and CurrentPageName variable.
Here's one idea that works for me:Create a new variable - I have named mine "breadcrumb"Then at the title level add a few actions to modify this variable:Action 1 - onShow > modify variable to VAR(CurrentChapterName) and set it to "Set Variable Contents"Action 2 - onShow > modify variable to "[space]>>[space]" (without the quotes) and set it to "Add to Variable"Action 3 - onShow > modify variable to VAR(CurrentPageName) and set it to "Add to Variable"Finally, create a textblock and add one more action to change its contents to the "breadcrumb" variableI suppose you can add as many actions as you need to show section names and the like.
From the looks of what you wrote, it looks like the text string would be easy to create but the links would NOT be. You effectively have three separate links - beginning of chapter, beginning of section, current page. First problem you have is generating dynamic hyperlinks. I tried writing the code for same with no luck - simply hardcoding a web page address in a variable and then stuffing that into a text box. Next problem you have is setting the variables for each of the three links. There is no GoTo FirstPageInChapter or FirstPageInSection. So, you have to have been on those pages to acquire the web address.JavaScript might be the answer but that is beyond me.
I like to quote this question and ask again. I tried the suggestion/solution below but I can't get it to work. Please help. Thanks.OK I found the solution... Thanks to Page Count tool! Follow the same concept and voila. Sorry I missed the linking part. I just got it to display it without the linking.If anyone can figure out the linking as well, it would be awesome.
Hello again. Really late on a possible solution but here goes.This is using another javascript method written by Danny Goodman (JavaScript undefined ISBN: 0-596-00467-2).1. Add an External HTML Object with Object Type: Header Scripting. Put this external HTML at the Title level. (Check "Use external text file for custom HTML)Add the following custom HTML. (Place the below code as a text file)
// Navigation Trail Library (trail.js)// by Danny Goodman (http://dannyg.com)// From "JavaScript & DHTML Cookbook", Second Edition (O'Reilly) by Danny Goodman// Copyright 2007 Danny Goodman. All Rights Reserved.var trailMenu = new Object();trailMenu["school"] = "School";trailMenu["introduction"] = "Introduction";trailMenu["academic"] = "Academic Departments";trailMenu["Sports"] = "Sports";trailMenu["sga"] = "Student Government";trailMenu["policies"] = "School Policies";trailMenu["help"] = "Help";trailMenu["teachers"] = "Teachers Only";trailMenu["tests"] = "Questionairre";function makeTrailMenu() { var parseStart, volDelim, parseEnd; var output = ""; var linkStyle = "color:#740016"; var path = location.pathname; var separator = " » "; var re = /\/g; path = path.replace(re, "/"); var trail = location.protocol + "//" + location.hostname; var leaves = path.split("/"); if (location.protocol.indexOf("file") != -1) { parseStart = 1; volDelim = "/"; } else { parseStart = 0; volDelim = ""; } if (leaves[leaves.length-1] == "" || leaves[leaves.length-1] == "index.html" || leaves[leaves.length-1] == "index.html") { parseEnd = leaves.length -1; } else { parseEnd = leaves.length; } for (var i = parseStart; i < parseEnd; i++) { if (i == parseStart) {   trail += "/" + leaves + volDelim;   output += "";   output += "Home"; } else if (i == parseEnd - 1) {   output += document.title;   separator = ""; } else {   trail += leaves + "/";   output += "";   output += trailMenu[leaves]; } output += "" + separator; } output += ""; return output;}
The only area to modify is;trailMenu["school"] = "School";trailMenu["introduction"] = "Introduction";trailMenu["academic"] = "Academic Departments";trailMenu["Sports"] = "Sports";trailMenu["sga"] = "Student Government";trailMenu["policies"] = "School Policies";trailMenu["help"] = "Help";trailMenu["teachers"] = "Teachers Only";trailMenu["tests"] = "Questionairre";which represents your directory hierarchy that matches your site organization. Meaning how the project will be published. If you change your default page from index.html(e.g. index.asp), make sure to write that default page within the code. Just look in the code for where you see index.html and change it.2. At the Title level, add an External Html Object with Object Type: Cascading Style Sheet , and a custom HTML, for style sheet to represent the color and whether you want the underline to appear when the mouse hovers over the link. (Create a .css file wityh the below code and import it)
.trailMenu A:link {text-decoration: none; color:#740016}.trailMenu A:visited {text-decoration: none}.trailMenu A:active {text-decoration: none}.trailMenu A:hover {text-decoration: underline; color: #740016;}
3. At the Title level, where you want the Breadcrumbs, add an External Html Object with Object Type: Other , and a custom HTML,
This will add the actual "Breadcrumbs to each page.4. Save the file and publish. You will not be able to view the result in the Preview mode.Shortcomings:This breadcrumb will not be able to organize your navigation trail like your "Chapter, "Section" and "Page", but rather how your project has been published.Go ahead and modify and see how it works with your files. I tried it and for the most part worked.Always open for comments!Edited By: bruman on 2007-10-2 13:26:31
bruman et al - Thanks for the posts. I'm very close to making this work . I have two questions:1. How do I change the script to only navigate within the course? Right now, it's capturing the actual file path instead of chapter and section.2. How do I change the script to make the links appear 'clickable'? Meaning the words appear with an underline underneath.Thanks in advance
Another method using JavaScript:1. Add an External HTML Object with Object Type: Header Scripting. Put this external HTML at the Title level.Add the following custom HTML.
function breadcrumbs(){ sURL = new String; bits = new Object; var x = 0; var stop = 0; var output = "Home W "; sURL = location.href; sURL = sURL.slice(8,sURL.length); chunkStart = sURL.indexOf("/"); sURL = sURL.slice(chunkStart+1,sURL.length) while(!stop){ chunkStart = sURL.indexOf("/"); if (chunkStart != -1){ bits[x] = sURL.slice(0,chunkStart) sURL = sURL.slice(chunkStart+1,sURL.length); }else{ stop = 1; } x++; } for(var i in bits){ output += "" + bits + " W "; } document.write(output + document.title);}
2. On each page where you want the Breadcrumbs, add an External Html Object with Object Type: JSP Script and a custom HTML,
3. Place the above Object where you want it on the page, save the file and publish. You will not be able to view the result in the Preview mode.Open the Title in your Browser and see the result.Hope this helps! See script explanation.
Discussions have been disabled for this post