pagemasking in javascript - javascript

In my application i'm using menu...
when i click the menu item particular page will load in the center Frame.
Problem is it takes bit time...
now i want to show a masking (message to let the users know that page is loading)
( As showing in the Image ) until the page loading
how to do this in Javascript
sample code:
<html>
<head>
<style>
#content { display:none; }
</style>
<!-- Javascript that makes one div visible and hides another -->
<script type="text/javascript">
function showhide() {
document.getElementById("load").style.display = "block";
document.getElementById("content").style.display = "none";
}
</script>
</head>
<!-- calls the javascript function when the page is loaded -->
<body onload="showhide();">
<!-- div to be shown while the page is loading -->
<div id="load">
<img src="http://www.photo-canvas.com/images/generic/loading_gif.gif" />
</div>
<!-- div to be shown when the page is loaded -->
<div id="content">
[all the slow content]
</div>
Thank you........

It's not a complete answer, but shouldn't your showhide function be:
document.getElementById("load").style.display = "none";
document.getElementById("content").style.display = "block";
Depending on what you are loading, this may or may not be the solution. For example, I believe (but could be wrong) that onload does not take account of whether images are loaded. It certainly wouldn't take account of AJAX content.
Perhaps an easier way to achieve this would be for your initial page to only contain the loading screen and the rest of the content to be loaded by AJAX. With jQuery this is quite easy (this is an easy way to do it: http://api.jquery.com/load/)

Related

Is there a way to edit how this widget loads on my website, to be responsive

I'm using a code for a GPA Calculator widget to run on my website, it was working fine, but now, it seems that it is changed from the source, and became unresponsive.
I've asked them for a new code with no response from their side.
Now, I'm trying to fix this from my side, and need your help!
Code:
<!-- Calculators.tech Widget -->
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;"><p>GPA Calculator provided by calculators.tech</p></div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js"></script>
Here is how it looks like:
Previously, it was more like this:
I don't want to have this scroll option, I want it to show a complete shape of the calculator.
Is there a way to edit this from my side till I get any response from the calculator developer?
Looks like they have removed height attribute on iframe. Try this script below which tries to modify height on iframe when it finishes loading
<!-- Calculators.tech Widget -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function renderCalc() {
setTimeout(function() {
$('iframe#ifr').css('height', '100%');
}, 3000)
}
</script>
<div id="ppsWidgetCode" data-calculator-slug="gpa-calculator" data-calculator-keyword="GPA Calculator" data-config=""></div>
<div style="text-align: center; font-size:12px; color:#333;">
<p>GPA Calculator provided by calculators.tech</p>
</div>
<script type="text/javascript" src="https://www.calculators.tech/assets/lib/js/calculator-widget.js" onload="renderCalc()"></script>
onload event fires when DOM elements gets loaded but still there is no way to find when the assets get loaded like images etc of the document embedded in . For mitigating that issue the timer of 3 sec is used

Prevent browser from partially rendering the page while the document is being loaded [duplicate]

This question already has answers here:
How can I make the browser wait to display the page until it's fully loaded?
(16 answers)
Closed 4 years ago.
Both Firefox and Chrome is rendering my pages way too early, which results in my a couple of frames where you first see the header, then the content, and then the footer. It's a very very unpleasant page loading experience.
The way I get around this right now is this, which is such a silly workaround I would like to avoid. It also causes the page to flash white in Chrome.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="render-all-at-once" style="opacity:0; min-height:100%;">
content
</div>
<script>
document.getElementById("render-all-at-once").style.opacity = 1;
</script>
</body>
</html>
The problem is basically this:
<script>
function sleep(millis) {
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while (curDate - date < millis);
}
</script>
<div>
This will be rendered in the first frame.
</div>
<script>
sleep(3000);
</script>
<div>
And only after that first frame has been rendered will you see this line. You don't see the first line for 3 seconds as
you might, but you do see it flash, right before both lines are displayed.
</div>
<!---
I would like the browser to not render anything until
the entire entire document has been processed.
--->
In isolated tests, the above code seem to work as expected - both lines will be rendered at the same time after 3 seconds. But as soon I start adding a couple of random style-sheets to the page, the problem starts occurring.
I can't seem to narrow it down to any particular style-sheet or style. I can't figure out what's causing it. I've both tried loading all styles sheets from , or just having all of them inlined in a style element. This doesn't make any difference. I'm testing this using Chrome as it seems to happen more frequently there.
Does anyone have any experience with this sort of problem, or have any ideas what's causing it, and know of any way to prevent it?
What I like to do is wrap my content in a div and set it to display:none.
Then, I defer my CSS loading and in my CSS file, and set that wrap div to display:block.
I also compress all my CSS files into one single file (for better loading).
<!DOCTYPE html>
<html>
<head>
<style>
.wrap {
display: none;
}
</style>
</head>
<body>
<div class="wrap">
content
</div>
<noscript id="deferred-styles">
<link rel="stylesheet" type="text/css" href="compressed.css" />
</noscript>
<script>
var loadDeferredStyles = function() {
var addStylesNode = document.getElementById("deferred-styles");
var replacement = document.createElement("div");
replacement.innerHTML = addStylesNode.textContent;
document.body.appendChild(replacement);
addStylesNode.parentElement.removeChild(addStylesNode);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if(raf) {
raf(function() {
window.setTimeout(loadDeferredStyles, 0);
});
} else {
window.addEventListener('load', loadDeferredStyles);
}
</script>
</body>
</html>
Use the network tab in developer tools to see the process & response of each request. First, the HTML is fully received and parsed by the browser which then looks for remote objects to load top-down: stylesheets, images, javascript, etc.
So, to have complete control over how things appear, send an HTML document that looks exactly as you'd like the initial view to be (ex: a blank white document, achieved with inline CSS or a <style> tag that targets <body>). Then use a line of Javascript to listen for the load event and update your display, for example:
<!doctype html>
<html>
<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/primary.css">
<body style="display: none;">
<h1>Headline</h1>
</body>
<script>
window.addEventListener("load", function(event) {
document.querySelector("body").style.display = "block";
});
</script>
</html>

The loading screen for my website isn't disappearing

I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website (link) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
Try to import your jQuery inside the head tag.
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>

HTML do not refresh common elements when switching pages

I'm wondering if it would be possible to have common elements between pages that don't refresh when you change pages.
More specifically, what I mean is: I have a header that is common to several pages, and contains the links to the pages themselves. Only, whenever I click on the header, the whole page refreshes, with the typically annoying flickering that comes with it. I would like to know if it would be possible to have the header fixed between pages, so that when I click on a link to change page the content refreshes but the header doesn't. (The same goes for the background as well).
What I have right now is this:
<script type="text/javascript">
$(document).ready(function(){
$("#header").load("../header_footer/header.html");
});
</script>
and in the body (common to all pages)
<body>
<div id="header"></div>
</body>
Is it possible to do this with just HTML or Javascript?
Thanks!
Unfortunately, this isn't possible using traditional page loads. If you don't want the flickering, I'd recommend making your site a Single Page App. Basically, you'd be loading your page once in the browser, and then all subsequent pages are dynamically loaded into the DOM via Ajax calls.
<style>
#pg2,#pg3{display:none;}
</style>
<body>
<div id="header"><button onclick="page(1)">Page 1</button><button onclick="page(2)">Page 2</button><button onclick="page(3)">Page 3</button></div>
<div id="pg1">
</div>
<div id="pg2">
</div>
<div id="pg3">
</div>
<script type="text/javascript">
//<![CDATA[
var pg =new Array;
pg[1] = document.getElementById('pg1')
pg[2] = document.getElementById('pg2')
pg[3] = document.getElementById('pg3')
function page(p){
pg[1].style.display='none'
pg[2].style.display='none'
pg[3].style.display='none'
pg[p].style.display='block'
}
//]]>

site-onload-gif within php

problem is, that the website is loading like for about 20 second or longer (user-problems preprogrammed)
my solution was to load a pre-site where the user sees a loading screen.
i did this with this html-site but i want to do the same in php.
the test-page is http://kater.selfhost.me/test/
Source Code:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript">
window.onload = function() {
document.getElementById("siteLoader").style.display = "none";
document.getElementById("container").style.display = "block";
}
</script>
</head>
<body>
<div id="container" style="display:none">
<div id="body">
<iframe src="http://kater.selfhost.me/stats/skins.php" frameborder="0" height="2000px" width="1024px"></iframe>
</div>
</div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0'>
Please wait while the page loads...<br /> <br />
</div>
</div>
</body>
</html>
i tried some workarounds, but after searching & testing for about three hours i give up...
thanks in advance for any help provided! :-D
Adding what I alredy said at your question commentary, I made a code loading this content via AJAX:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
//Load content
loadAjaxContent();
});
function loadAjaxContent()
{
//VERY IMPORTANT: the URL domain MUST HAVE be the same as your request
//that's why I'm not writting the full http://kater.selfhost.me/stats/skins.php
$.ajax({
url: "/stats/skins.php"
}).done(function(data) {
//remove loader
$("#siteLoader").hide();
//put PHP content
$("#ajaxContent").html(data);
});
}
</script>
</head>
<body>
<div id="body">
<div id="ajaxContent" style="width:1024px;"></div>
<div id='siteLoader'>
<div id='siteDetailLoader'>
<img src='ajax_loader.gif' border='0' />
Please wait while the page loads...<br /> <br />
</div>
</div>
This is the most used way to load asynchronous content in the web. But pay attention at this: The http://kater.selfhost.me/stats/skins.php page is made to open as single page in the web, so it has <html> , <head>, <body> , etc.. tags, so..after loading this page into another you'll have two <html>, <body> .. tags in a same page, this is bad, but modern browsers have an awesome common sense and don't bother by this, but you should know that, and be aware.
The actual problem why it isn't loading yet, is this javascript in your content:
<script type="text/javascript"><!--
EXref="";top.document.referrer?EXref=top.document.referrer:EXref=document.referrer;//-->
</script>
I removed that and now works fine. Remember that's a quick fix, I don't know what this JS does.
Why it works in <iframe> and doesn't via AJAX? When you open in <iframe> is like opening in a new browser window..and via AJAX, as I have said, it'll load the page content straight inside your "parent" page.
So, removing this Javascript will work, but awesome further solutions:
If you need to open this page both as content to load (via AJAX), both as single page, you can make two pages.. one for each need.
If you just want to use as content to load, remove <html>, <head>, etc.. tags, and fix Javascript to work inside another page.

Categories

Resources