How to hide the TOC

Please post all questions on Help+Manual 8 here

Moderators: Alexander Halser, Tim Green

Post Reply
Tim Frost
Posts: 319
Joined: Mon Nov 22, 2004 11:45 pm

How to hide the TOC

Unread post by Tim Frost »

I have a set of about ten Xplains each in an H&M project topic, with a top-level index.html and couple of plain topics which contain links to groups of the Xplains. Navigation from one to another can be done conveniently using the big 'left-up-right' arrows in the title bar. I am publishing web help with the skin named "Webhelp, iFrames Responsive, Blue.hmskin" and the target device is a smartphone or tablet in portrait mode. Someone might try to open it in a Windows browser or in landscape mode, when it opens with the TOC fully visible, but this is not a major issue. In portrait mode the TOC briefly displays and is then hidden.

I need to find a way to completely hide or suppress the TOC panel and its hamburger icon. They are never needed and simply get in the way and cause confusion if accidentally opened. I do not mind if this has to be done by simply commenting out parts of the skin; it's a one-off and it just has to work. I do not mind switching to another skin if it looks similar on a phone, and solves the problem. But if the only solution is a hack, what is the simplest way to achieve this?
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to hide the TOC

Unread post by Tim Green »

Hi Tim,

You can achieve this with a single variable change and some simple edits in the Layout template:

1: SKIN-TOC-TOGGLEWIDTH variable

Change the value of this variable to something really high, like 4000. This ensures that the TOC will remain hidden on all pages narrower than that.

2: Edit the Layout template

Around line 229: Change the speed values from 500 to 0 in these lines:

Code: Select all

if (doShow) { 
	  $("#hmcontentslider").animate(
		{scrollLeft: 0}, 500); 
	}
	else { 
	  $("#hmcontentslider").animate(
		{scrollLeft: shiftWidth}, 500);
		}
Around lines 60 and 172 and : Add/change the first lines in each of these definitions to "display: none;":

Code: Select all

#hmheadbox a.mobilemenu {  /* Mobile menu: change background-url to switch color */
      display: none;
      float: left;
      width: 16px;

Code: Select all

#hmheadbox a.mobilemenu {
	display: none;
	padding: 3px;
      }
That's it. The TOC will then be hidden instantly on opening, so that it's invisible, the hamburger link will be hidden and it will never be displayed automatically because the virtual pixels of the window will never be wider than 4000.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: How to hide the TOC

Unread post by Martin Wynne »

Hi Tim,

This is clunky, but works without wrecking anything.

edit: crossed with Tim.

If you haven't already, copy the Webhelp, iFrames Responsive, Blue.hmskin file from its initial location to somewhere else where you can edit it. Change the skin setting in your project to use it.

Open it in H&M, and insert a display:none; line in the TOC body style:

hm_notoc.png
cheers,

Martin.
You do not have the required permissions to view the files attached to this post.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to hide the TOC

Unread post by Tim Green »

Hi Tim,

Addition to my original post:

Also in the Layout template, add display: none; to both of the #hmnavbox { CSS definitions at lines 110 and 160. This will prevent the TOC from flashing into view for an instant when the page is loading on slower connections.

Code: Select all

#hmnavbox {
      display: none;
      position: absolute;
      left: 0;
      width: 29.7%;
      min-width: 100px;
      height: 100%;
      }

Code: Select all

#hmnavbox { 
	display: none;
	width: 50% !important;
	left: 0;
	bottom: 0;
	overflow: auto;
	}
You may also want to get rid of the "Navigation: " link above the topic header:

Edit the custom.css file and add display: none; to the first line of the first .crumbs { defintion:

Code: Select all

.crumbs {display: none; font-size: 8pt; margin-bottom: 3px; margin-top: 0px; color: #FFFFFF}
Then edit the topic page template and change the vertical-align attribute of the topichead header table cell from bottom to middle:

Code: Select all

<td class="topichead" style="text-align:left; vertical-align:middle;">
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim Frost
Posts: 319
Joined: Mon Nov 22, 2004 11:45 pm

Re: How to hide the TOC

Unread post by Tim Frost »

Thanks, both. I tried Tim's solution(s) first, which are nearly what I need, and have not yet tried Martin's. I think I have made all the changes accurately, though my line numbers did not match. But there are still some issues.

With the original skin, there were two blue bars at the top, both with a hamburger icon, with the first hamburger icon bringing the TOC and the second icon into view. Although the TOC and the icons are now gone, the top bar remains. Apart from this top bar, everything works as it should in a desktop browser with a portrait-mode window. But on a phone, which is the main target destination, in portrait mode, I can still drag the entire content to the right and display only the blank white window where the TOC used to be, with the two top bars. Apart from this important issue, we are nearly there.

I think it would be best to send Tim a link to both the versions. It is hard to describe and perhaps easier to see. This is only a community project, not a commercial one, so it does not deserve high priority; but thanks very much for the help so far.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to hide the TOC

Unread post by Tim Green »

Tim Frost wrote: Tue Jul 26, 2022 5:06 pm I think it would be best to send Tim a link to both the versions. It is hard to describe and perhaps easier to see. This is only a community project, not a commercial one, so it does not deserve high priority; but thanks very much for the help so far.
I didn't test this on a phone, so issues like that are possible. Please do send me your skin at support AT ec-software.com (replace the AT with @) and I'll check it out. By the way, Martin's solution will still display the TOC pane normally, there will just be no TOC in it, so you may not want to go that path... 8)
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Tim Frost
Posts: 319
Joined: Mon Nov 22, 2004 11:45 pm

Re: How to hide the TOC

Unread post by Tim Frost »

Thanks, I sent you links yesterday evening to try on a phone. and I have just sent the skin.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to hide the TOC

Unread post by Tim Green »

Hi Tim,

Thanks for the skin. I've now tested on mobile and you only need to make the following additional changes in the Layout template:

Locate these lines:

Code: Select all

#hmcontentbox {
width: 50% !important;
left: 50% !important;
Replace with this:

Code: Select all

#hmcontentbox {
left: 0;
Locate these lines:

Code: Select all

#hmcontentwrapper {
 overflow-y:hidden;
 width: 200%;
 }
Replace with this:

Code: Select all

#hmcontentwrapper {
 overflow-y:hidden;
 width: 100%;
 }
When re-testing on a phone, particularly iPhones, you need to actively clear the cache because they're very aggressive with caching and if you don't actively clear it you'll still get the old version, no matter how often you reload. On the iPhone you have to go to Safari in the Settings app, where there is only an option for clearing everything. You'll also lose all your active cookies, logins etc. when you do this. Apple likes to keep things simple. :frustration:

Also remember to set any images to responsive (% of page width) in your project, otherwise larger images will break the layout.
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
User avatar
Martin Wynne
Posts: 2656
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: How to hide the TOC

Unread post by Martin Wynne »

Tim Green wrote: Wed Jul 27, 2022 3:52 pmWhen re-testing on a phone, particularly iPhones, you need to actively clear the cache because they're very aggressive with caching and if you don't actively clear it you'll still get the old version, no matter how often you reload.
Hi Tim, Tim,

I use the .php extension option for all H&M webhelp files. PHP is assumed to contain dynamic content, so doesn't get cached.

It's the only way to update your webhelp and be sure your users will see it. This particularly applies to iFrames in Firefox, which are cached for 100 years and can only be cleared with a hammer. :(

Martin.
Tim Frost
Posts: 319
Joined: Mon Nov 22, 2004 11:45 pm

Re: How to hide the TOC

Unread post by Tim Frost »

Thanks to Tim for his list of changes, including a couple by e-mail; and to Martin for the hint about .php. I will try this next time, but for now it seems to be working and may not need to be changed for a while.
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: How to hide the TOC

Unread post by Tim Green »

Martin Wynne wrote: Wed Jul 27, 2022 4:20 pm I use the .php extension option for all H&M webhelp files. PHP is assumed to contain dynamic content, so doesn't get cached.
Now THAT is a brilliant suggestion. I was today years old when I learned this about the Web... :shock:
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Post Reply