Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #45081
    CodeGraphics
    Participant

    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.

    #136287
    CodeGraphics
    Participant

    Ok. But I used this:

    and it worked. What do you think?

    #136288
    CodeGraphics
    Participant

    >

    #136289
    CodeGraphics
    Participant

    #136290
    CodeGraphics
    Participant

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

    >

    #136291
    CodeGraphics
    Participant

    Can’t get this to display my codes.

    >

    #136292
    CodeGraphics
    Participant


    #136300
    CrocoDillon
    Participant

    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/ )

    #136312
    CodeGraphics
    Participant

    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.

    #136314
    derElch
    Participant

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

    #136315
    Paulie_D
    Member

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

    It won’t wait for a page load though.

    #136330
    CrocoDillon
    Participant

    > What you think.

    I like to keep CSS external :)

    #136365
    CodeGraphics
    Participant

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

    #136373
    theacefes
    Member

    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.

    #136397
    CrocoDillon
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.