Search code examples
javascriptjqueryhidejquery-events

Add a class name to element immediately this element is loaded

I have an element which has to be hidden when JavaScript is enabled. The current code seems like this:

<body>
    ...
    <div id="js-hidden"></div>
    ...
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function() {
            $('#js-hidden').hide();
        })
    </script>

There is the problem, the js-hidden div is visible since the rest of page (and JavaScripts) are loaded.

Can I hide that earlier? This solution is so bad for me, JS user can´t see this element.

PS: I've written the example with using jQuery, it can be in plain JS too, of course :-)

Solution

  • $(document).ready makes it happen after full page loaded you can use

    <body>
    ...
    <div id="js-hidden"></div>
    ...
    <script src="jquery.js"></script>
    <div id="js-hidden"></div>
    <script>

            $('#js-hidden').hide();

    </script>