Page is a not externally linkable
ronin - 4:13 pm on Oct 18, 2010 (gmt 0)
Thanks Fotiman and rainborick - very much appreciated! >;->
JavaScript doesn't provide a way to set the style on a collection of elements using a simple syntax
Ah. That's where I was going wrong then. I work almost exclusively in HTML and CSS and my lack of familiarity with javascript led me to guess that it would be possible to formulate CSS style declarations in .js syntax. Live and learn.
Another approach you might consider would be to use JavaScript to attach a class to the body element. For example, you might attach a class "jsEnabled". Then in your CSS, you could do:
.jsEnabled .collapsed-div .article {display:none;}
Ah... yes, this is a brilliant solution.
This led me to realise that there are three types of solutions which might solve this generic type of problem where the developer wants a CSS style to apply to elements only if the user-agent can read javascript:
1) Hard-code the CSS class-name into the elements on the .html document and dynamically apply style attributes to the CSS class using javascript.
2) Hard-code the CSS class style attributes into the .css document and dynamically append the CSS class to the elements on the .html document using javascript.
3) Hard-code the CSS class style attributes into the .css document but specify that the styles only apply when that CSS class follows a parent class (such as "jsEnabled") - and then dynamically append that parent class to the <body> element on the .html document using javascript.
And a fourth solution occurs to me too:
4) Hard-code the [open-div] CSS class-name into the elements on the .html document and hard-code the [collapsed-div] CSS class style attributes into the .css document (without a parent selector class)... and then dynamically cycle through and change all instances of [open-div] on the .html document to [collapsed-div] using javascript. That way the <div>s are intially set to [open-div] and re-initialised to [collapsed-div] only if the user-agent can read javascript. (In all other methods, the <div>s are initially set to [collapsed-div] even though the activation of the collapse behaviour is contingent on javascript being enabled).
At the moment I am favouring method 3) - though I am wondering if method 4) would be more elegant, neither requiring an additional class in the .css stylesheet, nor requiring hardcoded styles in the .html document which are semantically misleading.
Speed of course is the primary priority, so I will split-test methods 3) and 4) and see which one yields the fastest load times.