I have a loading mask that I would like to fadeOut() once the entire page has loaded. It works perfectly on the first time the user enters the page, but if they refresh, the loading mask disappears before the page has loaded. I have read quite a few articles out there and it seems that the common problem is that $(window)load usually doesn't fire events because of cache, but in my case it is fired too quickly upon refresh...What could be the issue?
1. <html>
2. <head><script type="text/javascript">
3. Ext.onReady(function() {....});
4. $(window).load(function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);});
5. </script></head>
6. <body>
7. <div id="loading-mask"></div>
8. <div id="loading">
9. <span id="loading-message">Loading Tibet...</span>
10. </div>
11. </body>
12. </html>
Any help or guidance would be greatly appreciated :)
Thanks,
elshae
Ok so I found out that it's best if JavaScript code is placed in the body..
So now I have all my code in the body including the Ext.onReady, so here goes...
<html>
<head></head>
<body onload="">
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading Tibet...</span>
</div>
<script type="text/javascript">
//Default blank image needed for some ExtJS widgets/if no image is found...
Ext.BLANK_IMAGE_URL = "./ext-3.2.1/resources/images/default/s.gif";
Ext.onReady(function() {
.............
});
//Outside Ext.onReady
window.onload = function(){$('#loading-mask').fadeOut(5000); $('#loading').fadeOut(5000);}
</body></html>
//The css is:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: #D8D8D8;*/
/* background: #6E6E6E;*/
background: #000000;
opacity: .8;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
}
#loading span {
/*background: url('ajax-loader.gif') no-repeat left center;*/
background: url('globe.gif') no-repeat left center;
color: #BDBDBD;
width: 60%;
height: 30%;
padding: 60px 70px;
display: block;
}
Related
I am from a not developer background and I am making a WordPress webpage in divi theme for my photography thing.
I want a fade out element in the slider module. So what it does is when we scroll down the page the element moved up and fade out. Example like this: http://codepen.io/nickcil/pen/sfutl/
So I put this code (below) and got the desired effect:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 1000px;
}
.top {
margin: 0;
position: relative;
width: 100%;
background-color: #aaa;
height: 300px;
opacity: 1;
text-align: center;
font-family: 'helvetica';
font-size: 80px;
font-weight: 100;
color: #fff;
}
.title {
position: absolute;
top: 60%;
left: 100px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(window).scroll(function(){
$(".top").css("opacity", 1 - $(window).scrollTop() / 150);
});
</script>
</head>
<body>
<div class="top">
<div class="title">
Fade Away
</div>
</div>
</body>
</html>
What I did, put the above codes in xyz Html(wordpress plugin) and get the Snippet Short Code and put this Snippet Short Code in the module.
But the issue is after the page loaded. The header transition/effect on scrolling to the logo is gone and I am not able see my logo on scrolling (center inline logo header style).
Can someone please help me to resolve this issue. A flow/steps/procedure to do the fade-out effect will help me a lot.
I got an animation from here: http://codepen.io/jschr/pen/GaJCi
I am using it in my project.
#content {
position: relative;
margin-left: auto;
margin-right: auto;
width: 1000px;
height: 700px;
}
#animation {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: 600px;
left: 350px;
}
#animation2 {
position: absolute;
z-index: 20;
width: 1000px;
height:50px;
top: -25px;
left: 340px;
}
Inside the animation.css:
h1 {
position: absolute;
font: 12vmin/12vmin 'Special Elite', cursive;
left: 0;
top: 30%;
margin-top: -4vmin;
width: 100%;
text-align: center;
padding: 2vmin 0;
text-shadow: 0.15vmin 0.15vmin rgba(0, 0, 0, 0.5);
}
In the main html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="content">
<div id="animation"></div>
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
<div id="animation2"></div>
<script>
$("#animation2").html('<object data="./animation/animation2.htm">');
</script>
</div>
And the animations witch i load into te main html:
<head>
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link rel="stylesheet" href="animate.css" charset="utf-8" />
<link rel="stylesheet" href="animation.css" charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.fittext.js"></script>
<script src="jquery.textillate.js"></script>
</head>
<body>
<h1 class="tlt">Hello to my website and welcome</h1>
<script>
$('.tlt').textillate({
in: { effect: 'splat' },
out: { effect:'hinge', sync: true },
loop: true
});
</script>
</body>
The second animation looks almost same.
What i want is the ability to set the width, to be able to see the whole phrase with the font almost at 30px. The problem is, the first animation i am able to set the font at 8vmin while the second animation i come to 12vmin to get the phrases as one string. If i make it bigger, it will break to more strings or even cut the phrase, depends were i try to set the width. I saw the animation does inject spans into my html and they are width 300, while i need almost width 700. I was trying to find away online also tried to change my css with no result. I also tried to catch the span injection and make it larger, but not helped so fare. Still hope to find a solution to this. If someone knows how, please show me, thanks.
I found out, i can this:
<script>
$("#animation").html('<object data="./animation/animation.htm">');
</script>
simply to this:
<script>
$("#animation").html('<object width="600px" data="./animation/animation.htm">');
</script>
And this is how it worked for me, it increased the width inside the loaded object data, thanks anyway.
I am using a preloader for my website. I simply designed it using CSS and coded the logic to hide the preloader when the website gets completely loaded.
The whole thing works on my local machine but when i put it online it doesn't work.
This is the link to the website : http://deepanshubatra.tk (Use google chrome please)
I am mentioning the HTML,CSS and javascript code:
CSS:
div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }
Javascript
<script >
jQuery(document).ready(function($) {
// site preloader -- also uncomment the div in the header and the css style for #preloader
$(window).load(function(){
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
});
</script>
HTML
<div id="preloader"></div>
You have error in console:
Uncaught ReferenceError: jQuery is not defined
Add <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> to your head tag.
The error that is in the console on the page is jQuery is not defined. So you need to load jQuery in your scripts. Here is how you can use it with CDN:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
You can try this code.
Add HTML inside the body.
<div class="se-pre-con">
<img src="../images/logo-02.svg">
</div>
Add this CSS Code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: #000;
margin: 0 auto;
text-align: center;
}
div.se-pre-con img{
max-width: 300px;
top: 20%;
position: relative;
}
div.se-pre-con.highlighted{
display:none;
}
And this jQuery code in the footer:
<script>
jQuery(function() {
jQuery(this).addClass('highlighted');
setTimeout(function () {
jQuery('.se-pre-con').addClass('highlighted');
}, 2000);});
</script>
So I'm currently working on a single screen which has multiple content views which will be accessed from a button to the side of the dynamic area. I found this repo (https://github.com/ian-de-vries/Multi-Screen.js) which achieves something very similar to what I want, only it expects a full screen, as opposed to just a certain area. So far, I've got it very close to performing as I would hope, but the last couple of hours have had me stumped. Currently there are two issues:
1) The relative divs use the % width value of their containing div, while the animation of the divs uses a % width of the entire screen, making the animated divs larger. I think the way around this is to calculate the fixed width during the animation then remove it post animation. If you set a fixed width in the css (which isn't appropriate for the site) the animation is smooth and has the correct width whilst animating, but then leads to the next issue.
2) Because of the original functionality of the js, the animations come straight down the centre, which again adds to a worse animation because of the offset content.
While I've tried to solve both of these issues, JS is beyond me despite the experience I have in other programming languages. I thought I was onto something when editing the pre/post/animation_css variables, but I couldn't get what I wanted to achieve. Anyway, below is a quick dummy site which replicates the code on the actual site well, and creates the same issues. To get this working, put these two files in a folder with the multi-screen.js file from the repo.
<!DOCTYPE html>
<html>
<head>
<!-- Scrolling Pages -->
<!-- latest jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<!-- link the css and js scripts -->
<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="multi-screen.js"></script>
<!-- run the plugin -->
<script type="text/javascript">$(document).ready(function() { MultiScreen.init(); });</script>
</head>
<body>
<div class="wrapper">
<div class="header">My Header</div>
<div class="contentarea">
<div style="float:left; width: 20%; background-color: red; height: 500pt;"></div>
<div style="width:80%; float: right; height: 600pt; background-color: grey;">
<div id="entry_screen" class="ms-container ms-default" style="">
go down<br>
go down 2
</div>
<div id="screen2" class="ms-container" style="">
go up<br>
go down
</div>
<div id="screen3" class="ms-container" style="">
go up<br>
go up 2
</div>
</div>
</div><!---------- Close "content-area" --------->
</div><!---------- Close "wrapper" --------->
</body>
</html>
CSS:
.ms-container {
position: fixed;
z-index: 1;
display: none;
}
.ms-default {
position: absolute;
z-index: 2;
display: block;
}
#entry_screen {
height: 500pt;
width: 80%;
background-color: green;
left: 0;
margin-left: 20%;
}
#screen2 {
height: 500pt;
width: 80%;
//float: right;
background-color: blue;
//margin-right: 10%;
margin-left: 20%;
}
#screen3 {
height: 500pt;
width: 80%;
background-color: magenta;
margin-left: 20%;
}
.wrapper {
min-height: 100%;
padding: 0 10% 0 10%;
height: auto !important;
height: 100%;
margin: 0 auto 0pt;
}
.contentarea {
position: relative;
}
.header {
text-align: center;
width: 100%;
height: 50pt;
}
a {
color: white;
}
Ended up using another alternative. The one I chose was fullPage.js. It can be used for the desired functionally despite being for full screen sites. Hope this helps anyone who wanted to achieve something similar.
I have a webpage that's pretty intensive via HTML and CSS, which leads to some elements loading faster then others when a user visits the page. The background may take awhile to load, and so on... It gets pretty ugly seeing it all load element by element...
So I'm wondering how I can first load a different page (page1, that has simply a gif and bare minimals of html) and then page2 (page with intensive html) will appear only after the client's browser has fetched all of the pages html.
I believe this can be done with JQuery, which I know almost nothing about...
Any advice would be appreciated,
Thanks,
Use the following HTML (at the top of the body is best):
<div id="loading"></div>
And this CSS:
#loading {
background: url('spinner.gif') no-repeat center center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 9999999;
}
And the following JavaScript (uses jQuery):
function hideLoader() {
$('#loading').hide();
}
$(window).ready(hideLoader);
// Strongly recommended: Hide loader after 20 seconds, even if the page hasn't finished loading
setTimeout(hideLoader, 20 * 1000);
You could put the styles inline on the div instead of in a stylesheet for less chance of a flash of content before the loader. Also, you could use https://www.askapache.com/online-tools/base64-image-converter/ or a similar tool to convert your GIF to a base 64 URI, and use that instead of spinner.gif.
<div id="overlay"></div>
<style>
#overlay {
position: fixed;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.hide {
display: none;
}
</style>
<script>
$(window).load(function() {
$('#overlay').addClass('hide');
});
</script>
I have implemented in Laravel and it worked as expected,
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffffcf;
}
.loader img{
position: relative;
left: 40%;
top: 40%;
}
</style>
<div class="loader" ><img src="{{asset('public/img/loader.gif')}}"></div>
<script>
window.onload = function()
{
//display loader on page load
$('.loader').fadeOut();
}
</script>