Hide elements until page is fully loaded - javascript

I want a vanilla JS code that hides all page elements (except the loading spinner) untill page is fully loaded, and then deletes or hides the loading spinner element. My code does a good job at hiding the spinner once the page is loaded, but I couldn't accomplish the other part. It looks like this:
function hideloader() {
document.getElementById("loading").style.display="none";
}
<html>
<head>
<title>My Title</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<script src="script.js"></script>
</head>
<body onload="hideloader()">
<div id="loading">
<!--All loading spinner design goes here-->
Loading...
</div>
<header>
<!--Header stuff-->
<h1>My Title</h1>
</header>
<p>
<!--Main content-->
My content
</p>
<footer>
<!--footer stuff-->
Footer stuff
</footer>
</body>
</html>
Thank you in advance!

In general, it's better not to do this, but instead to design the page so that progressive loading provides some content to the user while waiting for the rest of the page.
But doing it is quite easy: Just put your main content in an element (say, a div) that has a class on it (say, hidden), and remove that class when you want to show it:
CSS:
.hidden {
display: none;
}
JavaScript when you're ready to show it:
document.getElementById("content").classList.remove("hidden");
(classList is supported by all modern browsers; if you need to support old browsers, it can be polyfilled or, to remove all classes, just do .className = "".)
Another approach is to add a class to body when it's loaded, and then classes on the various elements you want to show/hide during load, with CSS like this:
body:not(loaded) .hide-for-load {
display: none;
}
body.loaded .hide-after-load {
display: none;
}
Then .hide-for-load elements are hidden until you add the class, and .hide-after-load elements are hidden when you add the clas.
Live Example derived from your page:
setTimeout(function() {
document.body.classList.add("loaded");
}, 1000);
body:not(.loaded) .hide-for-load {
display: none;
}
body.loaded .hide-after-load {
display: none;
}
<div id="loading" class="hide-after-load">
Loading<!--All loading spinner design goes here-->
</div>
<header class="hide-for-load">
<!--Header stuff-->
<h1>My Title</h1>
</header>
<p class="hide-for-load">
<!--Main content-->
My content
</p>
<footer class="hide-for-load">
<!--footer stuff-->
Footer stuff
</footer>

Related

Is there a vanilla Javascript alternative for .html()?

I'm wanting to create an opposite affect to <noscript>. I don't want the content to load at all if Javascript isn't enabled, which is why I'm not interested in a display:none alternative, which still loads but just hides.
I came across this previous answer which has the desired affect (see updated answer).
HTML:
<div id="container"></div>
<script type="text/html" id="content">
<div class="test">HTML goes here</div>
</script>
jQuery:
$(document).ready(function() {
$('#container').html($('#content').html());
});
Is there anyway I can do this with Vanilla Javascript? I want the contents of the script to render as functional HTML.
often what is done is to set up your html as:
<html class="no-js">
<head>
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js');})</script>
<!-- ... -->
</head>
<!-- ... -->
<div class="js-only">I only show up when js is enabled</div>
<!-- ... -->
</html>
and then have some css which hides that element
.no-js .js-only {
display: none;
}
the javascript replaces no-js with js in the <html> element which causes the div to display only when js is enabled

Show html as a new tab for print

In my app when the user clicks on a certain button, i will call an API and the API returns an HTML as a response, this HTML is a page (with and image and a few text) and i want to show this HTML in a new tab to my user and i also want to offer the user to print this page, how can i achieve this?
I tried windows.open but i'm not sure how i can use the response's HTML as the source for this page.
Is it even possible to do something like this in ReactJS ?
The best solution I can think about is creating an hidden container under your body element and placing your HTML into it. Then use the #media print magic to hide the page's content and display the printing element only.
For example:
<html>
<head>
<title>This is my amazing title</title>
<style>
#print-section {
display: none;
}
#media print {
body > * {
display: none;
}
#print-section {
display: block;
}
}
</style>
</head>
<body>
<h1>A lot of content</h1>
<p>A lot of text will be displayed here</p>
<div id="print-section">
<!-- HTML code will be rendered into this section -->
</div>
</body>
</html>

Css print - page break on content

I have a web page which prints its content on a pre-printed receipt template. The problem I am facing is that the template has three sections on each page.
Header section with bill no, customer name etc..
Content section which is populated in tabular row format. This section is dynamic and cannot predict the number of rows and height.
Footer section contains sum of amount etc..
I would like to keep the header only in first page, footer only in the bottom part of last page. The dynamic middle part should break and distribute in multiple pages depends on the content. Header and footer part of intermediate pages should remain empty on its respective space.
Could anyone please help me to make this structure with html5 and css3.
Hello there this is my solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
// does not show the div other than print
#media all {
.page-break { display: none; }
}
//make it break the page
#media print {
.page-break { display: block; page-break-before: always; }
#content{
color:blue;
}
}
</style>
<header>
<h1>HEADER</h1>
</header>
<div class="page-break"></div>
<section id="content">
<h1>CONTENT</h1>
</section>
<div class="page-break"></div>
<footer>
<h1>FOTTER</h1>
</footer>
</body>
</html>
Hope it helps, for more info here is a link

Hiding/showing content whether javascript is enable/disabled

I have seen some posts regarding wanting to do something like this, but I am at a loss to understand why my code doesn't work. I'm trying to make sure that users who visit a page have javascript enabled. If disabled, I want to hide all content and display a simple page with a message that the main page cannot be displayed without javascript.
I have the following:
<html>
<head><title>my site</title>
<noscript><style type="text/css">site {display:none;} </style></noscript>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<script type="text/javascript">document.getElementById("noscriptmsg").style.display = 'none';</script>
</body>
<body>
<div class="site">
<!--content -->
</div>
</body>
</html>
Currently this shows the correct javascript-enabled page, but a completely blank javascript-disabled page. What would cause this?
Why not use the build in noscript in one body tag:
<html>
<head><title>my site</title>
</head>
<body>
<noscript>
<style type="text/css">
#site {display:none;}
</style>
<div id="noscriptmsg">
You need to have javascript enabled in order to view this site.
</div>
</noscript>
<div id="site">
</div>
</body>
</html>
It looks like in the body onload you are trying to call the method hideDiv()
First, I'd recommend moving your script tag
<html>
<head><title>my site</title>
<noscript><style type="text/css">.site {display:none;} </style></noscript>
<script type="text/javascript">
// to the head tag
// and define the hideDiv() method
function hideDiv() {
document.getElementById("noscriptmsg").style.display = 'none';
}
</script>
</head>
<body onload="hideDiv()">
<div id="noscriptmsg">You need to have javascript enabled in order to view this site.</div>
<div class="site">
<!--content -->
</div>
</body>
</html>
and remove the extraneous body tags. You can use css to have the first div (the one with the notice) display at 100% width and 100% height. Also, someone pointed out you were missing the css class selector.

Changing multiple jquery mobile "data-theme" property from one place

I am using JQuery Mobile to develop my mobile website. Currently, I have to set the 'data-theme' property several times throughout my HTML document to be able to incorporate a particular theme. Is it possible to set the 'data-theme' property once, maybe in a javascript function, or something to that effect? The solution would need the theme to style all my elements. I attempted to solve the issue using CSS style-sheets, but it failed to work as a solution.
My Webpage's HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="CodeGeneral.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
<link rel="stylesheet" href="StyleMaincss.css">
<title>Home</title>
</head>
<body onload="GenerateData();" data-role = "page" >
<div data-role="header" class="HeaderBar">
<img src="Logos v2/Header.png" alt="" class="HeaderImage">
</div>
//Content on page
<div data-role="footer" class="NavBar" data-position="fixed">
<div data-role="navbar">
//Navigation button creation
</div>
</div>
</body>
My javascript:
$(document).delegate("[data-role='page']", 'pagebeforecreate',
function () {
$(this).attr('data-theme', 'a')
}
);
function GenerateData() {
//Things carried out during loading
}
This is from the jQuery Mobile Docs:
The data-theme attribute can be applied to the header and footer
containers to apply any of the lettered theme color swatches. While
the data-theme attribute could be added to the content container, we
recommend adding it instead to div or container that has been assigned
the data-role="page" attribute to ensure that the background color is
applied to the full page. When this is done, all widgets on the page
will also inherit the theme specified in the page container. However,
headers and footers will default to theme "a". If you want to have a
page with, for example, only theme "b" for all its elements, including
its header and footer, you will need to specify data-theme="b" to the
page div as well as the header and footer divs.
Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. You can test that by messing with the "theme swatch change" links at the top of the link above.
UPDATE
To programmatically change the theme of a page add this code to your site:
$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
$(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});
But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags.
UPDATE
You can also do this inside the mobileinit event handler by changing the page prototype:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
This will make any page without a set data-theme attribute default to the a theme.
Here is a demo: http://jsfiddle.net/tEbD5/3/

Categories

Resources