Will Braswell Will Braswell - 3 months ago 10
Perl Question

CSS & Javascript, Need Hide Auto-Generated HTML By Default

I am writing a free online e-book which needs a few minor formatting tweaks:

http://rperl.org/learning_rperl.html

The "Full Table Of Contents" at the very top of the page starts out by being visible for a few seconds, then finally collapses itself to be hidden. What we need is for it to start as hidden, and not be visible at all for the several seconds while the page loads. You can see that I have already tried to solve this issue by setting "var index_hidden=1;" at the following link, otherwise the table of contents would never hide itself at all:

https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833

It probably shouldn't matter, but I'm using some custom Perl scripts to generate this file from Perl POD source, I can give more info if needed.

Answer

Although the described behavior does not appear for me (OSX + Firefox). Here's what you might do:

Hide the element by default using CSS. Add this to your head element (extend with stronger hiding CSS when needed).

<style>.wait-for-js { display: none; }</style>

And hide your element by adding the class

<div id="index-container" class="hide-index wait-for-js">

Last but not least, to make this trick functional. Remove the class as soon as JS is loaded, which would also mean that other logic has been loaded and you're save to show the table of contents. Be sure to load this JavaScript last thing you'll do.

<script>
    document.getElementById('index-container').className = 'hide-index';
</script>

Or if you're using jQuery

<script>$('.wait-for-js').removeClass('wait-for-js');</script>

Welcome to SO!

Comments