I have integrated a Jquery busy indicator in my app from this link: http://www.aspsnippets.com/demos/1331/
It doesn't let the user click on input elements while loading. But if I press tab I can easily navigate to those input elements and enter whatever I want and press enter on button to send a service call. This defeats the whole purpose of busy indicator. Any idea how I can fix it?
This is the css:
.busy-modal
{
position: fixed;
z-index: 999;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
}
.busy-center
{
z-index: 1000;
margin: 300px auto;
padding: 10px;
width: 130px;
background-color: White;
border-radius: 10px;
filter: alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
}
.busy-center img
{
height: 128px;
width: 106px;
}
I fixed it by manually disabling keyboard input on busy indicator. Here's how I did it:
In my angularJS controller I declared a variable that will decide whether to disable keyboard input or not
$scope.disableKeys = false;
then I added following code that disables keyboard input
window.addEventListener('keydown', function (event) {
if ($scope.disableKeys == true) {
event.preventDefault();
return false;
}
});
this is my busyIndicator function:
function busyIndicator(type)
{
if(type == 1)
{
$scope.disableKeys = true;
$(".busy-modal").show();
}
else if (type == 0)
{
$scope.disableKeys = false;
$(".busy-modal").hide();
}
}
Finally, calling this function:
//to show busy indicator
busyIndicator(1);
//to hide busy indicator
busyIndicator(0);
and that's it.
Related
I have made a popup whenever the image was not loaded but the problem scenario was, I am getting my popup even the image is loaded for the first time. So, I need to refresh it for disappearing it. How can I resolve it?
enter image description here
The problem is that I have included the condition to check the image is loaded or not after the code of popup .so for the first time the popup was appearing even it satisfies the condition.
Help me out of it.
You should edit your question so as to include your code, so your problem is reproducible.
You can store your image as a variable and pass a function that hides your pop-up once the image is loaded.
var img1 = document.createElement("img");
img1.onload = function() {
document.getElementById("**popup_ID").style.display='none';
};
img1.src = "**your_image_path**"; //Edit suggested by #vanowm
Change "your_image_path" and "popup_ID" to match your code.
Image has complete property that would tell if it finished loading or not. You can use that to show/hide popup on startup.
However to detect if image was successfully loaded or error occur, you'd need setup event listeners.
Here is a little example that does that:
let timer;
const elLoadGood = document.getElementById("loadGood"),
elLoadBad = document.getElementById("loadBad"),
elPopup = document.getElementById("popup"),
elImg = document.getElementById("myimage"),
imgSrc = "https://cdn.spacetelescope.org/archives/images/publicationjpg/heic1502a.jpg?";
//set event handlers
elImg.onload = imageOnLoad;
elImg.onerror = imageOnError;
//load image
imageLoad(imgSrc);
elLoadGood.addEventListener("click", e=>
{
//hide image
elImg.removeAttribute("src");
//load image
imageLoad(imgSrc + Date());
});
elLoadBad.addEventListener("click", e=>
{
//hide image
elImg.removeAttribute("src");
//load image
imageLoad(Date());
});
function imageLoad(src)
{
elPopup.classList.add("loading");
elImg.classList.remove("error");
elPopup.firstChild.textContent = "loading... please wait";
//show popup
imageFinished({});
//load image
elImg.src = src;
}
function imageFinished(img)
{
//check if image finished loading
if (img.complete)
{
elPopup.firstChild.textContent = "Finished loading. Close popup in 2 seconds";
elPopup.classList.remove("loading");
}
clearTimeout(timer);
//hide popup
timer = setTimeout(() => elPopup.classList.toggle("hidden", !!img.complete), ~~img.complete * 2000);
}
function imageOnLoad(e)
{
e.target.classList.remove("error");
imageFinished(e.target);
}
function imageOnError(e)
{
e.target.classList.add("error");
imageFinished(e.target);
}
div.img
{
position: absolute;
left: 0;
top: 0;
line-height: 100vh;
text-align: center;
width: 100%;
z-index: -2;
}
img
{
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
img.error
{
animation: error infinite 1s ease-in-out alternate;
padding: 1em;
border-radius: 100%;
}
#popup
{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
line-height: 100vh;
text-align: center;
z-index: -1;
background-color: transparent;
opacity: 1;
transition: background-color 1s, opacity .5s;
}
#popup>span
{
background-color: #ffffff7f;
color: black;
border: 1px solid;
padding: 1em;
}
#popup.loading
{
background-color: #0000007f;
}
#popup:not(.hidden) ~ *
{
filter: blur(5px);
}
#popup.loading ~ *
{
filter: blur(10px);
}
#popup.loading>span::before
{
content: "🗘";
width: 1em;
height: 1em;
line-height: 1em;
vertical-align: middle;
text-align: center;
animation: rotate infinite 1s linear;
display: inline-block;
}
#popup.hidden
{
opacity: 0;
}
#keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#keyframes error {
to {box-shadow: 0 0 30px 0 red}
from {box-shadow: 0 0 1px 0 red}
}
<button id="loadGood">load good image</button>
<button id="loadBad">load bad image</button>
<div id="popup" class="hidden"><span></span></div>
<div class="img"><img id="myimage"></div>
I've tried to look for a solution for this but have failed miserably. It's my first ever time using JS (I'm trying to learn) so the possibility of my just not understanding the answers in the search results properly is quite high - sorry about that.
I am wanting a JS carousel, generated from an array, with Prev/Next buttons (ideally responsive etc but that'll come at a later stage), preferably with captions underneath. I can get the carousel to work but I end up getting a text link when I click on either Prev or Next. And I've no idea how to add the caption array underneath (I've taken out the JS for the captions for now because it was messing everything else up even further).
Relevant HTML:
<body onload="changePilt()">
<span id="prev" class="arrow">❮</span>
<div class="karussell" id="karussell">
<img class="karu" name="esislaid">
</div>
<span id="next" class="arrow">❯</span>
<div class="caption">
<h3 name="esikiri"></h3>
</div>
</body>
CSS, just in case:
.karussell {
position: relative;
width: 100%;
max-height: 600px;
overflow: hidden;
}
.arrow {
cursor: pointer;
position: absolute;
top: 40%;
width: auto;
color: #00A7E0;
margin-top: -22px;
padding: 16px;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
#next {
right: 0;
border-radius: 3px 0 0 3px;
}
#prev {
left: 0;
}
.arrow:hover {
background-color: rgba(0,0,0,0.8);
}
.caption {
text-align: center;
color: #00A7E0;
padding: 2px 16px;
}
.karu {
max-width: 75%;
}
#media (max-width:767px){.karu{max-width: 95%;}}
And finally, the dreaded JS:
var i = 0;
var s = 0;
var esileht = [];
var aeg = 5000;
//Image List
esileht[0] = 'img/tooted/raamat/graafvanalinn2016.jpg';
esileht[1] = 'img/tooted/kaart/kaart_taskus_esipool.jpg';
esileht[2] = 'img/tooted/kaart/graafkaart_esikylg.jpg';
//Change Image
function changePilt (){
document.esislaid.src = esileht[i];
if(i < esileht.length -1){
i++;
} else {
i = 0;
}
setTimeout("changePilt()", aeg);
}
document.onload = function() {
}
// Left and Right arrows
//J2rgmine
function jargmine(){
s = s + 1;
s = s % esileht.length;
return esileht [s];
}
//Eelmine
function eelmine(){
if (s === 0) {
s = esileht.length;
}
s = s -1;
return esileht[s];
}
document.getElementById('prev').addEventListener('click', function (e){
document.getElementById('karussell').innerHTML = eelmine();
}
);
document.getElementById('next').addEventListener('click', function (e) {
document.getElementById('karussell').innerHTML = jargmine();
}
);
I'm sure the solution is dreadfully obvious, I just cannot seem to be able to figure it out...
instead of innerHTML change src attribute of image
document.querySelector('#karussell img').src = eelmine();
And
document.querySelector('#karussell img').src = jargmine();
We are using iScroll in our project, and some elements in it's scroll area have mousedown event attached.
On newest build of Google Chrome(55.0.2883.95 (64-bit)) mousedown event is never triggered and the reason is pointerdown event registered by IScroll.
Is there any way around it? I could of course use pointerdown instead of mousedown, but it is not supported in Safari, therefore I would need some dirty browser check.
(function () {
var scroll = new IScroll('#scroller');
document.getElementById('testblock').addEventListener('mousedown', mousedownEventHandler);
function mousedownEventHandler(event) {
console.info(event.type, 'triggered.');
}
})();
body {
padding: 0;
margin: 0;
}
#scroller {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#content {
height: 5000px;
background: white;
}
#testblock {
position: fixed;
top: 0;
width: 100px;
height: 100px;
line-height: 100px;
background: silver;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
<script src="https://rawgit.com/cubiq/iscroll/master/build/iscroll-probe.js"></script>
<div id="scroller">
<div id="content">
<div id="testblock">Click me</div>
</div>
</div>
You need to add the click parameter to the options object.
var scroll = new IScroll('#scroller', {
click: true
});
I have a simple modal which has two divs. I want to have it "close" when either a) hitting esc e.g. keypress key code 27, or b) clicking outside.
I've searched so many posts but so many are js framework specific and/or don't work in the specific situation.
I want to be able to close it on esc or any click outside of the #emod div.
Here is what I have:
<div id="emod-bg"></div><div id="emod"></div>
CSS
#emod-bg
{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #d0d0d0;
opacity: .50;
-webkit-opacity: .5;
-moz-opacity: .5;
filter: alpha(opacity=50);
z-index: 1000;
}
#emod
{
background-color: white;
display: none;
height: 480px;
left: 50%;
margin: -250px 0 0 -160px;
padding: 10px;
position: absolute;
top: 50%;
width: 320px;
z-index: 1000;
}
...and it is activated as follows:
document.getElementById('emod').style.display = "block";
document.getElementById('emod-bg').style.display = "block";
To close the modal when hitting the escape key, just add a keyup event to the document, and then check the keyCode property of the event object.
If you want to close the modal when clicking on the backdrop, just attach a click event and compare event.target to #emod-bg:
Example Here
var modal = document.getElementById('emod-bg');
modal.style.display = "block";
document.addEventListener('keyup', function (e) {
if (e.keyCode === 27) {
modal.style.display = 'none';
}
});
modal.addEventListener('click', function (e) {
if (e.target === e.currentTarget) {
modal.style.display = 'none';
}
});
I my project some times to loading a page it takes around 1 or more minutes so i want to show to user a wating message or wating status.
I my project i have a login.aspxpage with tow buttons and welcome.aspxpage and clientsDatas.aspxpage and a Master page.
I don't found some ways to use JQuery like:
<script type="text/javascript">
function ShowProgress() {
setTimeout(function () {
var modal = $('<div />');
modal.addClass("modal");
$('body').append(modal);
var loading = $(".loading");
loading.show();
var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
loading.css({ top: top, left: left });
}, 200);
}
$('form').live("submit", function () {
ShowProgress();
});
i put that into my MasterPage and in the loading method of the other child pages i put :
if (!IsPostBack)
{
string script = "$(document).ready(function () { $('[id*=bt_submit]').click(); });";
ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
}
but it dosn't work.
that is my CSS:
.modal {
position: fixed;
top: 0;
left: 0;
background-color: black;
z-index: 99;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
min-height: 100%;
width: 100%;
}
.loading {
font-family: Arial;
font-size: 10pt;
border: 5px solid #67CFF5;
width: 200px;
height: 100px;
display: none;
position: fixed;
background-color: White;
z-index: 999;
}
Can i put only one code into my masterPage and it can be executed every time when a submit button of the child pages is clicked ?
Can any one help me?
Because i have a master Page and many child pages i added a part of Jquery code into the master form of my MasterPage and when the masterForm is submited (when submiting is so long it shows the wating image)
JQuery code whitch i added to my masterPage:
<%-- Start of wating message --%>
<script type="text/javascript">
$("#MasterFormID").submit(function () {
$("body").addClass("loading disp");
$("#modal").addClass("disp");
});
</script>
<div id="modal" class="modal" style="text-align: center">
</div>
<%-- End of wating message --%>
The style:
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('../images/ajax-loader-image.gif')
50% 50%
no-repeat;
}
.loading {
overflow: hidden;
}
.disp {
display: block;
}
NB: i have to import JQuery into my masterPage.
So i did that and i worked good for me