10 Replies Latest reply on Nov 20, 2006 4:47 AM by MergeThis

    Navigation Trail

    kewal_tech
      Hi All,

      Working with RH X5 generating WebHelp.

      I searched both Peter and Rick site and this forum but didnt find something similar to my needs..pls help

      What I want to do is.. I want to create a Navigation Trail like below on my help output.. either on the Topic or the toolbar..anywhere..

      Home>>Welcome>>Login>>Change password>>

      So looking at the above what this would mean the user went from Home to Welcome then to Login..and etc..and clicking any of the above links it would take him to that page.. e.g. If the user is in Change Password Topic and wants to go to Login page,simply clicking the Login link from the above would take him to that page.. So visting any help topic would display how the user got there.. e.g Hosted Exchange>>Add Hosted Exchange>>Remove Hosted Exchange...


      Is this possible? Please help..

      Thank you
      Kewal
      Have a great weekend.
        • 1. Re: Navigation Trail
          RoboWizard Level 4
          Hi Kewal

          I believe what you are referring to is known as a "breadcrumb trail". Click here to visit fellow Adobe Community Expert Roger Nilsson's page explaining these.

          Cheers... Rick
          • 2. Re: Navigation Trail
            kewal_tech Level 1
            Hi Rick,
            Thanks for your fast reply.

            YES this is what I want to do. BUT I still need some help.
            How to I use this file?I've followed the instructions from Roger's site but it doesnt say how to use this file with the project.

            Doing some guess work, but not working. Please help

            Thank you

            Kewal
            • 3. Re: Navigation Trail
              Roger N Level 2
              Kewel -

              Roger here. I shall be more explicit.

              You will want to 1) modify the given breadcrumb.js file to match your Website layout, and 2) insert the reference to the .js file where ever you want to see the breadcrumb trail, usually at the top of the Web page, like this:

              <SCRIPT src="breadcrumb.js" type="text/javascript" language="JavaScript"></script>

              There are the instructions on the page to help modify the .js file to reflect your site:

              - Replace all instances of ' http://www.copperfieldpub.com' with your own home or start page.
              - Add another line for each new directory and subdirectory into the Crumb Arrays. Add these three elements for each new directory:

              - Path: the single directory name
              - Name: the user-friendly text you want to display onscreen
              - Url: the full URL to the parent page for this directory or book

              Further, the script is based on your directory structure - so it help if you have divided your content files into directories, based on subject. Knowing these things makes a difference when planning the design of your help system:

              - The script creates the breadcrumb hierarchy based on the directory tree.
              - This tree should be based on the Table of Contents (a generation configuration available with MacroMedia's RoboHelp and RoboHtml).
              - Each directory name must be unique.
              - Each web page must have a <TITLE> tag.
              - This script will display up to five levels (seven, if you count 'Home' and the current page).

              Post back if you need clarification on anything....
              • 4. Re: Navigation Trail
                kewal_tech Level 1
                Hi Roger and Rick,

                Thank you for your help.

                Well I followed the above, but still I was not able to make the breadcrumbs appear. Some mistake I am doing I guess.

                What I've done.
                1. Added the file UserGuideBreadCrumb.js to baggage file folder of the project

                2. <SCRIPT src="UserGuideBreadCrumb.js" type="text/javascript" language="JavaScript"></script> --> Adding this line in the body of the topic showed a RED box, so I guess that was an error so I pasted the code into the <head> section of the topic.

                3. The below is the script in the userguidebreadcrumb.js

                //* Build breadcrumb path on page for navigation
                //* Copyright 2004, Copperfield Publishing; http://www.copperfieldpub.com

                function Crumb(Path, Name, Url) {
                this.Path = Path;
                this.Name = Name;
                this.Url = Url;
                }

                BagOCrumbs = new Array();

                // add new directories here. the format:

                Path: How to use Help
                Name: User Guide
                Url: \\xxx\xxx\xxx\xxx\xxx\Index.htm

                Path: Login as a User
                Name: Logging On
                Url: \\xxx\xxx\xxx\xxx\xxx\Logging_On.htm

                BagOCrumbs[0] = new Crumb("Home", "Welcome", "How to Use Help/Welcome.htm");
                BagOCrumbs[1] = new Crumb("Logging On", "Logging On", "/Login as a User/Logging_On.htm");

                // ... we build the path and display it

                var i, x;
                strConcat = ">>";
                strUrl = document.location.href;
                strList = "<a href='/'>Home</a>";
                strDebug = "";
                aryDirs = strUrl.split("/");
                for (x=0; x < aryDirs.length; x++) {

                for(i = 0; i < BagOCrumbs.length; i++) {

                if (BagOCrumbs .Path.toLowerCase() == aryDirs[x].toLowerCase()) {

                strList += strConcat + "<a href='" + BagOCrumbs
                .Url + "'>" + BagOCrumbs .Name + "</a>";
                i = BagOCrumbs.length;
                }

                }

                }
                strList += ">>" + document.title;
                document.write(strList);

                At the moment I am generating the webhelp on a sharepoint, and later there will be a link on web app to access the help.

                Thank you

                Kewal
                Have a great Monday ;-)
                • 5. Re: Navigation Trail
                  kewal_tech Level 1
                  Hi All,

                  Still waiting help on this issue.

                  Thank you
                  Kewal
                  Have a great weekend.
                  ;)
                  • 6. Re: Navigation Trail
                    RoboWizard Level 4
                    Hi Kewal

                    One thing that I see that could be an issue is that your HTML file may be in a folder. Yet you are simply referencing <SCRIPT src="UserGuideBreadCrumb.js". So lets say your page is in folder "Kewal" of your project. I'm guessing you added the js file to baggage. When you did, it's a possibility that you added the file to the root level of the project. If you did (Which would make perfect sense) you need to amend the path in your HTML page so it correctly references the js file. In this case, again assuming you have a folder named "Kewal" off the root where your HTML page is, the reference would look like this:

                    <SCRIPT src="../UserGuideBreadCrumb.js"

                    If the folder structure is like this: Kewal/Tech and the page is in the Tech folder, it would look like this:

                    <SCRIPT src="../../UserGuideBreadCrumb.js"

                    If you are wondering about a really easy way to figure out the shorthand, take a look at how your .CSS file is referenced and you should have an excellent guide.

                    Cheers... Rick
                    • 7. Re: Navigation Trail
                      Roger N Level 2
                      Kewel -

                      Besides Ricks' excellent advice, I would also recommend removing the lines:

                      Path: How to use Help
                      Name: User Guide
                      Url: \\xxx\xxx\xxx\xxx\xxx\Index.htm

                      Path: Login as a User
                      Name: Logging On
                      Url: \\xxx\xxx\xxx\xxx\xxx\Logging_On.htm

                      In the .js file, these are instructions, describing the components of the BagoCrumbs[] array, and are commentted out with the double slashmarks:

                      // Path: the name of the directory
                      // Name: the text you want to display onscreen
                      // Url: the URL to the page for this group page or book

                      This merely describes the components as the Path (the directory name), the text you want to display, and the URL to the page. You add this information into each array element. Make sure you specify the correct path, and URL to the page:

                      BagOCrumbs[0] = new Crumb("Home", "Welcome", "How to Use Help/Welcome.htm");
                      • 8. Re: Navigation Trail
                        kewal_tech Level 1
                        Hi Roger and Rick,
                        Thank you for your reply.

                        I got my answers from both your post. But there is one simple error I am getting which I dont understand why? When I add the script code in body section I get a RED box in WYSIWYG editor. I tried running similar script else where outside RH it worked fine, i.e no errors found in the code.

                        Not sure if there is a different way to script in RH?Or is there something else that I am missing??

                        Thank you,

                        Kewal
                        Have a great Monday ;)
                        • 9. Re: Navigation Trail
                          Captiv8r Adobe Community Professional & MVP
                          Hi Kewal

                          As long as the script works and doesn't give you problems, the red box simply indicates that the page contains JavaScript code appearing where the red box does. It's not an indication that something is wrong.

                          Cheers... Rick
                          • 10. Re: Navigation Trail
                            MergeThis Level 4
                            ...and, by the way, this should have appeared in the WebHelp forum, right?

                            =======(Original Post)==================
                            Hi All,

                            Working with RH X5 generating WebHelp.
                            ====================================

                            I only mention it because not all HHAs (Helpful Help Authors) monitor every forum, so you might be missing out on just the right solution because your request for assistance was posted in the wrong slot.


                            Good luck,
                            Leon