1

I have some elements with display:none; in the CSS and some jQuery that will fade them in on a delay.

How can I handle browsers that have javascript turned off? Is there some way of using <noscript> to change those elements display values?

Improve this question
5
  • Well think about it for a moment. How would you run script in a noscript tag, when scripting is disabled? Commented Nov 27, 2012 at 21:34
  • can't you put CSS to override those values in a noscript tag? Commented Nov 27, 2012 at 21:34
  • Depends. Why do you fade in those elements, instead of having them visible from the beginning? Commented Nov 27, 2012 at 21:34
  • Is there a CSS option of setting display:block; if there is no javascript enabled? Commented Nov 27, 2012 at 21:35
  • The way to do this and avoid flickering on page load and problems with javascript being disabled, make the elements visible, and right below the elements add a script tag where you add the native javascript element.style.display = 'none', as using jQuery will make the elements visible for a moment until jQuery is loaded etc. Commented Nov 27, 2012 at 21:39

3 Answers 3

Reset to default
2

You can't set a CSS value without a script, but you could have the default as being the visible state, and the first thing you do in the script is immediately set the elements to the non-visible state before fading them on.

You could also look at CSS Animations http://www.w3.org/TR/css3-animations/ which don't require JavaScript, but they do need a modern-ish browser http://caniuse.com/css-animation

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks it seems to work great with minimal flickering by hiding the elements first in my jQuery in the $(document).ready function then running my animation. I thought this would flicker but I guess I'm not hiding many elements. Need to test in IE yet though.
@Jamesking56 I vaguely recall from doing something similar a while back that if your script executes early enough, (if onload is too late, maybe at the foot of the <body>, which is before onload fires) that you will not get any flicker.
IE7 was giving me a hell of a lot of problems doing it that way so I preferred to do it using CSS thanks to modernizer.
1

If you use modernizr, it will insert the class js into your <html> tag (if Javascript is running of course), and by having the html structure proposed by HTML5 boilerpate:

<!--[if lt IE 7 ]> <html class="no-js ie6 ie"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7 ie"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8 ie"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9 ie"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class="no-js">
<!--<![endif]-->

By default you will have <html class="no-js">, and you could potentially have certain things (that you are worried about being exposed that normally JS hides) in your css to by default use it as a parent selector to hide it.

.no-js .whatever, .no-js .someOtherStuff { display: none; } <!-- just an example -->
Improve this answer

2 Comments

As I'm using modernizr anyway, this was the best option in the end. Using .no-js to show elements that are faded in at a certain time anyway was the best way around the javascript disabled issue. Thanks!
Glad to help James! Glad you brought this up, haha, i'll have to consider doing this for certain things myself.
0

Set the css property to display the elements and then if javascript is enabled, use javascript to close / hide the elements. However, I don't like doing this because the number of users with javascript enabled far out weighs users without javascript. You don't want to force the bulk of your users to wait for the page to load all the elements and then hide them when they have already had a peak at the content.

You want the users that are actually using your webpage the way you designed it, to have the best experience they can. The web is so feature rich in javascript, jquery and other libraries that the users without javascript are used to not getting the experience the web developer intended. If I feel that I really have a soft spot for the users without javascript, I will redirect them to to a static page. Them and the web crawlers will have fun together.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.