JavaScript Required Content with Fallback Content

JavaScript-required area is hidden with inline CSS, and then shown after it loads with a small snippet of JavaScript. Below that, noscript tags are used for fallback content. So only one or the other of these bits of content will be required depending on if JavaScript is enabled or not.

<!-- JavaScript-Required Content -->
<div id="photoslider" style="display:none">Javascript photoslider</div>
<script>document.getElementById('photoslider').style.display='';</script>
<!-- END JavaScript-Required Content -->

<!-- Fallback Content -->
<noscript><div id="photo">Alternative static photo as content when javascript is turned off</div></noscript>
<!-- END Fallback Content -->

Comments

  1. User Avatar
    Rob Ratcliff
    Permalink to comment#

    This code makes me happy! So simple, but so effective!

  2. User Avatar
    stine
    Permalink to comment#

    Nice tip! thanks

  3. User Avatar
    Becky
    Permalink to comment#

    Chris,

    You and this site are always coming to my rescue! FYI – I just tried this with a WordPress slideshow. I added the ‘noscript’ tags with a standard image under the slideshow shortcode in the standard editing page and it worked like a charm.
    Thanks!

  4. User Avatar
    Miles
    Permalink to comment#

    Hi Chris
    I was wanting to use a simple slideshow on a homepage but was concerned about the ‘no javascript available’ scenario. This simple piece of code leaves me with a great first choice image even if the slideshow doesn’t run.

    many thanks for this

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag