• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Webhelp: how to add a Previous and Next button

Guest
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

TOPICS
Classic

Views

4.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 14, 2012 Aug 14, 2012

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 14, 2013 Mar 14, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 20, 2013 Mar 20, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 20, 2013 Mar 20, 2013

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Mar 25, 2013 Mar 25, 2013

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation
Download Adobe RoboHelp