HTML/CSS/JavaScript

Ankh, dorward: Thanks for your comments. For a sloth like me, it's not easy to once again overhaul the entire site to make it XHTML - I'll let it remain at HTML 4.01 for the time being. By the way dorward, I did not know until very recently that unlike XML, things like "<br/>" are not valid HTML elements. I used to insert "<br/>", "<p/>", "<hr/>", etc. liberally throughout my pages mistakenly thinking it's the "right" thing to do.

A rant: I don't know much of HTML/CSS/JavaScript, but I really wish for the ability to "#include" files (for example, for page headers and footers) and to define macros (for example, to generate a news item's headline and content elements linked to each other). I know these can be overcome by using JavaScript and document.write(), but that's a kludge. I also know that these can be achieved on the server, but I do not want to depend on it - I keep moving my website from one (free) provider to another and I also like it to behave exactly the same way when accessed from my local filesystem as from a remote server. Note that we already have inclusion mechanisms for external stylesheets, scripts, etc. so this is not something too difficult to provide.

Now on to something that I hope you HTML/CSS/JavaScript gurus can help me with: I'm trying to implement a handy expandable/collapsible news entries mechanism for my website somewhat similar to what is explained in this article. I have already implemented most of what I want and it can be seen in action on my site, but it's not "right". In particular, I want this system to behave properly whether JavaScript is enabled or not and whether stylesheets are enabled or not, that is, under the following conditions:

1. JavaScript enabled, Stylesheets enabled
   
2. JavaScript disabled, Stylesheets enabled
   
3. JavaScript enabled, Stylesheets disabled
   
4. JavaScript disabled, Stylesheets disabled
   

My implementation works right now under #1.

For doing #2, I make the stylesheet actually declare "hidden" elements as visible, but then use JavaScript attached to the "onload" event of the page to turn them invisible - if the user doesn't have JavaScript enabled, he still gets to see all the content properly. Note that I cannot use the alternative suggested in the article I have linked to; that is, something like:

  <noscript>
    <style type="text/css">
      .hidden { display: block; }
    </style>
  </noscript>

does not work since the W3C validator rejects it - NOSCRIPT cannot occur inside HEAD, but STYLE can only occur inside HEAD. The downside of my approach is that there is a short but noticeable and sometimes distracting phase under both IE and Firefox, where the browser loads and renders the full page and then hides the hidden sections. Isn't there a better way of achieving this while still remaining strictly valid?

#3 poses a slight problem in that I wish that even the "togglers" do not appear if stylesheets are disabled. I was thinking of iterating through the stylesheets defined for the document in the DOM and check if all of them are disabled and omit emitting the togglers if they are. Is there a better way of doing this?

#4 is automatically taken care of by the "solution" to #2, since only JavaScript is used to emit the togglers. The user still gets to see the entire contents.

Perhaps I'm just wasting my time as #2 and #3 are unlikely to happen with real visitors to my pages - #1 is what almost all human visitors are likely to have and #4 is what almost all search engine bots are likely to have. This impractical fussing might explain why I have not become a manager. ;-)

(Originally posted on Advogato.)

Tweet