{"id":2224,"date":"2019-10-12T18:43:47","date_gmt":"2019-10-12T17:43:47","guid":{"rendered":"https:\/\/ibex.tech\/javascript\/?p=2224"},"modified":"2022-02-17T07:14:46","modified_gmt":"2022-02-17T07:14:46","slug":"grey-out-screen-on-form-submit-until-new-page-load","status":"publish","type":"post","link":"https:\/\/ibex.tech\/javascript\/examples-javascript\/animation\/grey-out-screen-on-form-submit-until-new-page-load","title":{"rendered":"Grey out screen on form submit until new page load"},"content":{"rendered":"\n
Add just under the page <body> tag – Normal<\/h5>\n\n\n\n
<body>\n  <!------------------------------------->\n  <!---- PAGE LOADING COVER ELEMENT ----->\n  <!------------------------------------->\n  <div id=\"page_loading_cover\"><\/div>\n  <div id=\"page_loading_cover_animated_icon\"><\/div>\n  <script>\n    \/* Remove greyed loading page cover once page has finished loading *\/\n      \/\/$(window).on('load', function() {      \/\/Don't use this as it won't trigger if user presses their back button\n      $(window).on('pageshow', function() {    \/\/'pageshow' triggers for page load and back button back to page\n       $(\"#page_loading_cover\").hide();\n      page_loading_cover.style.visibility = \"hidden\" ;\n      page_loading_cover_animated_icon.style.visibility = \"hidden\" ;\n    });\n\n    \/* Turn on greyed loading page cover *\/\n    function DisablePageUntilReloaded() {\n      $(\"#page_loading_cover\").show();\n      page_loading_cover.style.visibility = \"visible\" ;\n      page_loading_cover_animated_icon.style.visibility = \"visible\" ;\n    }\n  <\/script><\/code><\/pre>\n\n\n\n
Add just under the page <body> tag – WordPress<\/h5>\n\n\n\n
 (Same but needs the ‘$’ changed to ‘jQuery’ or you get “TypeError: $ is not a function” console errors) <\/p>\n\n\n\n
<body>\n  <!------------------------------------->\n  <!---- PAGE LOADING COVER ELEMENT ----->\n  <!------------------------------------->\n  <div id=\"page_loading_cover\"><\/div>\n  <div id=\"page_loading_cover_animated_icon\"><\/div>\n  <script>\n    \/* Remove greyed loading page cover once page has finished loading *\/\n    jQuery(window).on('load', function() {\n       jQuery(\"#page_loading_cover\").hide();\n      page_loading_cover.style.visibility = \"hidden\" ;\n      page_loading_cover_animated_icon.style.visibility = \"hidden\" ;\n    });\n\n    \/* Turn on greyed loading page cover *\/\n    function DisablePageUntilReloaded() {\n      jQuery(\"#page_loading_cover\").show();\n      page_loading_cover.style.visibility = \"visible\" ;\n      page_loading_cover_animated_icon.style.visibility = \"visible\" ;\n    }\n  <\/script><\/code><\/pre>\n\n\n\n
Create a style for it<\/h5>\n\n\n\n
\/*----- PAGE LOADING COVER ELEMENT -----*\/\n#page_loading_cover {\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  top:0;\n  left: 0;\n  background: #000;\n  opacity: 0.5;\n  z-index:9999;\n  visibility: hidden;  \/*Include this so element will only be shown when DisablePageUntilReloaded() is called*\/\n}\n\n\/*Spinning icon*\/\n#page_loading_cover_animated_icon {\n  border: 12px solid #f3f3f3;\n  border-radius: 50%;\n  border-top: 12px solid #3498db;\n  width: 80px;\n  height: 80px;\n  -webkit-animation: animated_icon_spin 2s linear infinite; \/* Safari *\/\n  animation: animated_icon_spin 2s linear infinite;\n  \n  position: fixed;\n  top: 50%;\n  left: 50%;\n  margin-top: -40px;\n  margin-left: -40px;\n  z-index:9999;\n  visibility: hidden;  \/*Include this so element will only be shown when DisablePageUntilReloaded() is called*\/\n}\n\/* Safari *\/\n@-webkit-keyframes animated_icon_spin {\n  0% { -webkit-transform: rotate(0deg); }\n  100% { -webkit-transform: rotate(360deg); }\n}\n\n@keyframes animated_icon_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}<\/code><\/pre>\n\n\n\n
For any form submit you want to trigger it use onsubmit<\/h5>\n\n\n\n
<form id=\"my_form\" onsubmit=\"return DisablePageUntilReloaded()\" action=\"\\my_page.php\" method=\"POST\"><\/code><\/pre>\n\n\n\n
If you have any onchange submit form elements you will need to call the function separately as onchange .submit won’t trigger it:<\/p>\n\n\n\n
<input type=\"checkbox\" name=\"MyCheckbox\" value=\"1\" onchange=\"DisablePageUntilReloaded(); my_form.submit();\" ><\/code><\/pre>\n\n\n\n
For any html link  you want to trigger it use onclick<\/h5>\n\n\n\n
<a href=\"\/my_page.php\" onclick=\"DisablePageUntilReloaded()\" >Click me<\/a><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Add just under the page <body> tag – Normal Add just under the page <body> tag – WordPress (Same but needs the ‘$’ changed to ‘jQuery’ or you get “TypeError: $ is not a function” console errors) Create a style for it For any form submit you want to trigger it use onsubmit If you […]<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[187],"tags":[],"class_list":["post-2224","post","type-post","status-publish","format-standard","hentry","category-animation"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/comments?post=2224"}],"version-history":[{"count":8,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2224\/revisions"}],"predecessor-version":[{"id":2495,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/posts\/2224\/revisions\/2495"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/media?parent=2224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/categories?post=2224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/javascript\/wp-json\/wp\/v2\/tags?post=2224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}