Javascript/Jquery/PHP Loading Page - How? - javascript

I have a website that has a-lot of elements and loads quite slowly http://www.uberdice.com. I was looking for a way to have a loading page that specifies the page is loading, as this is more pleasing than just a white page.
A desired example would be http://primedice.com.
I have searched around but none of the suggested examples have seemed to work, or I am just putting them in the wrong place.
I created this div:
<div id="loading" style="width: 100%;
height: 100%;
background: black;
background-attachment: fixed;
background-position: top;
background-size: 100% 100%;
position: absolute;
color: white;">Loading! Please calm down guy...</div>
Which I was going to use as the loading page and this script to disable it.
<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>
However when I implemented this, it still gave me a white screen and I saw the 'loading' div briefly blink up a few ms before the full site loaded. I don't think the server is slow as the ping is normal and https://uberdice.com/test.php loads quickly.
Can anyone provide any solutions?
This is the current index.php file:
<div id="loading" style="width: 100%;
height: 100%;
background: black;
background-attachment: fixed;
background-position: top;
background-size: 100% 100%;
position: absolute;
color: white;">Loading! Please calm down guy...</div>
<?php
header('X-Frame-Options: DENY');
$init=true;
include './inc/start.php';
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $settings['title'].' - '.$settings['description']; ?></title>
<meta name="Keywords" content=“Dogecoin, Dice, Bets, Betting”>
<meta name="Description" content=“Exclusive Dogecoin Dice Site - 50% of ALL profits go back into Dogecoin development. In association with forum CryptoBoard.org.”>
<link rel="shortcut icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="themes/<?php echo $settings['activeTheme']; ?>/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="content/ext/msgbox/Scripts/jquery.msgBox.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/msgbox/Styles/msgBoxLight.css">
<script type="text/javascript" src="content/ext/qtip/jquery.qtip.min.js"></script>
<link rel="stylesheet" type="text/css" href="content/ext/qtip/jquery.qtip.min.css">
<script type="text/javascript" src="js/colors.js"></script>
<?php include './js/includer.php'; ?>
</head>
<body>
<?php include './themes/'.$settings['activeTheme'].'/frontpage.php'; ?>
<!-- _COINTOLI_IDENTIFIER_2_ -->
</body>
</html>
<?php include './inc/end.php'; ?>
<script type="text/javascript">
document.getElementById("loading").style.display = "none";
</script>
Thanks.

The problem is the time it takes for the server to generate your page, the browser can't display anything until the server has sent the content to it. It's taking about 6s for the server to generate the content on the page, this suggest some slow queries.
The loading bar you are trying to use only works where there is a lot of objects on the page that you need to load, such as a lot of large images. The actual HTML is sent to the browser quickly, but loading large images is done separately and takes time. But your issue isn't like this, the HTML of the page is taking a long time to be produced, and the server won't send any HTML to the browser until the full page is generated.
There are a few things you can try. The first is identify the queries taking ages to load and optimise them (I'd try this first). The second is to load the frame of the page only, then load the content using Ajax.
The third is instead of loading all the content for the page you can echo it out to the browser bit by bit as the HTML becomes ready. From how the page loads I'm assuming that you store all the content into a variable and once it's all ready echo it out to the page. This is as simple as echoing out the content, then keep echoing out bit after bit as it becomes ready instead of storing it in a variable.

Related

HTML and CSS Background doesn't display?

I am trying to get an image to display an image using css background image, but I am not able to get the image to render.
CSS IS HERE:
body{
margin: 0px;
padding: 0px;
background-image: url(/steampunk/wallpaperSteampunk_B.jpg);
background-size: cover;
}
HTML IS HERE:
<html>
<head>
<link href="Main.css" rel="stylesheet"/>
<script src="jquery-1.10.2.min.js"></script>
<script src="JQUERY%20Main.js"></script>
</head>
<body>
<div id="box">
<div id="main"></div>
Everything from the CSS works except the BG image, What am I missing here?
Thanks in advance.
In case you are just using an html file opened within a browser, you need to make the url relative to the file and skip the / at the beginning of the url. Like so:
background-image: url(steampunk/wallpaperSteampunk_B.jpg);
In case you run your code within a web server, your url is correct and will just work because it is relative to the root of the host:
background-image: url(/steampunk/wallpaperSteampunk_B.jpg);
Except for the ' on background image path, you also need to set a height.

JavaScript erratic with starting point funciton

fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});

how to format web page content loaded from javascript?

I have a webpage that displays a web form whose source is javascript.
By default it places this form in the upper left corner of the screen. How to center it horizontally and vertically on the screen?
I'm confused because the block is in the <script> section rather than <body>.
The form is generated by my email marketing service provider, and I don't have access to its code.
The complete html file is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>
Is it your javascript file or are you loading in an external file which creates the form? You can add classes/id's to javascript generated markup which is one way you could target it but you should be able to target and centre it just using:
form {display: block; margin: 0 auto; width: 100%}
Without actually seeing what your JavaScript is doing this is difficult to answer, however the generalized answer to your problem is to use CSS. You can do so within the head section of your html document using the <style> tag (see code below) or using <link> to add an external stylesheet.
Check out W3 to get you started learning more about CSS: http://www.w3schools.com/css/
Actual CSS attributes you will need may vary, but this article shows use of transform: translate to center an element vertically and horizontally.
<!DOCTYPE html>
<html>
<head>
<style>
/* this is a class you would add to the parent HTML tag of your form */
form {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<script type="text/javascript" src="https://app...."></script>
</head>
<body>
</body>
</html>

How to show a loader image while a page loads slowly

I have db query in my page which fetches a lot of data at time and shows it on the page. FYI, I can not use pagination. So I just want to show a loader image till the time the query fetches all the data and show on the UI. I have tried this code for example, but its not working,
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('processing.gif') 50% 50% no-repeat rgb(249,249,249);
}
</style>
</head>
<body>
<div id="page">
<div class="loader"></div>
<cfquery datasource="dsn_spinlife_prod_new" name="qryGetProdList">
SELECT *
FROM tbl_products;
</cfquery>
</div>
</body>
</html>
But its not working , still firefox show a blank white page while the page loads.I have tried with document.ready also, not working. I want the loader image to be shown , How it can be done, I think i am missing something .
The problem is most likely that the browser doesn't even get your page until all the slow DB work has been done. You could try putting a <cfflush> into the script above after your loader div. That'll cause CF to send back everything generated up to that point back to the browser at that point.
Bear in mind that once you've called <cfflush> you can no longer set cookies or send redirects, so you'll want to examine your code to ensure that there's none of that later on in the code.
The other approach would be to generate a page with nothing but a placeholder in it and use jQuery to load in the results as a separate request:
<script>
$('#results').load('results.cfm',function(){$('.loader').hide()});
</script>
<div class="loader">Loading...</div>
<div id="results"></div>
Where results.cfm runs the query and generates the HTML necessary to complete the page.

I can't use Slimscroll in a very small Iframe?

I am trying to get my code working with a small Iframe I made. The site where it has to be used is running on the Enjin network and it doesn't allow PHP so I had to use an Iframe to get the PHP to work. It now displays a loading gif while it is loading the data and that works perfectly fine.
However,
What I want is this loading gif and Slimscroll to work. I can't get these 2 to work together nor can I get Slimscroll to work. I have to use a limited HTML editor which allows the use of scripts (I believe) but following the steps I cannot get it working!
Here's my code
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="libs/jquery.slimscroll.min.js"></script>
<script>
$(function(){
$('#inner-content-div').slimScroll({
height: '250px'
});
});
</script>
<div id="loadImg" style="background-image: url(http://sander.server2.tmg-clan.com/loading.gif);
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
">
<div name="scroll" onload="document.getElementById('inner-content-div');">
<iframe border="0" name="iframe" src="http://sander.server2.tmg-clan.com" onload="document.getElementById('loadImg').style.backgroundImage='none';" scrolling="non></iframe>
</div>
</div>
What am I doing wrong? What do I need to add? the website it is running on is:
The Brothers Production network and my code is the top bar on the right!
Please help me out!

Categories

Resources