I have a form in template that submit POST request to test_connection view. The test_connection view takes at least 1 minute to process so on that time I want to add Testing connection... message to the user. When the user presses submit button I want to show loading button. I have tried this:
HTML:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
Jquery:
$(window).ready(function() {
$('#loading').hide();
});
CSS:
#loading {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
It's not working though. What's wrong?
Use:
$(document).ready(function() {
$('#loading').hide();
});
OR
$(window).load(function() {
$('#loading').hide();
});
Related
I have included a loader and tried hide operation and timeout operation, which works with chrome ,but not with firefox. Firefox , the loader keep on loading and never ends.
HTML:
<div id="loading">
<img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />
</div>
CSS:
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
Included script before closing body tag.
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading').hide();
});
</script>
Use .on event
$( window ).on( "load", function() {
//Code on load
$('#loading').hide();
}
https://api.jquery.com/on/
Im added page load GIF icon for my bootstrap web site, but i have a small issue , this image loader is very fast loading, i need to make time duration for this loader , Im added duration but its not work ,how can i fix it?
Thanks
$(window).load(function() {
// Animate loader off screen
$(".se-pre-con").fadeOut("slow");
;
});
no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background:url("https://thumb.ibb.co/hqtTTk/Preloader_2.gif" )center no-repeat #fff;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<body>
<div class="se-pre-con"></div>
</body>
Try this:
setTimeout(function(){ $(".se-pre-con").fadeOut("slow"); }, 3000);
I want to show a loading gif when a user is loading away from the page. I do this when it is loading like this:
CSS:
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://i.imgur.com/Bpa5eIP.gif) center no-repeat #fff;
}
JavaScript:
<script>
$(window).load(function() {
Animate loader off screen
$(".se-pre-con").fadeOut("slow");;
});
</script>
HTML:
<div class="se-pre-con"></div>
I could do this by adding .onClick to each link on the page but that would take time and I want to know if there is a easier way to show the gif upon loading away from the page.
Watch unload event or beforeunload event just as you do with load!
For example:
$(window).on("unload",function() {
//your animation here
});
Also you can add a delay or something so the animation can end before leaving the page:
var triggered = false;
$(window).on("unload",function(event) {
if (triggered === true) {
return; //this is run automatically after the timeout
}
event.preventDefault();
// your animation here
triggered = true; // set flag
setTimeout(function(){$(this).trigger('unload');},1000); //set animation length as timeout
});
I used this question for my solution: How to trigger an event after using event.preventDefault()
try using this
$(document).ajaxStart(function() {
$("#loading").show();
});
$(document).ajaxComplete(function() {
$("#loading").hide();
});
});
CSS
.wait {
top: 100px;
z-index: 2000;
height: 100%;
width: 100%;
vertical-align: bottom;
position: relative;
}
.loader {
background-position: center center;
z-index: 1000;
height: auto;
width: 100%;
position: absolute;
}
.loaderimg {
height: 100%;
width: 100%;
}
HTML
<div id="loading" class="loader">
<h2 class="text-center wait">Loading results, please be patient</h2>
<img class="loaderimg" src="img/scr_01.gif" />
</div>
I am trying to create some options that are hidden unless the user goes with the mouse in a specific area. Let's take an example: Google+ profile page:
When you go with the mouse cursor on the picture, the button appears.
Here is what I tried:
var $button = $("#button");
$("#profile-picture").on("mouseover", function() {
$button.show();
}).on("mouseout", function() {
$button.hide();
});
#profile-picture {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 45px;
left: 70px;
opacity: 0.75;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
The problem is that when I go with the cursor over the #button, it flickers. What can I do?
The easiest method is placing them both in the same div, and then using mouseover/out for that div. Example: http://jsfiddle.net/1g24mhhz/
HTML:
<div id="profile-picture">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" class="profile">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
CSS edits:
#profile-picture .profile {
width: 150px;
height: 100px;
}
EDIT: You should probably not use an ID for the div, since you probably have multiple profiles on a page. This was just to show it with the code you had already used.
A simple css approach. You can have a click event on the button :)
$('#button').on('click', function() {
alert('I am clickable');
});
#profile-picture,
.hover-wrap {
width: 150px;
height: 100px;
}
#button {
position: absolute;
display: none;
width: 30px;
height: 30px;
top: 0px;
left: 0px;
bottom: 0;
right: 0;
margin: auto;
opacity: 0.75;
cursor: pointer;
}
.hover-wrap {
position: relative;
}
.hover-wrap:hover #button {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="hover-wrap">
<img src="http://datastore01.rediff.com/h450-w670/thumb/69586A645B6D2A2E3131/ckez1n08svw8f3en.D.0.Sidharth-Malhotra-Student-of-the-Year-Photo.jpg" id="profile-picture">
<img src="http://img3.wikia.nocookie.net/__cb20090227194712/java/images/0/0e/Camera_icon.gif" id="button" />
</div>
You can use CSS:hover properties to show/hide the button, no Javascript needed.
The trick is a sibling selector:
#profile-picture:hover + #button, #button:hover{
display:block;
}
Try this:
http://jsfiddle.net/6s9200ab/
How can I make this <div> hide itself when a click occurs outside of it? I would like to be able to hide it and then show the rest of the content of the page that is behind it.
<html>
<style>
.overlay
{
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #fff;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 80;
}
.popupContent
{
background: #fff;
padding: 5px;
border: 1px solid black;
position: fixed;
top: 100px;
left: 400px;
bottom: 365px;
right: 300px;
z-index: 81;
}
</style>
<div id="initialPopup">
<div class="overlay"></div>
<div class="popupContent" onclick="hideInitialPopup()">
Good Morning, Please Upload Your File Today!
</div>
</div>
<script>
function hideInitialPopup() {
document.getElementById("initialPopup").style.display = "block";
$("popupContent").mouseup(function(){
if(! mouse_is_inside) $
}
</script>
</html>
Use jQuery's event.target to determine if you've clicked within the box or not:
$(document).on('click',function(e) {
if (!$(e.target).closest('#my_div_id').length) {
$('#my_div_id').hide();
}
});
http://jsfiddle.net/mblase75/PNYTX/
Usually when you use a mask with something like a popup/dialog, it's easiest just to attach a click handler to the mask itself that hides the popup/dialog when clicked.
Here is a jfiddle: http://jsfiddle.net/peterdev001/SDNUj/