Hi,
I am playing around with some code in the before_update hook, that takes some time (5-10 sec). Is there an easy way to make some sort of "progress indicator" or turn the cursor into an hour glass, while the code executes?
Thank you in advance
Kind regards
Peter
Waiting indikation
Re: Waiting indikation
Hi,
you could use CSS to change the cursor appearance - and change it back with some other CSS.
See: https://www.w3schools.com/csSref/pr_class_cursor.asp
Olaf
you could use CSS to change the cursor appearance - and change it back with some other CSS.
See: https://www.w3schools.com/csSref/pr_class_cursor.asp
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
- D Oliveira
- AppGini Super Hero
- Posts: 347
- Joined: 2018-03-04 09:30
- Location: David
Re: Waiting indikation
just adding to that you need a onchange or onclick event (javascript function) to trigger the .css changeonoehring wrote: ↑2020-07-17 12:03Hi,
you could use CSS to change the cursor appearance - and change it back with some other CSS.
See: https://www.w3schools.com/csSref/pr_class_cursor.asp
Olaf
Re: Waiting indikation
Thank you guys, does any of you have an example? I guess that I have to alter the tablename_view.php file?
Re: Waiting indikation
Hi, you can try this:
put this in the header_extras.php
and this in you TABLENAME-dv.js
put this in the header_extras.php
Code: Select all
<style>
.spinnerer {
width: 244px;
height: 100vh;
line-height: 190vh;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
font-size:18px;
color: rgb(206,66,51);
letter-spacing: 0.2em;
}
.spinnerer::before, .spinnerer::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: rgb(206,66,51);
position: absolute;
animation: spinner 0.81s infinite alternate ease-in-out;
-o-animation: spinner 0.81s infinite alternate ease-in-out;
-ms-animation: spinner 0.81s infinite alternate ease-in-out;
-webkit-animation: spinner 0.81s infinite alternate ease-in-out;
-moz-animation: spinner 0.81s infinite alternate ease-in-out;
}
.spinnerer::before {
top: 0;
}
.spinnerer::after {
bottom: 0;
}
@keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-o-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-ms-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-webkit-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-moz-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
</style>
Code: Select all
$j('.container').after('<div class="spinner" style="display: none" >Saving</div>');
function show(id, value) {
$j(id)[0].style.display = value ? 'block' : 'none';
}
$j(function () {
$j('[name="myform"]').submit(function() {
show('.container', false);
show('.spinner', true);
});
});
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: Waiting indikation
Hi pbötcher,
very nice. Thank you for the code - once again.
Olaf
very nice. Thank you for the code - once again.
Olaf
Some postings I was involved, you might find useful:
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
SingleEdit - Prevent concurrent edits on records; Field Permissions; Column-Value-Based-Permissions; Custom (error) message; Audit Log; Backup your database; Two Factor Authentication; Block brute force (failed) logins; Add 2nd SAVE CHANGES button; Place a search on details view
Re: Waiting indikation
Small Correction, just saw that there is spinnerer instead of spinner in the CSS defintions. Use
Code: Select all
<style>
.spinner {
width: 244px;
height: 100vh;
line-height: 190vh;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
font-family: helvetica, arial, sans-serif;
text-transform: uppercase;
font-weight: 900;
font-size:18px;
color: rgb(206,66,51);
letter-spacing: 0.2em;
}
.spinner::before, .spinner::after {
content: "";
display: block;
width: 15px;
height: 15px;
background: rgb(206,66,51);
position: absolute;
animation: spinner 0.81s infinite alternate ease-in-out;
-o-animation: spinner 0.81s infinite alternate ease-in-out;
-ms-animation: spinner 0.81s infinite alternate ease-in-out;
-webkit-animation: spinner 0.81s infinite alternate ease-in-out;
-moz-animation: spinner 0.81s infinite alternate ease-in-out;
}
.spinner::before {
top: 0;
}
.spinner::after {
bottom: 0;
}
@keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-o-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-ms-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-webkit-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
@-moz-keyframes spinner {
0% {
left: 0;
height: 29px;
width: 15px;
}
50% {
height: 8px;
width: 39px;
}
100% {
left: 229px;
height: 29px;
width: 15px;
}
}
</style>
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.
Re: Waiting indikation
Works like a charm! Thanks pböttcher!