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
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
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
Copy link to clipboard
Copied
LOL, I did have a hunch
Give me some time to think about this.
Greet,
Willam
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
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
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
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
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
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
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.
Copy link to clipboard
Copied
There's no showHidePane() in whthost.js. Do you mean whtopic.js? There's a showHidePane(bShow) in there.
Copy link to clipboard
Copied
Hello again
I've followed your instructions, summarised below:
All okay so far. This is where it gets a bit confusing:
Sorry to be a pain, but could clarify this for me and let me know where I'm going wrong?
Thanks again
Jonathan
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.
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
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!
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
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
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
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
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
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
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
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
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
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