Rectangle 27 5

To hide everything before page load with Chrome Extension

run_at

Include it in manifest

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["content_script.js"],
        "run_at": "document_start" //<-This part is the key
    }
]
content_script.js
_ini();

function _ini(){

    document.getElementsByTagName("html")[0].style.display="none";

    window.onload=function(){

        //do your stuff

        document.getElementsByTagName("html")[0].style.display="block"; //to show it all back again

    }

}

as @Xan commented document.body is not yet constructed during the load of content_script.js so we target the <html> tag

Just a heads up for anyone using this, //-style comments in a JSON are a syntax error. It's here for highlighting, but don't copy the code as is.

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 5

To hide everything before page load with Chrome Extension

run_at

Include it in manifest

"content_scripts": [
    {
        "matches": ["*://*/*"],
        "js": ["content_script.js"],
        "run_at": "document_start" //<-This part is the key
    }
]
content_script.js
_ini();

function _ini(){

    document.getElementsByTagName("html")[0].style.display="none";

    window.onload=function(){

        //do your stuff

        document.getElementsByTagName("html")[0].style.display="block"; //to show it all back again

    }

}

as @Xan commented document.body is not yet constructed during the load of content_script.js so we target the <html> tag

Just a heads up for anyone using this, //-style comments in a JSON are a syntax error. It's here for highlighting, but don't copy the code as is.

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 1

The existing answers are correct in most cases, but I want to give more context about the implications of the used methods. The recommended method to hide the page until you are ready is:

{
    ...
    "content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["contentscript.js"],
        "run_at": "document_start"
    }],
    ...
}
document.documentElement.style.visibility = 'hidden';
document.addEventListener('DOMContentLoaded', function() {
    // ... do something ... and then show the document:
    document.documentElement.style.visibility = '';
});

You should not use display = 'none', but visibility = 'hidden', as suggested by Parag Gangli for. The reason for preferring visibility:hidden over display:none is that visibility does not affect any dimensional properties of an element. When an element is set to display:none, then the element and all of its descendant nods will have a width and height of 0. This could break several pages that rely on calculations involving the dimensions of an element in the document tree.

Another consequence of toggling display:none is that scroll positions and anchors (#id-of-something) are broken. The browser will no longer jump to the anchor or previous scroll position, but show the page at scroll position (0,0). This is highly undesirable.

document.body does not exist when "run_at": "document_start" is set, so it cannot be used. document.getElementsByTagName('html')[0] works, but can more concisely be written as document.documentElement (= the root of the document).

window.onload will only be triggered when all resources (images, frames, etc.) are fully loaded. This can take a while, so it is a bad idea to hide the whole page until the window.onload event is triggered.

In most cases, your extension only depends on the document structure, so modifying the document and showing the document at the DOMContentLoaded event suffices.

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 1

The existing answers are correct in most cases, but I want to give more context about the implications of the used methods. The recommended method to hide the page until you are ready is:

{
    ...
    "content_scripts": [{
        "matches": ["*://*/*"],
        "js": ["contentscript.js"],
        "run_at": "document_start"
    }],
    ...
}
document.documentElement.style.visibility = 'hidden';
document.addEventListener('DOMContentLoaded', function() {
    // ... do something ... and then show the document:
    document.documentElement.style.visibility = '';
});

You should not use display = 'none', but visibility = 'hidden', as suggested by Parag Gangli for. The reason for preferring visibility:hidden over display:none is that visibility does not affect any dimensional properties of an element. When an element is set to display:none, then the element and all of its descendant nods will have a width and height of 0. This could break several pages that rely on calculations involving the dimensions of an element in the document tree.

Another consequence of toggling display:none is that scroll positions and anchors (#id-of-something) are broken. The browser will no longer jump to the anchor or previous scroll position, but show the page at scroll position (0,0). This is highly undesirable.

document.body does not exist when "run_at": "document_start" is set, so it cannot be used. document.getElementsByTagName('html')[0] works, but can more concisely be written as document.documentElement (= the root of the document).

window.onload will only be triggered when all resources (images, frames, etc.) are fully loaded. This can take a while, so it is a bad idea to hide the whole page until the window.onload event is triggered.

In most cases, your extension only depends on the document structure, so modifying the document and showing the document at the DOMContentLoaded event suffices.

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 1

Since you don't want to delete the data and just hide everything, use :

document.body.style.visibility="hidden";

This will hide all the stuff from the page.

the effect is the same as display="none". what I would like to achieve is the whole page remains white until the page has loaded and my script has been executed. no element should show up as much as possible.

run_at
document_start
manifest

@ParagGangil If I remember correctly, document.body is not yet constructed at that point..

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 1

Since you don't want to delete the data and just hide everything, use :

document.body.style.visibility="hidden";

This will hide all the stuff from the page.

the effect is the same as display="none". what I would like to achieve is the whole page remains white until the page has loaded and my script has been executed. no element should show up as much as possible.

run_at
document_start
manifest

@ParagGangil If I remember correctly, document.body is not yet constructed at that point..

javascript - How to hide everything before page load with Chrome Exten...

javascript google-chrome-extension
Rectangle 27 2

$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {      
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

Works fine except that div.content1 should be visible on page load.

ok works .. Thanks .. +1 and tick :)

javascript - Show first div on page load and hide others and then show...

javascript jquery css html
Rectangle 27 2

It seems like there is something missing in your code because there is no relation between the links and div you want to show. you will require more attributes on to maintain a relations between them.

A better approach would be apply a common class to all div like 'content-block' and class equal to use following code.

$(".content-block:not(:first)").hide();
$("#menu li").click(function(e){    
 $(".content-block").eq($(this).index()).show();
});

you can use other parameters as well to relate them instead of index.

.content-block:not(:first)
$(".content-block").hide()
$(".content-block:eq(0)").show()

I tried your solution, but does not work for me. Demo link below. jsfiddle.net/6uzU6/4 - @Swati

I dont see any fiddle updated by you. I assume you have forgot to link it. - @Swati

javascript - Show first div on page load and hide others and then show...

javascript jquery css html
Rectangle 27 1

Also Found that the slides flash before loading and display stacked down the page with list item bullets.

Only for a second. Then it worked fine. I didn't realize I hadn't included the flexslider.css file because I had already turned of any navigation that would have shown broken nav img links.

javascript - How to hide images until AFTER jquery flexslider finishes...

javascript jquery flexslider woothemes
Rectangle 27 1

If your aim is to add the class to body immediately as the page is loaded, perhaps to hide no-JS-fallback elements, you could do that just immediately inside the body tag rather than waiting for any events:

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(although in general if that's the aim it's better to remove the fallback elements as you go along replacing them with scripted elements, so that if one piece of script errors out all the other components on the page don't break.)

This is the fastest way to bind to elements: do so just immediately after creating them (inside the open tag if you only need to alter the elements; just after the close tag if you need to alter their contents). However this approach does tend to litter the page with ugly <script> blocks, which is why more people put the code all at the bottom or use an load/ready-handler.

javascript - How can I detect DOM ready and add a class without jQuery...

javascript jquery
Rectangle 27 1

If your aim is to add the class to body immediately as the page is loaded, perhaps to hide no-JS-fallback elements, you could do that just immediately inside the body tag rather than waiting for any events:

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(although in general if that's the aim it's better to remove the fallback elements as you go along replacing them with scripted elements, so that if one piece of script errors out all the other components on the page don't break.)

This is the fastest way to bind to elements: do so just immediately after creating them (inside the open tag if you only need to alter the elements; just after the close tag if you need to alter their contents). However this approach does tend to litter the page with ugly <script> blocks, which is why more people put the code all at the bottom or use an load/ready-handler.

javascript - How can I detect DOM ready and add a class without jQuery...

javascript jquery
Rectangle 27 1

If your aim is to add the class to body immediately as the page is loaded, perhaps to hide no-JS-fallback elements, you could do that just immediately inside the body tag rather than waiting for any events:

<body>
    <script type="text/javascript">
        document.body.className+= ' javascript';
    </script>

(although in general if that's the aim it's better to remove the fallback elements as you go along replacing them with scripted elements, so that if one piece of script errors out all the other components on the page don't break.)

This is the fastest way to bind to elements: do so just immediately after creating them (inside the open tag if you only need to alter the elements; just after the close tag if you need to alter their contents). However this approach does tend to litter the page with ugly <script> blocks, which is why more people put the code all at the bottom or use an load/ready-handler.

javascript - How can I detect DOM ready and add a class without jQuery...

javascript jquery
Rectangle 27 0

If you set style="display:none;" on the element, then later with jquery you can call the .show method to make them appear.

I did it for the body { display: none } and use $('body').show() after everything is done. Thanks!

javascript - How to hide HTML elements before they load on the page - ...

javascript jquery sharepoint
Rectangle 27 0

What you could do is insert a inline script tag at the end of the document, or immediately after the div with id "extraControls". Should be fire a little sooner than.

<div id="extraControls">i want to be invisible!</div>
<script type="text/javascript">$("div#extraControls").hide()</script>

Of course you could do this server-side as well, but maybe there's a good reason you don't want to do that (like, have the controls visible if the browser does NOT support javascript).

javascript - How do I hide an HTML element before the page loads - Sta...

javascript jquery html
Rectangle 27 0

#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;    
}


 <a href="#" onclick="return false;">Expand Me</a>
 ///this way u can make a link to act like a button too

 <div id="toggleMe">  //this will be hidden during the page load
  //your elements
 </div>

///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
 $(document).ready(function () {
        $("a").click(function () {
            $('#toggleMe').toggle("slow"); //Animation effect
        });
    });
</script>

///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...

javascript - How do I hide an HTML element before the page loads - Sta...

javascript jquery html
Rectangle 27 0

You could load everything on the page into the webview, and then run a bit of javascript to hide everything but the div and the contents thereof. This stackoverflow question(well, really, the answer) looks like it would help you accomplish that. If the page is not large, this could be the way to go, as styling would be preserved as a nice side-effect.

iphone - dynamically populate a uiwebview with a certain div class of ...

iphone html objective-c ios uiwebview
Rectangle 27 0

You could create a css rule to hide the second list for example:

.hidden-list {
    visibility: hidden
}

If after loading you want to see the second list, just listen to the ready event and remove the class.

$(document).ready( function($) {
    $('ul').removeClass('hidden-list'))
    // Do something else if needed
});

I already have display:none in the second menu

javascript - hide div while the page is loading - Stack Overflow

javascript jquery html css
Rectangle 27 0

Set style attribute to value "display:none;" for all paginated items (excluding the items for page 0). It'll force browser to hide them while JavaScript is been loaded.

javascript - jQuery Pajinate - everything is showing on page load - St...

javascript jquery jquery-plugins pagination jquery-pagination
Rectangle 27 0

Using CSS to hide an element, then use JavaScript to show the element on page load is the correct way and it should work in Internet Explorer as expected. The element should be hidden initially.

However, if the stylesheet containing the #deactivate { display: none; } rule is present inside the body, the browser will start rendering content until it encounters the stylesheet which instructs that the deactivate block should be hidden.

Secondly, you mention that you want to show the content on load but your jQuery code uses the document.ready event which is different from window.onload and fires earlier:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page). (source)

I would suggest inlining this particular CSS rule for best results and use window.load event which waits until all resources are downloaded:

<html>
<head>
    <style>
    #deactivate { display: none; }
    </style>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="deactivate">
        <h1>Hidden Content</h1>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(window).on("load", function() {
            $("#deactivate").show();
        });
    </script>
</body>
</html>

Note that if CSS is hiding the element by default, and JS is later showing it, if a user has JavaScript disabled, they will not be able to see the element at all. This may have negative implications for search engine optimization. See my answer for a way around this issue.

You can use JavaScript to "write" the CSS that hides the elements. It is straight forward.

You could, but addClass/removeClass is better. It separates styles from content/scripts.

jquery - Processing Order for HTML and CSS in IE9 - Stack Overflow

jquery html css internet-explorer internet-explorer-9
Rectangle 27 0

A solution is to use javascript to include an optional CSS file in which you hide those divs.

Put this in your HEAD section :

<script>document.write('<link rel="stylesheet" type="text/css" href="hiding.css"/>');</script>

And in hiding.css :

div.mySelector {
   display:none;
}

If you don't have additional css to set, you may also more simply inline the css rule in javascript (still in the HEAD) :

<script>
document.write('<style type="text/css">div.mySelector {display:none; }</style>');
</script>

If Javascript isn't available, the divs won't be hidden. And if it is available, the CSS will be used to hide the div before they're displayed.

I use CSS link generation in javascript in all modern browsers and I don't see why there would be incompatibilities in older ones.

javascript - What is the correct way to hide HTML elements on page loa...

javascript jquery html5 dom hide