Skip navigation
Len Kannapell
Currently Being Moderated

Webhelp: how to add a Previous and Next button

Aug 14, 2012 12:37 PM

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

 
Replies
  • Currently Being Moderated
    Aug 14, 2012 12:44 PM   in reply to Len Kannapell

    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-fla shhelp

     

     

    Greet,

     

    Willam

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 4:09 PM   in reply to Len Kannapell

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 4:10 PM   in reply to Captiv8r

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 4:22 PM   in reply to Len Kannapell

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2012 4:54 PM   in reply to Len Kannapell

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 5:00 AM   in reply to Willam van Weelden

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2013 3:51 AM   in reply to Meeru Fen

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 20, 2013 9:38 AM   in reply to D.Desmet

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 25, 2013 11:49 AM   in reply to Meeru Fen

    Hi,

     

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

     

    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-javas cript

     

    Greet,

     

    Willam

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points