Grow your CSS skills. Land your dream job.

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

    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:

    # 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

    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 ($) {
    $(‘#alex’).addClass(‘hidden’);
    });

    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:

    (function(h){h.className=h.className.replace(/bno-jsb/,’js’)})(document.documentElement)

    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 http://timkadlec.com/2012/04/media-query-asset-downloading-results/ )

    # May 24, 2013 at 5:22 am

    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.

*May or may not contain any actual "CSS" or "Tricks".