Show an element... unless the user has javascript turned on, then fade it in nice and pretty?

Question

I have an element which shows important text to the user, as such I'd like to animate it in to the pane (motion draws the eye) rather than just have it somewhere where the user may miss it.

How can I have it showing by default (for the 1% or so of users who surf with javascript off), but animated in for the rest?

Using

    $(document).ready(function(){
        $('#messagecenter').hide();
        $('#messagecenter').show('fade', 'slow');
    })

Causes the element to load visible, then disapear, then fade.

display:hidden;


    $(document).ready(function(){
        $('#messagecenter').show('fade', 'slow');
    })

Will of course hide it for users with no Javascript.

Is there any good way to do this?

score 3 · Accepted Answer · answered Apr 12 '11 at 20:42

Simple way: have the content hide for JS-enabled users immediately after including it in the page, rather than waiting for the entire document to load:

<div id="messagecenter">Albatross!</div>
<script type="text/javascript">
    $('#messagecenter').hide();
    $(document).ready(function() {
        $('#messagecenter').show('fade', 'slow');
    });
</script>

This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:

Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:

<head>
    <style type="text/css">
        body.withjs #messagecenter { visibility: hidden; }
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#messagecenter').show('fade', 'slow');
        });
    </script>
</head>
<body>
    <script type="text/javascript">
        $(document.body).addClass('withjs');
    </script>
    ...
    <div id="messagecenter">Albatross!</div>

(I am up voting you for the monty python reference as much as I am for the good solution) — Chris Sobolewski, Apr 12 '11 at 21:07

score 2 · Answer 2 · answered Apr 12 '11 at 20:15

2

You can go with your second option of using display: none;, and include your text again inside a noscript tag.

Not exactly the cleanest thing though, since you'll be duplicating your element/text.

answered Apr 12 '11 at 20:15

wsanville

37,158
8
76
101

A `noscript` tag in the body passes the W3C validator with a HTML5 doctype. I haven't found a reputable source saying that it is deprecated. – wsanville Apr 12 '11 at 20:23
1

The purist in me appreciates his effort. It shouldn't be a requirement to have JavaScript in order to run and use your site. JavaScript is the candy coating on your nut of content and chocolate of CSS. It's great when it's there, but take it away and your M&M should still be delicious. I'm hungry... what was I talking about again? – Adam Terlson Apr 12 '11 at 20:31
I checked after you posted this answer and indeed it is not. I will have to weigh this backend solution against the front-end solutions presented here as they both have pros and cons for my particular situation... – Chris Sobolewski Apr 12 '11 at 21:06

score 1 · Answer 3 · answered Apr 12 '11 at 20:16

1

Easiest answer: Don't wait for document.ready to show it. Just put that code at the bottom of your <body> and it should hardly be noticeable.

Be sure to chain your queries too.

$('#messagecenter').hide().fadeIn('slow');

answered Apr 12 '11 at 20:16

Adam Terlson

12,610
4
42
63

I'd have to test this over the network, but on my local webserver, this performs about the same. – Chris Sobolewski Apr 12 '11 at 20:21
It varies by case. I've found it sufficient in my own situations. If it's not working, consider putting it right after your div. `
` – Adam Terlson Apr 12 '11 at 20:25

score 1 · Answer 4 · answered Apr 12 '11 at 20:19

1

Always use the <noscript>...</nosript> tag for those 1% users.

And keep the code for the normal users untouched.

answered Apr 12 '11 at 20:19

Robin Maben

22,194
16
64
99

Show an element... unless the user has javascript turned on, then fade it in nice and pretty?

4 Answers4