I am trying to write a script which displays a loader gif images while the image loads, but none of the images in the page in firefox after including the script. It works fine in chrome. I have included the following code.
Javascript:
<script>
$(window).load(function() {
$('#loader').hide();
$('#best').fadeIn();
});
</script>
HTML:
<body>
<div id="loader"></div>
<div id="best">
<!-- Contents of the page here -->
</div>
</body>
CSS:
#loader {
background: url('img/19-0.gif');
height: 95px;
width: 95px;
position: relative;
top: 50%;
left: 50%;
margin-top: 15em;
margin-left: 13em;
}
#best {
display: none;
}
Is there any problems in my code or should I try an alternative approach?
Try this:
$(document).ready(function() {
$('#loader').hide();
$('#best').fadeIn();
});
Use
$('document').on("load", function() {
});
instead of $(window).load().
Source: http://api.jquery.com/on/
I hope you know, that for security reasons Firefox prevents user from loading local scripts and files loaded by scripts? Try using a local webserver instead.
Related
I am using the divi theme for wordpress, I have selected the code module and I am trying to get a picture of a website to scroll when hovered over and to reverse scroll when the hover ends...therefore returning the image back to its original location. There is an image in front of the website. Basically this gives the appearance that the user is scrolling down the webpage from a computer. The idea was originally discovered at dividojo.com (Good idea dividojo!) https://www.dividojo.com/website-design/ it is located towards the bottom of the page.
I have the complete code fully functional outside of wordpress with the following code.
<!DOCTYPE html>
<html>
<head>
<title>animatingimage</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
</head>
<body>
<div id="bigDiv">
<img id="computer" src="img/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="img/website1.png">
</div>
</div>
</body>
</html>
and here is the attached external CSS.
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
Like I said, the above functions appropriately. I am trying to input this into the divi theme. I have modified the above code to this:
<style>
#bigDiv {
background-color: #F5F5F5;
width: 500px;
height: 500px;
margin: 200px;
}
#imgDiv{
width: 463px;
height: 269px;
position: relative;
top: -430px;
left: 19px;
overflow: hidden;
}
#insideComputer {
width: 100%;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#insideComputer").hover(function() {
$("#insideComputer").stop(true).animate({
marginTop:"-1210px"
}, 5000);
},
function(){
$("#insideComputer").stop(true).animate({
marginTop:"0px"
}, 5000);
});
});
</script>
<div id="bigDiv">
<img id="computer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/computer3.png">
<div id="imgDiv">
<img id="insideComputer" src="http://localhost/kaiserkreations/wp-
content/uploads/2017/08/website1.png">
</div>
</div>
With all of the documentation I have read, I should be able to place this inside of the content section of the divi code module and have it work appropriately. When I place this chunk into the module, I see the image, and the formatting is appropriate, but the animation is dead. I do know that Jquery is working correctly, because when i test with an alert function it works fine.
Any ideas where I've gone wrong. I looked but was unable to find anything on stack overflow similar.
Thanks guys!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I have discovered that the code above does in fact work as posted. However, it appears that the current version of Jquery is not inherently included in the newest divi theme. so i simply placed it above the script posted above and it started to function. I am noticing some errors thrown in the console, however everything is functioning.
It is also working with placing the jquery embed in the head directly. I prefer this method more.
I have two divs.
1 : where background image is loaded
2 : where loader gif is loaded.
what I want is , when there is a window.load() event is called then loader gif should displayed , and when background image is fully loaded , then loader gif should be removed. that's what I want to achieve.
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
// this code is not working.
.background_image_div{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 600px;
height: 300px;
margin: 0 auto;
border: thin black solid;
z-index: 900;
}
.gif_loader_image{
position: absolute;
width: 50px;
height: 50px;
background: url(https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif);
// border: thin red solid;
left: 55%;
bottom: 15%;
z-index: 1001;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image"></div>
<div class="background_image_div">
</div>
Thank you.
instead of $(window).load(function (){ do a $( document ).ready(function() { as,
$( document ).ready(function() {
// Handler for .ready() called.
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
EDIT Caveats of the load event when used with images as taken from here, .load API
EDIT 2 try a poller, keep polling and check for the image inside the div using .length > 0. Do some changes to your html,
Keep a div and then an image tag inside it with this structure, <div id="backgroundImageDiv"><img src="whatEverTheURLIs" id="backgroundImageID"></div>
Inside your poller check if $("#backgroundImageDiv > #backgroundImageID").length() > 0
If the condition satisfies, hide the gif loader using .hide(). Check for the syntaxes please.
By poller I mean an interval timer.
You can do as like this way.
Just see this link
<div class="feature"><div class="loader"><img src="http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/1-0.gif"></div></div>
$(function(){
var bgimage = new Image();
bgimage.src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-10.jpg";
$(bgimage).load(function(){
$(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000);
$(".loader").hide();
});
});
http://jsfiddle.net/n4d9xxon
You can try like this :
$(document).ready(function (){
$('.gif_loader_image').fadeOut(1000);
});
body{
background: url(http://www.banneredge.com/images/portfolio.jpg);
width: 100%;
height: auto;
}
.gif_loader_image{
position: fixed;
width: 100%;
height: 100%;
left: 0px;
bottom: 0px;
z-index: 1001;
background:rgba(0,0,0,.8);
text-align:center;
}
.gif_loader_image img{
width:30px;
margin-top:40%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gif_loader_image">
<img src="https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/200_s.gif" alt="Loader..."/>
</div>
<div class="background_image_div"></div>
The main problem is that your $(window).load doesn't even fire
Why
This won't work since the .load() method was fully removed by jQuery 3 and since you are working with the version 3.1.1 it's not a surprise that your code doesn't work. You have to use now the .on() method to achieve the same effect
So
$(window).load(function (){
$('.background_image_div').load(function(){
$('.gif_loader_image').hide();
});
});
would turn into
$(window).on('load', function (){
$('.background_image_div').on('load', function(){
$('.gif_loader_image').hide();
});
});
Notice
Since you have already the $(window).load function at the beginning you don't have to define it again for your background image because this method will only be fired when all images are fully loaded so I think in your case this should also do the job.
jQuery
$(window).on('load', function () {
$('.gif_loader_image').hide();
});
I'm trying to show a fixed div using the show function of jquery. The show function works, but not when I try to add an effect with jquery ui. I have both jquery and jquery ui linked in an external file via a php include. When I use the inspector in chrome, I can see the blue box of the div I'm trying to show when I click the show button, yet the page remains unchanged.
This is my html:
<link rel="stylesheet" href="js/jquery-ui.min.css">
<script src='js/jquery-2.1.1.min.js'></script>
<script src="js/jquery-ui.min.js"></script>
<div class="twitterbar" id="baremily">
<a class="twitter-timeline" href="https://twitter.com/EmilyPalmaers" data-widget-id="number">Tweets by #EmilyPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="twitterbar" id="barcharlotte">
<a class="twitter-timeline" href="https://twitter.com/CPalmaers" data-widget-id="number">Tweets by #CPalmaers</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
This is my jquery:
<script>
$(document).ready(function()
{
$("#twitteremily").click(function(e)
{
e.preventDefault();
if( $('#baremily').is(':visible') ) {
// it's visible, do something
$('#baremily').hide("blind");
}
else {
// it's not visible so do something else
if ($('#barcharlotte').is(':visible'))
$('#barcharlotte').hide("blind");
$('#baremily').show("blind");
}
});
$("#twittercharlotte").click(function(e)
{
e.preventDefault();
if( $('#barcharlotte').is(':visible') ) {
// it's visible, do something
$('#barcharlotte').hide("blind");
}
else {
// it's not visible so do something else
if ($('#baremily').is(':visible'))
$('#baremily').hide("blind");
$('#barcharlotte').show("blind");
}
});
}
);
</script>
and this is the css (note, the div I'm trying to show has a class and ID tag:
.twitterbar
{
position: fixed;
display: none;
top: 35%;
left: 50%;
margin-top: -10em;
margin-left: -10em;
z-index: 99999;
height: 20em;
width: 20em;
}
#media (min-width:961px) {
.twitterbar
{
top:50%;
margin-top: -16rem;
margin-left: -16rem;
height: 32rem;
width: 32rem;
}
}
I'm pretty much clueless at the moment, thanks in advance
http://jsfiddle.net/a9dbeo1o/
Recheck your script references.
To make sure jQuery is ready, try:
if ( jQuery.isReady ) {
alert('jQuery is ready');
}
Edit:
Just a note: I also see you have your jquery css file inside your js folder.
Edit 2:
Updated fiddle:
http://jsfiddle.net/a9dbeo1o/2/
How to block all UI things in a webpage until all JavaScript files including jquery.js are loaded completely. Is there any possibility to do it using only JavaScript?
You can add a css mask with z-index set to higher than all your other ui elements on the page
In your page
<body>
<div class="mask"></div>
..
..
</body>
CSS
.mask {
position: fixed;
top: 0px;
width: 100%;
height: 100%;
padding: 0px;
margin: 0px;
background: #666;
overflow: hidden;
opacity: 0.7;
z-index: 99;
}
Once your jQuery is loaded, hide this mask.
$( document ).ready(function() {
$('.mask').hide();
});
Add some kind of this snippet at the very top of you body:
<div class="loading-overlay" id="loading">
<div class="loading">Loading..</div>
</div>
and this styles inline in HEAD:
<style>.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .6);
z-index: 1000;
}
.loading {
font-size: 20px;
text-align: center;
color: #FFF;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}</style>
Then after all javascript files execute this code:
document.getElementById('loading').style.display = 'none';
Make sure z-index property of the overlay is high enough to cover everything on the page.
However this solution is not reliable if some of your heavy scripts are loaded asynchronously.
Example: http://jsfiddle.net/ucPLW/
Statically listing the script tags in the head will ensure they are loaded before the DOM. This has been the case for as long as I can remember.
<html>
<head>
<!-- insert your script tags here -->
</head>
<body>
<!-- your DOM here -->
</body>
</html>
Its recommended to load the scripts at the bottom of the page instead so I'm not sure your motivations for this.
If by "UI Things," you mean the DOM, then you can put your javascript either at the end of your html like so:
<html>
<head>...</head>
<body>
<script>
// This javascript will execute after the HTML has loaded
</script>
</body>
</html>
Or if you want to use JQuery then you can put your UI code in a document ready function like this:
$(document).ready(function() {
// This javascript will also execute after the HTML has loaded
});
Best of Luck.
You can use the $(window).load() event for your code since this happens after the page is fully loaded and all the code in the various $(document).ready() handlers have finished running.
$(window).load(function(){
//your code here
});
I found a jsfiddle that did something similar to what I wanted to do. The modified version is located here: http://jsfiddle.net/7m7uK/479/ and it works on the jsfiddle. I copied the code to my site, changed the id's and now, it doesn't appear to be working. Below is the code located on my website. I am using jQuery 1.9.1 and jQuery UI 1.10.3 on my site. Any suggestions as to why this isn't working?
Javascript
<script type="text/javascript">
$( document ).ready(function() {
$('#footer_logo').hover(function(){
if ($('#powered_by').is(':hidden')) {
$('#powered_by').show('slide',{direction:'right'},1000);
} else {
$('#powered_by').hide('slide',{direction:'right'},1000);
}
});
});
</script>
HTML
<img src="img.png" width="63" height="25" id="footer_logo"/>
<div id="powered_by" width="100px"/>Powered By: </div>
CSS
#footer_logo {
color: #000;
cursor:pointer;
display:block;
position: absolute;
bottom: 0; right: 0;
z-index: 100;
}
#powered_by {
width: 200px;
height: 20px;
display: none;
position: absolute;
right: 0;
bottom: 0;
background: #ff0000;
z-index: 99;
}
I tried your code on jsfiddle and its working well. If the issue still persist check this SO post: JQuery UI show/slide not working correctly, maybe their solution can help.
You want to show #powered_by when you hover-in, then hide it when the you hover-out, right?
I looked into your code and it's not how you properly want it to behave. For example if you hover-in, the element slides, but when you hover-out then hover-in again without letting it finish hiding, the hovering execution will be reversed.
It will be more efficient if you do it this way:
$(document).ready(function() {
$('#footer_logo').hover(function(){
//hover-in
$('#powered_by').show('slide',{direction:'right'},1000);
},function(){
//hover-out
$('#powered_by').hide('slide',{direction:'right'},1000);
});
});
See this jsfiddle.
Or with pure jQuery: jsfiddle