Table of contents slide-in

This sample is for the installation of HTML on Word V3.0; if you wish to run it on other versions, please change the directory and so on.

Add function to show/hide the table of contents when displayed on mobile devices.

When the sample is used, a blue circular button is displayed in the upper left corner of the screen as shown in the figure below when displayed on a mobile device, and each tap slides in/slides out the table of contents.

Actual sample

This is actually used in the online manual for this product.

This product's manual uses features designed for smartphones.
You can view the online manual by scanning this QR code with your smartphone camera.

Conditions of use

• Word document has headings or paragraphs that specify outline levels 1-3.
• Word document has a table of contents created with Word's Table of Contents feature.
• Use "sample-toc.css" included as a sample in CSS. * Some editing is required.
• Use jquery. * jquery is a JavaScript library that makes JavaScript easier to write.
• Set viewport for mobile devices.

Commands to use

CSS to use

As a sample, use "sample-toc.css" copied at the time of program installation. If you have not changed the installation directory of the program during installation, the following will be used.

C:\Program Files\Antenna House\xhw30\CSS\sample-toc.css

This CSS is specified to hide the buttons for mobile devices if used as is, so please delete the following sections before use.

* If you cannot edit the file in the "Program Files" folder, copy the file to a folder to which you have access, such as the desktop, and then edit it, and specify that file when specifying CSS on the command line.

Delete the following at the end of "sample-toc.css".

#mobile-side-btn {
display: none;
}

JavaScript to use

1. Use jquery. Specify the following URL following the "-js" command, or download the js file, save it in a location that can be referenced from the HTML file, and specify the path to the location.
   https://code.jquery.com/jquery-3.7.1.min.js
2. Create a js file containing the following JavaScript, save it in a location that can be referenced from the HTML file, and specify the path to that location. (In the following command example, the file is saved as "smartphone-btn.js" in the same folder as the HTML to be output.)

$(function () {
var $menu = $('.toc-wrap'),
$menuBtn = $('#mobile-side-btn-icon'),
$wrap = $('section'),
menuWidth = $menu.outerWidth();
$menuBtn.on('click', function () {
$wrap.toggleClass('open');
if ($wrap.hasClass('open')) {
$menu.animate({ 'left': 0 }, 300);
$("#mobile-side-btn-icon").addClass("close");
} else {
$menu.animate({ 'left': -menuWidth }, 300);
$("#mobile-side-btn-icon").removeClass("close");
}
});
});
$(function () {
if ($(window).width() <= 630) {
var $menu = $('.toc-wrap'),
$wrap = $('section'),
menuWidth = $menu.outerWidth();
$('a[href*="#"]').on('click', function () {
$menu.animate({ 'left': -menuWidth }, 100);
$("#mobile-side-btn-icon").removeClass("close");
$wrap.removeClass("open");
}
);
};
});

Command example

Example of converting "sample02.docx" in the "sample" folder on the desktop to HTML.

Word2HTML.exe %USERPROFILE%\Desktop\sample\sample02.docx %USERPROFILE%\Desktop\sample\sample02.html -css "C:\Program Files\Antenna House\xhw30\CSS\sample-toc.css" -viewport width=device-width,user-scalable=yes -js https://code.jquery.com/jquery-3.7.1.min.js -js smartphone-btn.js