CODEWITHSUNDEEP
cssjavascript
Xtian
Xtian

Reputation: 3587

Javascript Disabled - Use Different stylesheet?

I have a jquery slider that works great with a few pictures. The client would like the pictures to stack in a downward fashion when JS is turned off. The problem is I have a title for each picture that is a link to an article. The titles for each picture when JS is turned off is now only at the bottom picture.

Is there some way to style a page only when JS is turned off? So, Javascript is disabled, use this style for this section??

Upvotes: 2

Views: 1201

Answers (3)

epascarello
epascarello

Reputation: 207511

Other solution to adding a class to the body is to document.write the other stylesheet into the page.

Upvotes: 0

Quentin
Quentin

Reputation: 943585

Use progressive enhancement instead. It is a safer approach.

  1. Write HTML that works by itself
  2. Write CSS to style it nicely
  3. Write JavaScript and CSS to make it interactive in the way you want
    • You can add the CSS with JS by appending a new <link> element
    • You can cause CSS in the preexisting stylesheet to start applying to the elements by adding a class name to their container.

Upvotes: 5

Daniel A. White
Daniel A. White

Reputation: 190943

Why not use javascript to add additional CSS either by jQuery's addClass or loading up a new style or link tag?

Example using jQuery:

$('body').addClass("scriptEnabled");

CSS:

#mysection {
   color: red;
}

body.scriptEnabled #mySection {
   color: blue;
}

Upvotes: 3

Related Questions