1

I am trying to have basic collapsing/folding functionality for sections in the HTML file that has been exported from org-mode, since the files I want to share are very large. I am using Emacs 26.2 (9.0) and Org 9.1.9 on a Mac. I am not able to get this previous solution to work in 2019.

This seems like a built in feature but it seems like the underlying javascript code has a bug. I also saw another tool mentioned on the mailing lists, but without any examples I don't know how apply it to a specific org file I have.

For example, the following file is converted to HTML here 

#+Title+: JS test
#+INFOJS_OPT: path:/~ksb/js/org-info.js
#+INFOJS_OPT: toc:nil ltoc:nil view:overview mouse:underline
#+INFOJS_OPT: home:https://orgmode.org buttons:nil
* Chapter 1
** Section 1
*** Part 1
 - csp
** Section 2
 - cs2p

I have a freshly-downloaded copy of js/org-info.js.

UPDATE: there is a javascript error being raised by org-info.js

Uncaught TypeError: Cannot read property 'cloneNode' of undefined
    at Object.initFromTOC (org-info.js:82)
    at Object.init (org-info.js:49)
    at OrgHtmlManagerLoadCheck (org-info.js:289)
    at <anonymous>:1:1
Improve this question

3 Answers 3

Reset to default
0

The path to your org-info.js file does not seem to match where the file actually is.

You have the file at: http://web.stanford.edu/~ksb/js/org-info.js

But your example page is expecting it to be at: http://web.stanford.edu/~ksb/docs/js/org-info.js

If you move the js folder to the docs folder, or change

#+INFOJS_OPT: path:js/org-info.js

to 

 #+INFOJS_OPT: path:/js/org-info.js

it should work.

Improve this answer
6
  • Thanks! though when I add the forward slash, I see no change in behavior (the hyperlinked files have been updated). Normally, whenever "path" does not point to the actual org-info.js file (e.g. I add an arbitrary typo), the .html file just looks empty, so perhaps path:js/org-info.js and path:/js/org-info.js are actually both pointing to the correct path.
    – ksb
    Nov 15, 2019 at 6:09
  • Oh, hmm, how about if you try #+INFOJS_OPT: path:/~ksb/js/org-info.js?
    – ngm
    Nov 15, 2019 at 14:17
  • When I do that, I get the same behavior as any incorrect path to org-info.js (e.g. the same result as #+INFOJS_OPT: path:/js/ooo-oooo.js). The page is basically blank (html,org).
    – ksb
    Nov 15, 2019 at 15:32
  • Hmm, it looks as if it's finding the file now, but it's resulting in a JavaScript error. TypeError: k.T is undefined. Not sure what that problem would be! I might have a try at recreating it later on.
    – ngm
    Nov 15, 2019 at 15:41
  • I see now from inspecting the webpage. The error I see in "console" is Uncaught TypeError: Cannot read property 'cloneNode' of undefined - I'm a bit clueless about javascript but this brings me much closer to a solution, thanks!
    – ksb
    Nov 15, 2019 at 15:58
1

There is a related discussion over at the org-mode mailing list: https://lists.gnu.org/archive/html/emacs-orgmode/2015-11/msg00702.html

In brief, this is probably a bug in org-mode, and a workaround is possible by putting #+TITLE: some_title at the top of your org file.

Improve this answer
0

Ideally, Org mode would export HTML with <details> and <summary> tags. That would result in the functionality you want without the need for JavaScript.

<details>
<summary>Heading</summary>
The visibility of this text will be toggled when you click on "Heading"
</details>

Because Org mode does not export HTML code this way, you need to add some simple JavaScript to the page:

document.querySelectorAll("h2, h3, h4, h5, h6").forEach(function(heading) {
  heading.addEventListener("click", function() {
    var content = this.nextElementSibling
    content.style.display = content.style.display === "none" ? "block" : "none"
  })
})
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.