Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Henrique Zafniksi
Henrique Zafniksi
8,560 Points
Posted by Henrique Zafniksi
Henrique Zafniksi
8,560 Points

Hidden jQuery elements displaying before javascript files loads

If we hide elements using jQuery's .hide(), whenever the page loads, the element will appear briefly, while the javascript code hasn't loaded yet.

Now, if we use 'display: none' to hide the element, people without activated JavaScript on their browsers won't be able to see the content desired.

How could we:

  1. Hide elements in a way that they don't appear briefly when page loads.

  2. Do it In a way that people without JavaScript can visualize the hidden element.

Petros Sordinas
Petros Sordinas
16,181 Points
Petros Sordinas
Petros Sordinas
16,181 Points

Hi Henrique,

  1. Instead of hiding elements with jquery on page load, set them as hidden by default with css selectors or inline in html with style="display:none". Then set as visible as needed when the document loads via jquery.
  2. In general, if you site relies heavily on javascript / jquery, it is best to display a message that tells the user to enable javascript. One idea is to add this:
<noscript>
    <style type="text/css">
        .pagecontainer {display:none;}
    </style>
    <div class="noscriptmsg">
    This site needs javascript. Please enable it on your browser.
    </div>
</noscript>

Everything in your site should be wrapped in a div with .pagecontainer class. If javascript is not enabled, then the noscript element will tell the browser to hide everything in the .pagecointainer class (your site content) and instead display an error stating that javascript is not enabled.

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Henrique,

I would be thinking of hiding them using CSS initially, so that on page load the object will not appear regardless of JavaScript. It seems best practice now to utilize what CSS can do prior to using jQuery or raw JavaScript.

So you can in most cases show and hide content with CSS. My personal preference is that if at any time it feels over coded or more of a hack, like using a hidden checkbox to detect a click, then its time to look at jQuery or JavaScript.

For the most part of hiding content it is a bit of a sticky wicket to me for these reasons:

You really do have to way up the importance of the content in relation to accessibility. Could this info you are hiding in a collapsed area for example be overlooked by a blind user with a screen reader and potentially miss out on important info.

As really unhelpful as this next statement may seem it is quite possibly the right way to look at this.

Before you hide the content, ask yourself; does the user "need" to see it to benefit from it?

There really isn't a concrete answer as with many things jQuery Vs CSS it is about each use case individually and what suits the users needs the best :)

I hope this helps in some way to your questions :)

Craig