Forums

Give help. Get help.

  • # 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: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 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 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 :)

    # May 24, 2013 at 1:00 pm

    Ok. But in this case, it’s just one line of inline css.

    # May 24, 2013 at 2:45 pm

    It may be just one line but if you let bad habits creep in once, twice, then the next thing you know you have a web project littered with inline styles because you couldn’t bother to externalize the different aspects of your site properly.

    # May 24, 2013 at 5:26 pm

    What he said, plus it’s easier to organize your CSS if it’s actually in one place instead of having styles all over the place which makes it harder to maintain and more error prone. By the way internal styles are not the same as inline (as in style attribute) styles, but that’s a sidenote :)

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

You must be logged in to reply to this topic.

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