{"id":52808,"date":"2021-07-26T03:01:23","date_gmt":"2021-07-25T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52808"},"modified":"2021-07-24T21:01:56","modified_gmt":"2021-07-24T11:01:56","slug":"web-application-controlled-progress-cursor-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-controlled-progress-cursor-primer-tutorial\/","title":{"rendered":"Web Application Controlled Progress Cursor Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Web Application Controlled Progress Cursor Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cursor_progress_between_a_first_and_second_javascript_prompt_popup_window.gif\" title=\"Web Application Controlled Progress Cursor Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Web Application Controlled Progress Cursor Primer Tutorial<\/p><\/div>\n<p>We had occasion to revisit the card game (and more) recent web application exploits highlighted in the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-cursor-tutorial\/' title='Just Javascript Card Game Cursor Tutorial'>Just Javascript Card Game Cursor Tutorial<\/a> thread of blog postings and shaped to play Bridge via &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara' href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara'>https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; and was &#8220;personally relatively&#8221; happy up to the first Javascript prompt popup window.   Huh?!  What&#8217;s with &#8220;personally relatively&#8221;?   Can I be serious?  Well, I&#8217;m insulted!<\/p>\n<p>The thing is, I don&#8217;t mind, when I&#8217;m writing the code <font size=1>(funny about that?!)<\/font> very complex and convoluted prompt window instructions and options. But &#8230;<\/p>\n<ul>\n<li>not everybody is willing to read such long diatribes<\/li>\n<li>actions can speak louder than words, so we figure between those first two prompt windows in a Bridge or 500 card game, it would be beneficial to show a &#8220;progress cursor&#8221; (ie. usually associated with the user waiting for a process to finish) between the first and second prompt windows to help show the players there could be waiting and irrelevant players turning away should all four players want to play fairly in their game<\/li>\n<\/ul>\n<p>It was an interesting Javascript coding exercise &#8230;<\/p>\n<ol>\n<li>(sort of) overload the &#8220;prompt&#8221; function with our inhouse &#8220;superprompt&#8221; function via &#8230;\n<ul>\n<li>globally replace &#8221; prompt(&#8221; with &#8221; superprompt(&#8220;<\/li>\n<li>globally replace &#8220;=prompt(&#8221; with &#8220;=superprompt(&#8220;<\/li>\n<\/ul>\n<\/li>\n<li>add the following Javascript code &#8230;<br \/>\n<code><br \/>\n  var aheadoffirst=(('' + document.URL.replace('?', '&').indexOf('&card_') != -1) ? trueize() : 0);<br \/>\n<br \/>\n  function dbcpp() {<br \/>\n    if (aheadoffirst == 2) {<br \/>\n      document.body.style.cursor='progress';  \/\/ between first and second prompt windows<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    } else if (aheadoffirst == 0) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n    } else {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      setTimeout(dbcpp, 1000);<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n  function trueize() {  \/\/ bit like a promise<br \/>\n    setTimeout(dbcpp, 1000);<br \/>\n    return 1;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function superprompt(opone, optwo) {<br \/>\n    if (aheadoffirst == 3) {<br \/>\n      document.body.style.cursor='pointer';<br \/>\n      aheadoffirst=0;<br \/>\n    } else if (aheadoffirst != 0) {<br \/>\n      aheadoffirst++;<br \/>\n      if (aheadoffirst == 3) {<br \/>\n        document.body.style.cursor='progress'; \/\/ between first and second prompt windows<br \/>\n      }<br \/>\n    }<br \/>\n    return prompt(opone, optwo);<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ol>\n<p> &#8230; which reminded me that we need to learn some more about the <a target=_blank title='Promise object information from w3schools' href='http:\/\/www.w3schools.com\/js\/js_promise.asp'>promise object<\/a>.<\/p>\n<p>See this in action with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html-------------------------------------------------------GETME\" title=\"cards_usefocus.html\">cards_usefocus.html<\/a> code behind the &#8220;Just Javascript&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=y\" title=\"Click picture\">Memories Card Game<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?onewindow=y\" title=\"Click picture\">live run with single window (good for mobile)<\/a> or <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html\" title=\"Click picture\">default live run<\/a> (for your platform, and if non-mobile it will try child popup windows).<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d52808' onclick='var dv=document.getElementById(\"d52808\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/prompt\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d52808' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We had occasion to revisit the card game (and more) recent web application exploits highlighted in the recent Just Javascript Card Game Cursor Tutorial thread of blog postings and shaped to play Bridge via &#8230; https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/cards_usefocus.html?card_memories=04.1:ara &#8230; and was &#8220;personally &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/web-application-controlled-progress-cursor-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[3340,3613,187,2127,652,1837,967,997,1761,1319,1402,1583],"class_list":["post-52808","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-bridge","tag-card-game","tag-cards","tag-cursor","tag-javascript","tag-overload","tag-popup","tag-programming","tag-prompt","tag-tutorial","tag-web-application","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52808"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=52808"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52808\/revisions"}],"predecessor-version":[{"id":52814,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/52808\/revisions\/52814"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=52808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=52808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=52808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}