The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

When there is no Javascript turned on. What other solution?

  • # May 24, 2013 at 3:03 am

    I am working on a website. I have an image that I set to display:none in css. I used javascript to display it and slide it in after page has finished loading. It’s working perfectly.

    I want to launch the website, but I said let me disable javascript on my browser and see what will happen. I reloaded the web page, and the image didnt show at all. This is normal since it has been set to display:none in css.

    Here is my question: What is the solution to this? I want a situation whereby a user will still see the image even when js is disabled in his browser. I dont want the image to slide in at this point, but I want it just to load and show like any other thing on the webpage.

    # May 24, 2013 at 3:21 am

    This reply has been reported for inappropriate content.

    Go with the other direction. Hide it using JS to start with.

    IE, something along these lines: You have your class hide. Rather than starting with the image having the class hide in the HTML, make one of your first JS calls be to apply the class hide to the relevant image(s). That way, if JS is turned off, it still shows.

    # May 24, 2013 at 3:36 am

    Ok. But I used this:

    and it worked. What do you think?

    # May 24, 2013 at 3:36 am


    # May 24, 2013 at 3:37 am

    # May 24, 2013 at 3:38 am

    This is what I finally did, and it worked. Does it have any side effect?


    # May 24, 2013 at 3:38 am

    Can’t get this to display my codes.


    # May 24, 2013 at 3:39 am

    # May 24, 2013 at 4:01 am

    This reply has been reported for inappropriate content.

    To display code, add 4 spaces (at least) in the beginning of each line.

    Yes, that works as well, though my solution has the advantage of less CSS inline. =)

    I would probably do something along these lines:

    In CSS:

    .hidden { display: none; }

    In a JS file (this assumes usage of jQuery, similar concepts apply for other libraries):

    jQuery(function ($) {

    And then you add your codes of displaying it afterwards, however it is you’re doing it, which will include a removeClass('hidden') call.

    # May 24, 2013 at 5:13 am

    I think it’s easier with `` and change that to `class=”js”` using JavaScript, like html5boilerplate, using Modernizr or this short snippet:


    Then you can use `.js img { display: none; }`

    Just a side question, are you using it to delay loading the image or just for some visual effect. I got my doubts delay loading like this works, at least not in MQ (see )

    # May 24, 2013 at 5:22 am

    This reply has been reported for inappropriate content.

    I can’t believe I forgot about Modernizr, especially since that’s really what I’ve done when I’ve been in similar situations.

    # May 24, 2013 at 6:44 am

    Look at what i did. I used css to hide certain image. Then i used javascript/jquery to show the image after page load. But before the image is shown, js will delay it for 5 seconds, then it will slide in from bottom.

    When i disabled js in my browser, the image as expected did not show up at all. But I have used noscript tag to display the image to block.

    @CroCodillon, I think noscript option is far simpler in this case. What you think.

    # May 24, 2013 at 7:26 am

    what would be with HTML5 / CSS3 options?
    give the image a class, let it slide in from an hidden area.

    # May 24, 2013 at 7:27 am

    Position it absolutely off the screen and animate it in with Keyframes.

    It won’t wait for a page load though.

    # May 24, 2013 at 8:55 am

    > What you think.

    I like to keep CSS external :)

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed