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

Controlling the topic width

Participant ,
Jun 22, 2011 Jun 22, 2011

Copy link to clipboard

Copied

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

Views

3.2K

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 23, 2011 Jun 23, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Jun 23, 2011 Jun 23, 2011

Copy link to clipboard

Copied

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

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 23, 2011 Jun 23, 2011

Copy link to clipboard

Copied

LOL, I did have a hunch

Give me some time to think about this.

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
Advisor ,
Jun 23, 2011 Jun 23, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 11, 2011 Aug 11, 2011

Copy link to clipboard

Copied

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

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 11, 2011 Aug 11, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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.

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
Participant ,
Aug 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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!

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 12, 2011 Aug 12, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

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
Participant ,
Aug 15, 2011 Aug 15, 2011

Copy link to clipboard

Copied

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

I look forward to hearing from you.

Jonathan

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