Working with jQuery extensible content if javascript is disabled

Question

I have a messaging tool on a website that I am currently working on. The idea is for each message to have a div div and div (display = "none").

Ideally, if javascript is enabled, I only have a title that displays, and when the user clicks on it, the slide opens.

This is great, but how should I work if javascript is disabled? I was thinking about expanding all the messages if disabled, but I don't want to flash briefly when the page loads from all the images, and if javascript is turned on, they crash.

I am using ASP.NET and was thinking about checking javascript status on the server side of the browser, but I found out that this cannot be done cleanly.

Any suggestions on how to achieve this?

Answer 1

In fact, the most semantically correct way you could do this is to add another stylesheet to your head through javascript, containing styles that will be implemented if javascript is enabled.

In your example, you will keep the default display for the items in question.

Then you will create an additional stylesheet (e.g. js-enabled-styles.css) and place your screen: none inside this.

Then, in the script tag in your head, you add an extra stylesheet. With jquery, this will be:

$('head').append('<link rel="stylesheet" href="js-enabled-styles.css" type="text/css" />');

Answer 2

One option is to place this in your head (after certain styles):

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

EDIT: , .

Answer 3

, , JavaScript, , .

, , onready onload, JavaScript, . , .

<div id="foo">
    asdf
</div>
<script type="text/javascript">
    jQuery("#foo").css("display","none");
</script>

, , div. , , .

Answer 4

, <noscript>.

You can achieve the result that you describe in one of several ways, but here is quite simple. Define a default style for divas follows:

<style type="text/css">
     div.details
     {
         display: none;
     }
</style>

And after this tag, styleuse a block noscriptto override the default style (JavaScript):

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