How much I need to consider the seneraio of JavaScript disabled?

JavaScript
21

great discussion

i have one more points I will go for suggestion given by

@Mittineague
"

      Instead of using noscript tags you could have something like 

<div id="js_message">This site works better with JavaScript enabled</div>

then use JavaScript to display: none it
"
Qustion is how can i display a message that pop-up on the top whethar page is scrolling up and down that message should be there always?

thanks

22

It’s always good to have a functional page without JS, since it’s really the content that matters in the end. Even if you want a form to work with Ajax, it should leverage a backend technology anyway, and thus work without JS.

Remember that having JS off is not the main issue. I’m putting it in bold because it’s so often forgotten or ignored. JS can also fail for various reasons, even when enabled. On slow or dodgy connections it can fail; on weaker devices/OSs it can fail. Etc. And it often does.

Many people scoff at this issue because they think it’s all about snooty people who have JS off, but that’s just plain wrong. It’s a much bigger issue than that.

2 Likes
23

So what is good parctice in web development.?

I am using JSP in backend so do I need my code to depend on jsp more and javascript less?

Can you clear it a bit more?

Thanks

24

Not necessarily use JS less, but just think of how things might be able to work if JS isn’t available. At least make sure all content is available in some way without JS. That’s the main priority for me. JS is best as an enhancement layer, adding nicer functionality to an already working page. So, for example, if you have a slideshow script, you can first make sure images can be viewed without JS, even if it’s a bit of a clunky process (going to a new page to view an enlarged image, for example); but with JS available, you can turn that into a nice lightbox effect, for example.

2 Likes
25

Thanks @ralphm

26

If your page is something simple, like a blog, then it should be useable with JS disabled.

But if you have any kind of functionality on the page, then there’s really no good reason to spend valuable time catering to them or sacrificing features for them. Users with disabled JS are usually an extremely low portion of visitors.

I’m on my phone, but a better technique is to put a script in the <head></head> that adds a CSS style in the head to hide it. That way you don’t run the risk of any content flashing before loading.

27

The following one line script in the head:

document.getElementsByTagName('html')[0].class += ' js';

allows the CSS to decide what to display when JavaScript is not available and what to display when it is.

If you want to check for more than just availability of JavaScript then scripts like modernize add more classes to the html tag to allow you to test for which JavaScript commands are available using CSS.

1 Like
28

This is what I use:

;(function(){var a=document.createElement("style");a.innerHTML="#enable-js{display:none}",document.head.appendChild(a)})();
1 Like
29

Thanks
@mawburn

30

I’m curious - why not go with the seemingly simpler activity of removing the appropriate DOM element directly?

(function () {
    function removeElement(el) {
        el.parentNode.removeChild(el);
    }
    removeElement(document.getElementById('enable-js'));
}());
2 Likes
31

Didn’t think of it.

32

That’s fine when there is only the one element you want to have change based on the presence or not of JavaScript.

With one line of JavaScript adding (or removing) a class on the html tag you can completely change the entire page content and layout simply based on the CSS.

33

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.