26 Replies Latest reply on Aug 16, 2011 4:22 AM by Jop Smith

    Controlling the topic width

    Jop Smith Level 1

      Could someone tell me how to control the width of the topic pane? I presume one of the RoboHelp .js files can be edited to specifiy the width of the topic pane? Can anyone tell which file please?

       

      Thanks

      Jonathan

        • 1. Re: Controlling the topic width
          Willam van Weelden Adobe Community Professional & MVP

          The topic is as width as the browser window minus the navigation area. See both whskin_frmset01.htm and whskin_frmset010.htm.

           

          The easiest way to fix this is to show the help in a popup with a fixed size.

           

          Why do you want to set the topic width like this?

           

          Greet,

           

          Willam

          • 2. Re: Controlling the topic width
            Jop Smith Level 1

            Hi Willam

             

            As you've hopefully gathered from my other posts I'm trying to create a WebHelp system with a fixed width layout. I can control the width of my topic content using the BODY tag in my style sheet, but I was wondering if I could define a width for the contents pane itself using RoboHelp.

             

            Jonathan

            • 3. Re: Controlling the topic width
              Willam van Weelden Adobe Community Professional & MVP

              LOL, I did have a hunch

               

              Give me some time to think about this.

               

              Greet,

               

              Willam

              • 4. Re: Controlling the topic width
                MergeThis Level 4

                See Rick Stone's web site for his Skinny on Skins free doc (under Grimoires in the TOC). You might not be able to do everything you've been asking about, but his is the best resource for this type of work.

                 

                 

                Good luck,

                Leon

                • 5. Re: Controlling the topic width
                  Jop Smith Level 1

                  Hello, this is just an extension of this thread really. I've worked out that a link set to "javascript:showHidePane()" closes the left-hand navigation pane and a link set to "javascript:showTocPane()" redisplays the TOC pane. I'm almost there...

                   

                  My topic pages are styled to be 700px wide, which together with the TOC set to be 300px wide, gives me a fixed width layout that fits the 1024px screen resolution (this is the minimum screen resolution of my users). Any users running a higher screen resolution will still see the same layout. Normally, the topic width is 100% so content adjusts to fit, but the fixed layout guarantees that my content is displayed the same to all users.

                   

                  Okay, I'll cut to the chase. Is it possible to force the width of the topic to be 1000px when the navigation pane is closed and 700px when it's visible?

                   

                  Many thanks

                  Jonathan

                  • 6. Re: Controlling the topic width
                    Willam van Weelden Adobe Community Professional & MVP

                    Hi Jonathan,

                     

                    First off, I must apologize as I seem to have completely forgotten about this thread. To make something up to you: I have been thinking about this problem today. I don't see an easy way to your original problem. Your 'extension' is easier.

                     

                    You can use the css propertie max-width to set the maximum width of elements. You can use that to set the maximum width of the body contents in your topic. The browser can still be wider than 1000px, but the content will stay fixed. There's a but: In IE, it will only work correctly from version 8 and up.

                     

                    You can use the following scripts:

                     

                    GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "700px";
                    GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "1000px";

                     

                    The function GetTopicPane:

                     

                    function GetTopicPane() {//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;
                    }

                     

                    Add the scripts to the functions showXXX and showHidePane() in whtbar.js and to the function showHidePane() in whtopic.js. The function GetTopicPane must be available in all script files. You can do this by adding the function to whutils.js

                     

                    Greet,

                     

                    Willam

                    • 7. Re: Controlling the topic width
                      Jop Smith Level 1

                      Hi Willam, thanks for that. I'm just about to try out your suggestion, but I've got a couple of questions.

                       

                      When you say "Add the scripts to the functions showXXX and showHidePane() in whtbar.js and to the function showHidePane() in whtopic.js" do you mean like this below? And does "showXXX mean any function that starts with "show"?

                       

                      *function showHidePane()
                      {
                      var oMsg=null;
                      if(hasNavPane())
                        oMsg=new whMessage(WH_MSG_HIDEPANE,this,1,null);
                      else
                        oMsg=new whMessage(WH_MSG_SHOWPANE,this,1,null);
                      SendMessage(oMsg);
                      GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "700px";
                      GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "1000px";
                      }*

                       

                      I might be being a bit thick here, but how do I trigger these script? Do I just put a link in my topic and set it to "GetTopicPane"?

                       

                      Sorry for not fully understanding how to implement this, but I really do appreciate your help!

                       

                      Jonathan

                      • 8. Re: Controlling the topic width
                        Willam van Weelden Adobe Community Professional & MVP

                        Hi Jonathan,

                         

                        does "showXXX mean any function that starts with "show"?

                         

                        Indeed. The functions showToc, showIndex, showFTS and showGlossary. Add it after the call to SendMessage, example:

                         

                        function showToc()
                        {
                            var oMsg=new whMessage(WH_MSG_SHOWTOC,this,1,null)
                            SendMessage(oMsg);

                            GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "700px";
                        }

                         

                        The showHidePane function should be as follows:


                        function showHidePane()
                        {
                            var oMsg=null;
                            if(hasNavPane()) {
                                oMsg=new whMessage(WH_MSG_HIDEPANE,this,1,null);

                                GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "1000px";

                             }
                            else {
                                oMsg=new whMessage(WH_MSG_SHOWPANE,this,1,null);

                                GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "700px";

                            }
                            SendMessage(oMsg);
                        }

                         

                        Just add the function GetTopicPane() at the top of whutils.js. That should do the trick.

                         

                        You do not need to do anyting more. When a pane is opened or closed using the default RoboHelp functions, the widht of the topic is set to either 700px or 1000px. Because the script is provided in the functions RoboHelp uses, it will all work automatically.

                         

                        Greet,

                         

                        Willam

                        1 person found this helpful
                        • 9. Re: Controlling the topic width
                          Jop Smith Level 1

                          I have "hidden" the navigation pane mini toolbar, so there is no way to close the nav pane using RoboHelp's "hide nav component" button. I was hoping to add Show and Hide links in the header of my topics or on the main toolbar. Is this possible with your scripts?

                           

                          Also, what should I specify in my CSS for the width of my topic body? At the moment it's set to "width: 700px".

                           

                          Jonathan

                          • 10. Re: Controlling the topic width
                            Willam van Weelden Adobe Community Professional & MVP

                            Hi,

                             

                            In backward order:

                             

                            In your css, use max-width: 700px; This sets the default maximum width to 700px. If your default view is without navpane, use max-width: 1000px in your CSS. Use max-width instead of width to allow users to have a smaller topic and thus eliminating horizontal scrolling.

                             

                            For adding buttons in your topic itself, you need to create two buttons/links and you need to modify whthost.js.

                             

                            In whthost.js replace the function showHidePane with


                            function showHidePane(bShow)
                            {
                                var oMsg=null;
                                if(bShow) {
                                    oMsg=new whMessage(WH_MSG_SHOWPANE,this,1,null);
                                    GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "1000px";
                                }
                                else {
                                    oMsg=new whMessage(WH_MSG_HIDEPANE,this,1,null);
                                    GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = "700px";
                                }
                                SendMessage(oMsg);
                            }

                             

                            Then create buttons / links in your topic to show and hide the pane. Example:

                             

                            <a href="javascript:void(0)" onclick="showHidePane(true)">Show pane</a>

                            <a href="javascript:void(0)" onclick="showHidePane(false)">Hide pane</a>

                             

                            You can also make these links dynamic: Only showing the appropriate link. I'll create a small example and post back in an hour or so.

                             

                            With the modifications from my previous posts, the the buttons from the main toolbar will correctly amend the width of the topic.

                            • 11. Re: Controlling the topic width
                              Jop Smith Level 1

                              There's no showHidePane() in whthost.js. Do you mean whtopic.js? There's a showHidePane(bShow) in there.

                              • 12. Re: Controlling the topic width
                                Jop Smith Level 1

                                Hello again

                                 

                                I've followed your instructions, summarised below:

                                 

                                • Amend my CSS width property to max-width: 700px;.
                                • Add the GetTopicPane() function to whtutils.js.
                                • Add the GetTopicPane() scripts to the showToc(), showIndex(), showFTS(), showGlossary(), and showHidePane() functions in whtbar.js.
                                • Add links in my topics to <a href="javascript:void(0)" onclick="showHidePane(true)">Show pane</a> and <a href="javascript:void(0)" onclick="showHidePane(false)">Hide pane</a>.

                                All okay so far. This is where it gets a bit confusing:

                                 

                                • In your first message you suggest I add the script to the showHidePane() function in whtopic.js as well as in whtbar.js. However, this function doesn't exist in whtopic.js, but there is a showHidePane(bShow). Is this the function I need to edit? I tried editing this function and RoboHelp didn't like it.
                                • In your last message you suggest I replace the showHidePane() function in whthost.js with the showHidePane(bShow) example in your message. However, the showHidePane() function doesn't exist.

                                 

                                Sorry to be a pain, but could clarify this for me and let me know where I'm going wrong?

                                 

                                Thanks again

                                Jonathan

                                • 13. Re: Controlling the topic width
                                  Willam van Weelden Adobe Community Professional & MVP

                                  Hi again,

                                   

                                  there is a showHidePane(bShow). Is this the function I need to edit? I tried editing this function and RoboHelp didn't like it.

                                  That's the one. bShow is only a parameter and I never use those when pointing to a function. How does RoboHelp not like it? Did it break your output? I tested this and it worked for me. If you like, you can send me your test project and I'll amend it for you.

                                   

                                  • In your last message you suggest I replace the showHidePane() function in whthost.js with the showHidePane(bShow) example in your message. However, the showHidePane() function doesn't exist

                                  Sorry about that, it whtopic.js Guess it's friday.

                                   

                                  I created an example script for you that lets you insert 'show/hide' links and buttons in a topic. This was more of a challenge than I thought.

                                   

                                  • You want to disable 'show navigation pane links in topics' as this script duplicates the behaviour.
                                  • You need to disable the close navigation button in the minibar. Do this by removing the line addButton("hide2",BTN_TEXT|BTN_IMG,"","","","","",0,0,"close.gif","","","close.gif","","") ; from whskin_mbars.htm.

                                   

                                  Add the following script to all your pages by adding it to whtopic.js or in a master page or so. Note: This includes the function GetTopicPane(). You can ignore that function because you already added that to whutils.js.

                                   

                                  The script:

                                  var showpanemsg = "Show navigation";
                                  var hidepanemsg = "Hide navigation";
                                  var showhidelinkid = "showhidepanecontrol";
                                     
                                  function addShowHidePaneLinks() {

                                   

                                      var clickevent;
                                      var label;
                                     
                                      if(isnavpanevisible()) {
                                          label = hidepanemsg;
                                      } else {
                                          label = showpanemsg;
                                      }
                                     
                                      //Create link
                                      var link = '<a href="javascript:void(0);" id="'+showhidelinkid+'" onclick ="showhidepaneamended()" />'+label+'</a>';
                                     
                                      document.write(link);//Write link
                                      setCorrectWidth();//Set topic to the correct width
                                  }
                                  function showhidepaneamended() {
                                      if(isTopicOnly())
                                          show();
                                      else
                                          showHidePane(!isnavpanevisible());
                                     
                                      setCorrectWidth();
                                      amendshowhidelink();
                                  }
                                  function amendshowhidelink() {

                                   

                                      var link = document.getElementById(showhidelinkid);
                                     
                                      if (isTopicOnly()) {
                                          if(gbIE) {
                                              link.click = 'show()';
                                          } else
                                              link.setAttribute('click', 'show()');
                                          link.innerHTML = hidepanemsg;
                                      }
                                      else if (isnavpanevisible()) {
                                          link.innerHTML = hidepanemsg;
                                      } else {
                                          link.innerHTML = showpanemsg;
                                      }
                                     
                                  }
                                  function isnavpanevisible() {
                                      if(isTopicOnly())
                                          return false;

                                   

                                      if(gbIE) {
                                          var splitterwidth = 6;
                                          var browserwidth = top.document.body.offsetWidth;
                                          var topicwidth = document.body.offsetWidth;
                                          if(browserwidth-topicwidth == 0 || browserwidth-topicwidth == splitterwidth)
                                              var navpanewidth = 0;
                                          else
                                              var navpanewidth = 1;
                                      } else {
                                          var navpanewidth = parent.frames[0].document.body.clientWidth;
                                      }
                                      if(navpanewidth == 0)
                                          return false;
                                      else
                                          return true;
                                  }
                                  function setCorrectWidth() {//Set correct width of the topic
                                      var sWidth;
                                      if(isTopicOnly()) {
                                          sWidth = "1000px";
                                          document.getElementsByTagName("body")[0].style.maxWidth = sWidth;
                                      }
                                      else {
                                          if(isnavpanevisible()) {
                                              sWidth = "1000px";
                                          } else {
                                              sWidth = "700px";
                                          }
                                          GetTopicPane().document.getElementsByTagName("body")[0].style.maxWidth = sWidth;
                                      }
                                  }
                                  function GetTopicPane() {//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;
                                  }

                                   

                                  Now, in your topic, add the following script: addShowHidePaneLinks(); This will write the correct link in your topic at the place you inserted the function.

                                   

                                  That's it. If you add addShowHidePaneLinks(); to your masterpage, all the topics will have the links.

                                   

                                  Greet,

                                   

                                  Willam

                                  • 14. Re: Controlling the topic width
                                    Jop Smith Level 1

                                    Hi, I've got your initial instructions working! It does just what I wanted.

                                     

                                    How do you think it will work for anyone using a pre-IE8 browser? Will they still be able to hide the nav pane, but the content just won't adjust to 1000px or will the links just not work at all?

                                     

                                    Just going to have a look at the script in your last message for adding dynamic links.

                                     

                                    Willam, you're an absolute star!

                                     

                                    Many thanks

                                    Jonathan

                                     

                                    PS. Have a good weekend!

                                    • 15. Re: Controlling the topic width
                                      Willam van Weelden Adobe Community Professional & MVP

                                      Hi,

                                       

                                      On IE6/7 the max-width will be (mostly) ignored. The showing/hiding of the pane will continue to work.

                                       

                                      The dynamic links will not work on IE6/7. It may be possible to amend the script, but that will probably be a lot of work.

                                       

                                      Have a wonderfull weekend yourself.

                                       

                                      Greet,

                                       

                                      Willam

                                      • 16. Re: Controlling the topic width
                                        Jop Smith Level 1

                                        Morning Willam

                                         

                                        Sorry to bug you again, but I've noticed that after you close the pane (and the topic width becomes 1000px) if you click a link in the topic that takes you to another topic, then the width returns to 700px but without the nav pane.

                                         

                                        If you close the nav pane on one topic, is it possible to retain this setting across all other topics until you re-display the nav pane manually? If not, could it automatiaclly re-display the default layout when you click away?

                                         

                                        Hope makes sense!

                                         

                                        Thanks

                                        Jonathan

                                        • 17. Re: Controlling the topic width
                                          Willam van Weelden Adobe Community Professional & MVP

                                          Hi Jonathan,

                                           

                                          That's a good one. I didn't think about that scenario.This happens because you set the width for one topic. When switching to another topic, the topics uses the 700px min-width defined in the style sheet.

                                           

                                          The best solution may be to simply check whether the nav pane is visible or not whenever a topic opens. You can accomplish this as follows:

                                           

                                          1. In your masterpage, add a footer.

                                          2. Select your footer and click Insert > HTML > Advanced > Script.

                                          3. Paste the following code on the source tag:

                                           

                                          function isnavpanevisible() {
                                              if(isTopicOnly())
                                                  return false;

                                           

                                              if(gbIE) {
                                                  var splitterwidth = 6;
                                                  var browserwidth = top.document.body.offsetWidth;
                                                  var topicwidth = document.body.offsetWidth;
                                                  if(browserwidth-topicwidth == 0 || browserwidth-topicwidth == splitterwidth)
                                                      var navpanewidth = 0;
                                                  else
                                                      var navpanewidth = 1;
                                              } else {
                                                  var navpanewidth = parent.frames[0].document.body.clientWidth;
                                              }
                                              if(navpanewidth == 0)
                                                  return false;
                                              else
                                                  return true;
                                          }

                                          if(!isnavpanevisible()) {

                                               document.getElementsByTagName("body")[0].style.maxWidt h = "1000px";

                                          }

                                           

                                          Whenever a topic is loaded, the script checks that the width is set correctly. If the pane is not visible, the width of the topic will be increased. Note: You can also add this script at the bottom of whtopic.js instead of in your masterpage.

                                           

                                          Greet,

                                           

                                          Willam

                                          • 18. Re: Controlling the topic width
                                            Jop Smith Level 1

                                            Hi Willam,

                                             

                                            I've tried pasting your code at the bottom of whtopic.js and into my footer, but it has no effect. Any ideas?

                                             

                                            Cheers

                                            Jonathan

                                            • 19. Re: Controlling the topic width
                                              Willam van Weelden Adobe Community Professional & MVP

                                              Right... IE giving trouble again...

                                               

                                              The simple solution: Add the code to the header/footer of your masterpages. You can leave the function isnavpanevisible() in whtopic.js. Just add


                                              if(!isnavpanevisible()) {
                                                   document.getElementsByTagName("body")[0].style.maxWidth = "1000px";
                                              }

                                               

                                              to the master page. Check that there are no extra spaces added. When copying from the browser, you may end up with spaces in the code that break the script.

                                               

                                              Greet,

                                               

                                              Willam

                                              • 20. Re: Controlling the topic width
                                                Jop Smith Level 1

                                                Sorry, still not working I'm afraid.

                                                 

                                                If I understand your instructions correctly, I've got the function in whtopic.js and this bit

                                                 

                                                if(!isnavpanevisible()) {
                                                     document.getElementsByTagName("body")[0].style.maxWidth = "1000px"; }

                                                in the footer of my master page.

                                                 

                                                Am I missing something obvious?

                                                 

                                                Thanks

                                                Jonathan

                                                • 21. Re: Controlling the topic width
                                                  Willam van Weelden Adobe Community Professional & MVP

                                                  Perhaps You did generate your output again after adding the script to the master page? And you did place the modified files in your output?:

                                                   

                                                  First, make a backup of all the files in your output that you modified. If I recall correctly, these would be whtopic.js, whtbar.js and whutils.js. Copy them to a safe location for reuse.Then generate your output. Place the modified files into your output and test it again. That does the trick on my pc, even for IE.

                                                   

                                                  If it still doesn't work, I'd like to know how you added the script to your masterpage. Perhaps something went wrong there.


                                                  Greet,

                                                   

                                                  Willam

                                                  • 22. Re: Controlling the topic width
                                                    Jop Smith Level 1

                                                    I've copied my modified files into a separate folder, re-generated, and copied them back into my output, but it's still the same.

                                                     

                                                    Would you mind having a look at my test project if I zipped it up and sent you a copy somehow?

                                                     

                                                    I would really appreciate this.

                                                     

                                                    Jonathan

                                                    • 23. Re: Controlling the topic width
                                                      Willam van Weelden Adobe Community Professional & MVP

                                                      Hi,

                                                       

                                                      Looking at your test project is the next thing on my list. See my email on http://www.wvanweelden.eu/contact or PM me. We'll continue this by mail.

                                                       

                                                      Please send me your test project source files with the WebHelp output and the modified files.

                                                       

                                                      Greet,

                                                       

                                                      Willam

                                                      • 24. Re: Controlling the topic width
                                                        Jop Smith Level 1

                                                        Okay, I've sent my project via the email address on your site.

                                                         

                                                        I look forward to hearing from you.

                                                         

                                                        Jonathan

                                                        • 25. Re: Controlling the topic width
                                                          Willam van Weelden Adobe Community Professional & MVP

                                                          To any followers of this thread:

                                                           

                                                          We solved this problem via e-mail.The main pain is a bug in IE that requires a roundabout method for checking that the topic pane is visible or hidden. A working version of this function is available on my site: http://www.wvanweelden.eu/robohelp/scripts/isnavpanevisible

                                                           

                                                          Greet,

                                                           

                                                          Willam

                                                          • 26. Re: Controlling the topic width
                                                            Jop Smith Level 1

                                                            Many thanks to Willam for his input and expertise. I now have a dynamic topic link for hiding/showing the navigation pane and resizing the topic width accordingly.

                                                             

                                                            Much appreciated.

                                                             

                                                            Jonathan