12 Replies Latest reply: Mar 25, 2013 11:49 AM by Willam van Weelden RSS

    Webhelp: how to add a Previous and Next button

    Len Kannapell

      I'm using Robohelp 8 and generating Webhelp on a Windows XP machine. The output displays on IE by default.

       

      My problem is simple: In my Webhelp output, I want a Previous and Next button to appear at the top of each topic. That's all. But I don't see how to set this.

       

      I don't want to create browse sequences; if select topic B, and I've already opened topic D and Z, I should be able to click the Previous button to go from topic D -> topic B, or the Next button to go from topic Z to topic B.

       

      Also, how do I open my Webhelp output so that the TOC is open (i.e., all topics are displayed so you don't have to click books to open. Thanks for any help.

       

      Len

        • 1. Re: Webhelp: how to add a Previous and Next button
          Willam van Weelden CommunityMVP

          Hi,

           

          For the next/back buttons, you need JavaScript. Create a link and instead of an URL add:

           

          For back:

          javascript:history.go(-1);

           

          For next:

          javascript:history.go(1);

           

          For opening your WebHelp with the skin visible, you need to use windows and use a context sensitive help call. See http://www.grainge.org/pages/authoring/calling_webhelp/calling_webhelp.htm for some good info. Or if you're up to a more technical view: http://www.wvanweelden.eu/articles/context-sensitivity-webhelp-and-flashhelp

           

           

          Greet,

           

          Willam

          • 2. Re: Webhelp: how to add a Previous and Next button
            Len Kannapell Community Member

            Thanks, William - I'm very surprised that simple functionality (a Previous and Next button at the top of each topic) requires JavaScript (vs. a drop 'n drag GUI element or selecting it from a menu), but so be it.

             

            Sorry for the naïveté - but how does one create a link? I can go to View -> Pods -> Link View, but I don't know what to do next. Again, I'm just looking for a way to simply add a 'Previous' and 'Next' button to all topics. Thanks again for the help,

             

            Len

            • 3. Re: Webhelp: how to add a Previous and Next button
              Captiv8r CommunityMVP

              Hi Len

               

              Type some text that the user will click on. Select the text. Right-click the selected text and choose Insert Hyperlink.

               

              Cheers... Rick

               

              Helpful and Handy Links

              RoboHelp Wish Form/Bug Reporting Form

              Begin learning RoboHelp HTML 7, 8 or 9 within the day!

              Adobe Certified RoboHelp HTML Training

              SorcerStone Blog

              RoboHelp eBooks

              • 4. Re: Webhelp: how to add a Previous and Next button
                Captiv8r CommunityMVP

                Oh, and if you want to add these to all topics, one way is to create a Master Page. Turn on the Header and insert the links in the Header area. Then associate the Master Page with all your topics.

                 

                Cheers... Rick

                 

                Helpful and Handy Links

                RoboHelp Wish Form/Bug Reporting Form

                Begin learning RoboHelp HTML 7, 8 or 9 within the day!

                Adobe Certified RoboHelp HTML Training

                SorcerStone Blog

                RoboHelp eBooks

                • 5. Re: Webhelp: how to add a Previous and Next button
                  Len Kannapell Community Member

                  Thanks, Rick - here's what I did:

                   

                  1. Opened a Master Page.

                  2. View -> Header

                  3. Clicked HTML tab (default is Design)

                  4. In the resulting header, I put in the following:

                   

                       javascript:history.go(-1);

                   

                  and then CTRL+W to preview.

                   

                  But what I see are the words 'javascript:history.go(-1);' in the master page. Must be something simple. Thanks,

                   

                  Len

                  • 6. Re: Webhelp: how to add a Previous and Next button
                    Captiv8r CommunityMVP

                    Hi Len

                     

                    I don't mean to sound asinine here, but do you know how to create a hyperlink?

                     

                    What you need do do is type some text, select it, then create the hyperlink and paste that JavaScript code into the Hyperlink dialog. Or insert an image and make the image a hyperlink.

                     

                    Cheers... Rick

                     

                    Helpful and Handy Links

                    RoboHelp Wish Form/Bug Reporting Form

                    Begin learning RoboHelp HTML 7, 8 or 9 within the day!

                    Adobe Certified RoboHelp HTML Training

                    SorcerStone Blog

                    RoboHelp eBooks

                    • 7. Re: Webhelp: how to add a Previous and Next button
                      Len Kannapell Community Member

                      Thanks, and no offense taken. No problems in creating a hyperlink - but I know absolutely nothing about JavaScript.

                       

                      What you suggested works fine:

                       

                      1. Created a master page, viewed the header, and put a left arrow image in the header.

                      2. Right-click and select Insert Hyperlink.

                      3. In the Link to field, enter

                       

                           javascript:history.go(-1);

                       

                      I applied this master sheet to all topics, and all is well. I thought linking was only to topics, and didn't realize JavaScript could be put in as well.

                       

                      Thanks for your patience on this, and one last item: how do I get the TOC to appear with all 'books' open? Right now, it looks like by default each 'book' is closed.

                      • 8. Re: Webhelp: how to add a Previous and Next button
                        Captiv8r CommunityMVP

                        Hello again

                         

                        There is only one way I'm aware of to present the TOC fully expanded. And you likely won't like the side effects.

                         

                        The first hurdle is that you must be generating WebHelp as your output type. If you are creating CHM files, there isn't a way I'm aware of to fully expand the TOC when first viewed.

                         

                        Assuming you are generating WebHelp, you must then enable the "Section 508 Compliant" option. When you do this, you may hear a whooshing sound as your ability to use a skin is taken away. And you may hear yourself crying out in anguish as your Index and your Glossary and your Search panels suddenly stop allowing users to type into a field and begin presenting an alphabet the user must click to navigate them.

                         

                        Other than that, you will have to learn to live with the fact the TOC is initially collapsed. (Unless, of course, you configure the default topic to be one that exists inside a book of the TOC and you are synchronizing the displayed topic to the TOC)

                         

                        Cheers... Rick

                         

                        Helpful and Handy Links

                        RoboHelp Wish Form/Bug Reporting Form

                        Begin learning RoboHelp HTML 7, 8 or 9 within the day!

                        Adobe Certified RoboHelp HTML Training

                        SorcerStone Blog

                        RoboHelp eBooks

                        • 9. Re: Webhelp: how to add a Previous and Next button
                          Meeru Fen

                          Hi!

                           

                          I found this topic as a search I did for also including Back and Forward buttons into a pop-up help page and have found it very helpful and useful, thanks.

                           

                          I am currently using RH 10, do you know of anything withine RH 10 that can be used to do this for us?

                           

                          I was also wondering if you might be able to help with a further query I have regarding these buttons:

                           

                          Currently, when a user clicks the help button within the web based software, the topic associated to that page will be displayed in a pop-up screen. The Help Menu is not displayed and there is no URL field displayed with a Back and Forward button. If the user clicks a link from this help page to another help page, there is no way of getting them back to the previous page without closing the page and then clicking the help button again.

                           

                          The requirement is to have Back and Forward buttons added to the help pages that remembers the history of where the user has been rather than moving them up and down the contents. (This part of the requirement I have now fixed with the help of your response to this initial query.) -  The buttons need to be hidden or inactive if there is no history associated, then becoming active or seen if the user has clicked a link. See the following:

                          • Click a help button on a required software page – help detects that there is no history and therefore the Back and Forward buttons are not required and are not displayed/enabled (not active).
                          • IF the user clicks a link on the displayed help, then on the new page of help the Back button will display/enable but not the Forward button as there is no more help been opened from this page (yet).
                          • If the user then clicks the Back button, the user is taken back to the previous page that was displayed. However, it notices that there is no more history beyond this page and the Back button either disappears or disables (becomes inactive).
                          • IF the user clicks another link from the second page, this would be the third page of help displayed. The Back button would be displayed/enabled but the Forward button would not be displayed or set as inactive.
                          • IF the user clicks the Back button from the third page, page 2 would have both Back and Forward buttons active/displayed.
                            This would continue with each link to new pages, i.e. the history would recognise the first opened page of help and recognise that there is not anything in front of the new page that has been opened.

                          This logic should also work if the user has opened the full help, selected a topic from the menu and then clicked a link from that opened page. The Back button would be displayed/enabled so that the user would be able to go back to the previous page they were on. Same with the Forward button.

                           

                          I hope this all makes sense. I wonder if you might be able to point me in the right direction or if this is something that I should talk to our web developer about?

                           

                          Many thanks,

                           

                          Nicola

                          • 10. Re: Webhelp: how to add a Previous and Next button
                            D.Desmet

                            Hello

                             

                            A Next and Previous button can be included via the SKIN. Example:Skin.gif

                             

                            This is done as follows (RH10):

                            1. In the Project Set-up, under Skin, open the skin that you use.
                            2. In the Toolbar tab, click the green + button to add a button.
                            3. In the Text tab, enter an Item Name and the Text to appear on the button (or you can use images - I used images that include text).
                            4. In the Action tab, check Javascript and in OnClick, enter history.go(-1) for the previous button or history.go(+1) for the next button.
                            5. Close the Skin Editor window.
                            6. Now in the Single Source Layouts, select the WebHelp output.
                            7. Select Navigation.
                            8. Under Toolbar Buttons, check the Next and Previous buttons that you have made.
                            9. You can alter the location of these buttons by clicking Up/Down.
                            10. Now Generate the output.

                             

                             

                            That's it.

                             

                            Dirk

                            • 11. Re: Webhelp: how to add a Previous and Next button
                              Meeru Fen Community Member

                              Thanks for this Dirk. A good thing to know for adding the buttons to the skin. However, when the help button is clicked the related topic opens up without the skin, so my buttons need to be within the topic. What I'd really like to know is if there is a way of making the back and forward buttons grey out when they cannot go back any further or forward any further. I am currently adding these buttons to a Master Page and assigning it to the topics. It would be nice to know if there is a way of adding a second .CSS file to the Master Page without it over riding the .css file on the topic pages?

                               

                              Thanks,

                              Nicola

                              • 12. Re: Webhelp: how to add a Previous and Next button
                                Willam van Weelden CommunityMVP

                                Hi,

                                 

                                If you want browse sequence buttons in topics, see: http://www.wvanweelden.eu/blog/2012/07/27/browse-sequences-webhelp-topics

                                 

                                If you want back-forward buttons for topics in your skin (NOT browse sequence buttons), you must first get the topic. Check http://www.wvanweelden.eu/blog/2012/07/29/get-webhelp-topic-pane-javascript

                                 

                                Greet,

                                 

                                Willam