noscript tag and CSS

Legacy Dynamo
1

When content is initially hidden on load (ex. an accordion) with js
and CSS what’s the best technique to reference alternate CSS (possibly
an external 'sheet and not inline) to ensure the content is still
visible when js is disabled and still have, if possible, valid xhtml?

From what I’ve found the noscript tag seems to be the goto solution
and one hack I found is,

<head>

<object>
<noscript><link rel="stylesheet" type="text/css" media="screen"  
href="css/noscript.css"/></noscript>
</object>

</head>

but this flies-in-the-face of W3 specs for a few obvious reasons and
throws (amazingly) only one error. I can live with this solution but I
would like it if there were a valid alternative. Anyone have another/
better suggestion?

Todd

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

The simplest way to manage this is to do all your initial hiding with JavaScript. That way your unscripted visitors see everything expanded, and those with scripting enabled see your effect. If you’ve already got Prototype in the page, and you’ve applied a classname to the items that need to be initially hidden, then you could do this:

$$('.collapse').invoke('hide');

in a script block at the bottom of your page source, just before the closing body tag.

This class doesn’t need to be defined in your css, it just needs to be applied to any block-level element you want Prototype to hide on page load.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

[Moo]

Here’s the accordion code as it is currently:

window.addEvent('domready', function() {

    //create our Accordion instance
    var myAccordion = new Accordion($('accordion'), '.graphic',  
'.sub_menu', {
		display: -1,
		alwaysHide: true,
		opacity: true,
    });

});

The problem is that the accordions flicker on load so I had to add add
CSS (in this case, opacity: 0) to ensure the flicker is completely
hidden. It all works, but if I disable js the content is still
invisible which is why I needed a way to reverse the opacity in the
stylesheet and the tag was, in most ways, a decent fix.

Todd

On Dec 15, 2009, at 5:23 PM, waltd wrote:

The simplest way to manage this is to do all your initial hiding
with JavaScript. That way your unscripted visitors see everything
expanded, and those with scripting enabled see your effect. If
you’ve already got Prototype in the page, and you’ve applied a
classname to the items that need to be initially hidden, then you
could do this:

$$('.collapse').invoke('hide');

in a script block at the bottom of your page source, just before the
closing body tag.

This class doesn’t need to be defined in your css, it just needs to
be applied to any block-level element you want Prototype to hide on
page load.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Have a look at moo for how to apply a function to multiple items. I bet it’s not far from the Prototype syntax I listed earlier. (moo forked away from prototype somewhere around prototype 1.1 or so.) Add that as the first line inside your window.addevent closure, and see if it helps. If you do that, you should be able to do away with the css opacity kluge.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options