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

Is it possible to create/ assign shortcut keys for TOC navigation?

Mentor ,
May 12, 2014 May 12, 2014

Copy link to clipboard

Copied

Hi

I am using RH10 as part of TCS4.

Is it possible to assign PgUp and PgDn keys as shortcuts to navigate between topics in the TOC? I have created the browse sequence.

Sreekanth

Views

488

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

correct answers 1 Correct answer

LEGEND , May 31, 2014 May 31, 2014

Ah, it was for WebHelp. Didn't see that...

For WebHelp, it is easy. Paste the code below in whutils.js. Note that it will not work on local Chrome. This script will work for RH8+ WebHelp

var nextBRS = 102;/* Key code of next page key */

var prevBRS = 100;/* Key code of prev page key */

var nextBRS = 102;/* Key code of next page key */
var prevBRS = 100;/* Key code of prev page key */

if(window.addEventListener){
     window.addEventListener("keyup", brsListener, false);
} else if(window.attachEvent
...

Votes

Translate

Translate
LEGEND ,
May 12, 2014 May 12, 2014

Copy link to clipboard

Copied

Hi there

Hmmm, I'm thinking it might be possible to achieve with some scripting modification. Hopefully Willam will pop in here to advise.

Earth to Willam... Earth to Willam... are we reaching you Willam?

Cheers... Rick

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 ,
May 31, 2014 May 31, 2014

Copy link to clipboard

Copied

Apart from the precise key bindings, this can be done. (Page up and Page down are not registered by the browser as key press events.) This is actually simple in WebHelp, but less so in HTML5 outputs. This post includes instruction for both Multiscreen and Responsive HTML5.

What you need to do (Multiscreen HTML5 only):

  1. Get jQuery. (The 1.x version.)  (jQuery is already available in the Responsive layout from RH11.) -- I was too lazy to make it in pure JS 😉
  2. Add the jQuery file in your layout as a baggage file.
  3. On the topic page, include a link to the jQuery file. (<script type="text/javascript" src="jquery.min.js"></script> or something similar.
  4. Save the file.

Then do the following:

  1. Copy the following code into a JS file:

//-- Start of script, do not copy

/* Enable PgUp/PgDwn shortcut for browse sequences */
$(function(){
     var nextBRS = 54;/* Key code of next page key */
     var prevBRS = 52;/* Key code of prev page key */
     
     $backElem = $("#browseSeqBack");
     $forwElem = $("#browseSeqNext");
     
     var custCanGo = function(forward) {
          var canGo = false;
          if(forward) {
               if($forwElem.length != 0) {
                    canGo = true;
               }
          } else {
               if($backElem.length != 0) {
                    canGo = true;
               }
          }
          return canGo;
     };
     var custGoAvenue = function (forward) {
          if(forward) {
               if(custCanGo(true)) {
                    $forwElem[0].click();
               }
          } else {
               if(custCanGo(false)) {
                    $backElem[0].click();
               }
          }
     }
     
     $(window).keypress(function(event){
          if(event.which == nextBRS) {
               custGoAvenue(true);
          } else if(event.which == prevBRS) {
               custGoAvenue(false);
          }
     });
     
});

//--End of script, do not copy

  1. Add the JavaScript file in your layout as a baggage file.
  2. On the topic page, include a link to the JavaScript file. (<script type="text/javascript" src="myscriptfile.js"></script> or something similar.
  3. Save the file.

Alternatively, you can paste it in the file Layout.js if you are using Responsive HTML5.

Last, you need to map the keys you want to use. You can find the codes for the keyboard keys on; http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

In the script, replace the following keys with the keys you want to use:

   var nextBRS = 54;/* Key code of next page key */

   var prevBRS = 52;/* Key code of prev page key */

By default, this is mapped to the numpad 4 and 6 keys. Note that keys like page up/down, home and the arrow keys don't work.

I have tested this in RH11 Responsive HTML5 output and it will work with Multiscreen HTML5 as well. I haven't tested this with topics that occur in multiple browse sequences, so you may want to test that first is you use that.

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
LEGEND ,
May 31, 2014 May 31, 2014

Copy link to clipboard

Copied

Ah, it was for WebHelp. Didn't see that...

For WebHelp, it is easy. Paste the code below in whutils.js. Note that it will not work on local Chrome. This script will work for RH8+ WebHelp

var nextBRS = 102;/* Key code of next page key */

var prevBRS = 100;/* Key code of prev page key */

var nextBRS = 102;/* Key code of next page key */
var prevBRS = 100;/* Key code of prev page key */

if(window.addEventListener){
     window.addEventListener("keyup", brsListener, false);
} else if(window.attachEvent) {
     window.attachEvent("onkeyup", brsListener);
}

function brsListener(event) {
     var GetTopicPaneBRS = function () {//Get the topic pane
          var topicPane;
          if (top.frames[0].name == "ContentFrame")
               topicPane = top.frames[0].frames[1].frames[1];
          else
               topicPane = top.frames[1].frames[1];
          topicPane.focus();
          return topicPane;
     }
     var topic = GetTopicPaneBRS();
     if(event.which == nextBRS) {
          if(topic.canGo(true)) {
               topic.goAvenue(true);
          }
     } else if(event.which == prevBRS) {
          if(topic.canGo(false)) {
               topic.goAvenue(false);
          }
     }
}

Kind regards,

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
LEGEND ,
May 31, 2014 May 31, 2014

Copy link to clipboard

Copied

Thanks 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
Mentor ,
Jun 01, 2014 Jun 01, 2014

Copy link to clipboard

Copied

Hi Willam

Thanks for working out the script for me.

I just tested this now by just changing the codes to 34 for next page and 33 for previous page (based on the info on the site you gave). But it is not working. I feel that the problem is that the cursor/ action doesn't shift to the Topics pane, and stays on the Content pane.

Sreekanth

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 ,
Jun 02, 2014 Jun 02, 2014

Copy link to clipboard

Copied

The problem is the browser. In Chrome, pageUp and pageDown don't register as keystrokes as all and in Firefox both pageUp and pageDown are registered as key event 0. To make it even worse, in Firefox, the numpad keys are correctly handled, but in Chrome they are handled as if a regular number key has been struck. 😞

The sweet spot is to find one keymapping that will work for you. To make it work correctly, choose a keymapping that you know works everywhere (numbers, letters, punctuation marks).

Kind regards,

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
Mentor ,
Jun 02, 2014 Jun 02, 2014

Copy link to clipboard

Copied

I tried with A and B as keycodes, tested it over the webserver (XAMPP), on Chrome and FireFox. But it did not help.

Not sure if I have to add something before the JS code you shared. Here is my whutils.js. I have added the code at the end.

https://www.dropbox.com/sm/create/whutils.js

Here is the modified code I added:

var nextBRS = 66;/* Key code of next page key */

var prevBRS = 65;/* Key code of prev page key */

var nextBRS = 66;/* Key code of next page key */

var prevBRS = 65;/* Key code of prev page key */

if(window.addEventListener){

     window.addEventListener("keyup", brsListener, false);

} else if(window.attachEvent) {

     window.attachEvent("onkeyup", brsListener);

}

function brsListener(event) {

     var GetTopicPaneBRS = function () {//Get the topic pane

          var topicPane;

          if (top.frames[0].name == "ContentFrame")

               topicPane = top.frames[0].frames[1].frames[1];

          else

               topicPane = top.frames[1].frames[1];

          topicPane.focus();

          return topicPane;

     }

     var topic = GetTopicPaneBRS();

     if(event.which == nextBRS) {

          if(topic.canGo(true)) {

               topic.goAvenue(true);

          }

     } else if(event.which == prevBRS) {

          if(topic.canGo(false)) {

               topic.goAvenue(false);

          }

     }

}

Sreekanth

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 ,
Jun 16, 2014 Jun 16, 2014

Copy link to clipboard

Copied

Hi Sreekanth,

I can't download the JS you shared. Dropbox gives a 404 error.

Kind regards,

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
Mentor ,
Jun 16, 2014 Jun 16, 2014

Copy link to clipboard

Copied

Hi Willam

Thanks for getting back to this thread. Sorry for that issue with the link. Here is the correct one.

https://www.dropbox.com/s/k4rb59c8ar1nico/whutils.js

Sreekanth

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 ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

I don't have RH10 with me at the moment, but I tried it in RH11 WebHelp and it worked fine, simply press A and B to move through the browse sequences.

The interesting question is: which browser did you try? And was the help local or on a web server. The script won't work locally on Chrome, but it works locally on Internet Explorer.

Also, try adding the following code to the function brsListener:

alert(event.which);

Add it just after the opening bracket ({). If you press any button, you should get a popup with the pressed key number. Do you see that behaviour?

Kind regards,

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
Mentor ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

When I use the alert(event.which); script, I get the code of the key I am pressing. But I am not able to navigate.

I have tested it both locally and from the web server on the following browsers:

  • FireFox 24.6
  • IE 10
  • Chrome 35

Sreekanth

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 ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

Curiouser and curiouser. Does the development console (F12) show any script errors on pressing these buttons?

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
Mentor ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

No, I don't see any error in the developer console (known as Web Console in FireFox) on pressing the buttons. There is a CSS related error which appears when I click topic names on the TOC.

Here is the screenshot:

Shortcut Keys Issue.png

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 ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

I don't see the browse sequence buttons in the minibar above the TOC. Are you sure the browse sequences are enabled for the output? (Check the SSL settings.)

Try adding the following code behind var topic = GetTopicPaneBRS();:

pre

alert(topic.canGo(true));

alert(topic.canGo(false));

The system will now alert you. The first alert should show 'true' if there is a next topic in the browse sequence. The second alert should show 'true' if there is a previous topic in the browse sequence. If you always get false, there are not browse sequences at all.

Kind regards,

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
Mentor ,
Jun 17, 2014 Jun 17, 2014

Copy link to clipboard

Copied

LATEST

Awesome! That was the issue then. I enabled the browse sequence and things work perfectly now. Tested it locally and on the web server.

Thanks a lot for your patience and helping me with the solution.

Sreekanth

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