I am trying to get a gif that I have to fade out after the page loads, but I'm not having much luck.
I want the overlay, which has a white background and the gif, to fade into transparency after everything else on the page is loaded and ready to be seen.
Below is my code, and also a link to a page where I've been testing it:
Link to test code
any ideas?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.1.0.slim.min.js"
integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="
crossorigin="anonymous"></script>
<div id="overlay">
<img src="https://www.isostech.com/wp-content/uploads/2015/04/loader.gif" alt="Loading" /><br/>
Loading...
</div>
Hello World!
<script>
$(window).load(function(){
$('#overlay').fadeOut();
});
</script>
And the CSS:
#overlay {
background-color: white;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
}
You use multiple versions of jQuery. If you either delete the include for jQuery 3, or make the following change, it will work.
I recently contributed to document-ready handlers in the SO:Docs which applies here and I think many will not realize as they switch to jQuery 3.
jQuery(function($) {
// Run when document is ready
// $ (first argument) will be internal reference to jQuery
// Never rely on $ being a reference to jQuery in the global namespace
});
All other document-ready handlers are deprecated in jQuery 3.0.
Using that doc-ready handler will work even if you leave both jQuery includes in the code.
Related
HI friend i have one page loader but the probelm is when load the content also than loader running don't display the loaded the content i want stop loading and load the page deatils and content
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();});
});
});
.js 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; }
<div class="js"><!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div><!--END: HTML element-->
1)don't need To function(){$(this).remove();}
2)The load() method was deprecated in jQuery version 1.8 and removed in version 3.0 and occurs when a specified element has been loaded.
So,
Use $(document).ready(function(){});
This is to prevent any jQuery code from running before the document is finished loading.
read More : https://www.w3schools.com/jquery/jquery_syntax.asp
Full Code:
$(document).ready(function($) {
$('#preloader').fadeOut('slow');
});
.js 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;
}
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<div class="js">
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
<div id="preloader"></div>
</div>
use any one, document.ready is enough .No need to add window.onload .because both are same , (perform after document loaded)
jQuery(document).ready(function($) {
$('#preloader').fadeOut('slow',function(){$(this).remove();});
});
.js 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="js">
<!--this is supposed to be on the HTML element but codepen won't let me do it-->
<body>
<div id="preloader"></div>
<h1>SUPER SIMPLE FULL PAGE PRELOADER</h1>
<p>Works with modernizr, or you could just add your own js class to the html element using javascript</p>
<p>You can make it fit your site better by generating your own image here: http://ajaxload.info/ then change the background color in the css</p>
<p>The example below doesn't fade out because the pageload event isn't fireing I'm guessing? but it will on your site when your page loads.</p>
</body>
</div>
<!--END: HTML element-->
I am cluless about this since I am a begginer, I have created this template for wordpress, my customer wanted to show a youtube video when you click on the respective play button on each image:
http://oxfordandregentstreet.com/
Now this is the code I made for it:
On the header I put this function
enter code here
On the header I put this function
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(){
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(){
jQuery(".vid1").hide();
});
});
</script>
enter code here
CSS code on the css file
.vid1{
position: absolute;
bottom: -1.5em;
left: .3em;
}
.videos{
position: relative;
display: none;
}
.play1{
position: relative;
bottom: 9em;
left: 8em;
}
enter code here
HTML code on the page:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<table border="0" align="center">
<tbody><tr>
<td><img src="/wp-content/uploads/2015/02/Constant-Contact- 290x190.png" alt=""><a href="#" ><img src="/wp-content/themes/Oxford/images/Play-1-Normal-Red-icon.png" alt="" width="" class="play1"></td>
</tr>
</tbody></table></div>
<div class="videos">
<div class="vid1">Close X<iframe width="960" height="705" src="https://www.youtube.com/embed/1wVD0I2zQBw" frameborder="0" allowfullscreen></iframe></div>
</div>
I test this code on the first play button but nothing happens, chrome's console doesn't show any errors, and I am using "Use Google Libraries" to include the code.
Can you please help me with this guys, I have researched the internet for days and I haven't found any solution.
Thanks in advance :)
There's a few issues I can see:
CSS
Remove display: none; from .videos since you're always hiding everything inside that container. Instead, change your existing CSS to include it:
.vid1, .vid2, .vid3, .vid4, .vid5, .vid6 {
position: absolute;
bottom: -1.5em;
left: .3em;
display: none; /* added here */
}
Code
The play button class is play1 so, your code to show vid1 should be:
jQuery(".play1").click(function (e) {
e.preventDefault();
jQuery(".vid1").show();
});
The close button is already inside vid1 so just hide the container when closevid inside vid1 is clicked:
jQuery(".vid1 .closevid").click(function (e) {
e.preventDefault();
jQuery(".vid1").hide();
});
Make sure you are calling jquery before running your script. You also need to prevent default when adding click events to anchor tags
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".play1").click(function(e){
e.preventDefault();
jQuery(".vid1").show();
});
jQuery(".closevid, this").click(function(e){
e.preventDefault();
jQuery(".vid1").hide();
});
});
</script>
(1) Have you included the jQuery library? Generally, it is included in the <head> section, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
Ref: http://learn.jquery.com/about-jquery/how-jquery-works/
(2) Inside the jQuery document.ready wrapper, put an alert.
<script type="text/javascript">
jQuery(document).ready(function(){
alert("It works");
});
</script>
If it pops up, then there are no syntax errors in the rest of your code. If it does not pop up, then delete everything except the alert statement (again, still within the document.ready wrapper -- make it look exactly like the above) and try again.
Make just that one thing work, then add back in the other parts, bit by bit.
Following an example from a question on So I tried the following code (part of it, not the whole thing):
function fadeDivIn(){
$('#helpdocButton').animate({backgroundColor: "#ed3" }, 4000, function(){fadeDivOut();});
}
function fadeDivOut(div){
$('#helpdocButton').animate({backgroundColor: "#3de" }, 4000, function(){fadeDivIn();});
}
$(function() {
$('#helpdocButton').click(function(){
$('menu').hide('slow');
$('helpdoc').show('slow')
});
$('#helpdocButton').mouseover(function(){
fadeDivIn();//it should start the .animate
});
});
my includes:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
my styles:
#helpdocButton {
width: 67px;
height: 40px;
background-color: #00ffff;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #00ffff;
padding: 5px;
opacity: 0.45;
}
#helpdocButton:hover {
-webkit-transition-duration: .90s;
opacity: 2;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
so, why the animate doesn't work? I have tried to have it starting from the document load instead of the mousover, but that did not work either. I have also tried it on numerous other divs inside of my code. The animate doesn't works with anything. Everything else is fully functional but the fadeDivIn function does not work. Am I doing anything wrong here? Is this incompatible with my includes? Thank you.
like was said in the comments your using a very old version of jquery and a fairly recent version of jquery ui... i would put my money on some inconsistencies there..
try updating your include lines to:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
and give that a shot, and if you need more google hosted includes in the future - here is the link
Put your html code then i can help you: i suggest you to open Inspector element or firebug if there are some errors: i see some strange lines you can correct them but it wont solve your annimation issue
$('menu').hide('slow');
$('helpdoc').show('slow')
what are 'menu' and 'helpdoc', if they are html tag you can put like this (helpdoc html tag exist?) if they are id do $('#menu') & $('#helpdoc'), if they are classes do $('.menu') & $('.helpdoc'). Then try to see if there are others elements in front of your $('#helpdocButton') element & replace mouseover by hover & test.
I was trying to test out some working code from http://dev.iceburg.net/jquery/jqModal/ to get an idea of how this works, but I am unable to get the code to work. I'm trying to use the pop up dialog box part, and I am testing the code from the defaults, which is the first example, in the examples section. here is what I had copied and tried testing out. the part that is not working is the dialog box popping up. i receive an error say.... Uncaught ReferenceError: $ is not defined
<html>
<head>
<title> test </title>
<style type = "text/css">
.jqmWindow {
display:none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay { background-color: #000; }
# html .jqmWindow {
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}
</style>
<script type = "text/javascript">
$().ready(function() {
$('#dialog').jqm();
});
</script>
</head>
<body>
view
...
<div class="jqmWindow" id="dialog">
Close
<hr>
<em>READ ME</em> -->
This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
The demonstrations on this page will show off a few possibilites. I recommend walking
through each one to get an understanding of jqModal <em>before</em> using it.
<br /><br />
You can view the sourcecode of examples by clicking the Javascript, CSS, and HTML tabs.
Be sure to checkout the documentation too!
<br /><br />
<em>NOTE</em>; You can close windows by clicking the tinted background known as the "overlay".
Clicking the overlay will have no effect if the "modal" parameter is passed, or if the
overlay is disabled.
</div>
</body>
</html>
If your code is indeed your entire HTML, then the reason $ is not defined is that you have not included jQuery (which defines $ and uses it a lot as shorthand). Your code includes neither the jQuery library nor the jqModal script. (Admittedly all of the examples on the jqModal site are extracts rather than full code so they take this step for granted.)
Add
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="/assets/js/jqModal.js"></script>
in your <head>, adjusting the path for jQModal.js as appropriate.
When a page loads on my site, the HTML appears before the javascript, which leads to a flicker when the javascript loads. The answer to this stackoverflow post gave a great solution. But I would like to load at least some of the HTML before the Javascript so that the user is not faced with a blank page during a slow connection. For example, I would like to load the header immediately, but wait to load the HTML for the javascript enhanced accordion until after the javascript loads. Any suggestions?
Here's the code that I borrowed from the answer linked above:
CSS:
#hideAll
{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
z-index: 99; /* Higher than anything else in the document */
}
HTML:
<div style="display: none" id="hideAll"> </div>
Javascript
window.onload = function()
{ document.getElementById("hideAll").style.display = "none"; }
<script type="text/javascript">
document.getElementById("hideAll").style.display = "block";
</script>
I'd suggest that you define the base/JavaScript-enabled styles of elements you want to display with CSS in the regular style block:
<style type="text/css">
#javaScriptAccordion {
display: none;
}
</style>
And then use the noscript tags (in the head) to amend this in the absence of JavaScript:
<noscript>
<style type="text/css>
#javaScriptAccordion {
display: block;
}
</style>
</noscript>
This ensures that the content is hidden on document load, preventing the flash, but visible to those users that have JavaScript disabled.
The above has been amended to prevent the 'flash of no content' (as described by #Josh3736 in his answer), and now uses opacity to hide the content:
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 0.001;
width: 50%;
margin: 0 auto;
padding: 0.5em;
border-radius: 1em 0;
border: 5px solid #ccc;
}
</style>
<noscript>
<style type="text/css">
#elementToShowWithJavaScript {
opacity: 1;
}
</style>
</noscript>
Live demo.
I'm not, unfortunately, entirely sure that I understand your question. Which leaves me proposing a solution for the question I think you asked (all I can offer, in excuse, is that it's early in the UK. And I'm not awake by choice...sigh); if there is anything further that I'm missing (or I'm answering the wrong question entirely) please leave a comment, and I'll try to be more useful.
The hack in the linked question is—in my opinion—very poor advice. In this case, it is a better idea to include some script directly following your accordion elements.
<div id="accordion">...</div>
<script type="text/javascript">...</script>
However, inline script intermingled with your HTML markup is a Bad Idea and should be avoided as much as possible. For that reason, it is ideal to include inline only a function call to a function declared in your external script file. (When you reference an external script (<script src="...">), the rendering of your page will pause until it has loaded.)
<html>
<head>
<script type="text/javascript" src="script.js"></script> <!-- renderAccordion() defined in this file -->
</head>
<body>
...
<div id="accordion">...</div>
<script type="text/javascript">renderAccordion();</script>
...
</body>
</html>
Of course, the correct way to do this is to just attach to the DOM ready event from script.js and not use any inline script at all. This does, however, open up the possibility of a content flash on extremely slow connections and/or very large documents where downloading all of the HTML itself takes several seconds. It is, however, a much cleaner approach – your script is guaranteed to be loaded before anything is rendered; the only question is how long it takes for DOM ready. Using jQuery, in script.js:
$(document).ready(function() {
// Do whatever with your accordion here -- this is guaranteed to execute
// after the DOM is completely loaded, so the fact that this script is
// referenced from your document's <head> does not matter.
});
Clever use of <style> and <noscript> does a a good job of guaranteeing that there is no flash of all the content in your accordion; however, with that method there will be the opposite effect – there will be a flash of no content.
As the page loads, your accordion will be completely hidden (display:none;), then once your script finally executes and sets display back to block, the accordion will suddenly materialize and push down everything below it. This may or may not be acceptable – there won't be as much movement, but things will still have to jump after they've initially rendered.
At any rate, don't wait until onload to render your accordion. onload doesn't fire until everything—including all images— have fully loaded. There's no reason to wait for images to load; you want to render your accordion as soon as possible.