{"id":61354,"date":"2023-10-30T03:01:29","date_gmt":"2023-10-29T17:01:29","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61354"},"modified":"2023-10-30T08:39:56","modified_gmt":"2023-10-29T22:39:56","slug":"next-episode-button-scenarios-functional-transition-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/next-episode-button-scenarios-functional-transition-tutorial\/","title":{"rendered":"Next Episode Button Scenarios Functional Transition Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Next Episode Button Scenarios Functional Transition Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios_keyframes.jpg\" title=\"Next Episode Button Scenarios Functional Transition Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Next Episode Button Scenarios Functional Transition Tutorial<\/p><\/div>\n<p>Revisiting the recent <a title='Next Episode Button Scenarios Primer Tutorial' href='#nebspt'>Next Episode Button Scenarios Primer Tutorial<\/a> has a couple of advantages &#8230;<\/p>\n<ol>\n<li>we managed to make keyframes\/transitions logic start working for the 3 of 5 ideas we had regarding our Short Wait <font size=1>(for new episode streaming service binge watching)<\/font> scenario &#8230; and &#8230;<\/li>\n<li>today, paying more attention, we can fix the button wording seen on <a target=_blank title=Frasier href='https:\/\/www.stan.com.au\/watch\/frasier'>Frasier<\/a>, that we&#8217;d mixed up &#8230; in that &#8230;\n<ul>\n<li>linear gradient was on a button with the wording &#8230;<br \/>\n<code><br \/>\n&#9654; Play Now<br \/>\n<\/code>\n<\/li>\n<li>and perhaps &#8220;headed off at the pass&#8221; click of &#8230;<br \/>\n<code><br \/>\nMore Episodes<br \/>\n<\/code><br \/>\n&#8230; button, giving us the chance to fix this &#8220;misrememberance&#8221;\n<\/li>\n<\/ul>\n<\/ol>\n<p>Regarding linear gradients, guess it is important not to think all linear gradient keyframes\/transitions attempts will function, an example being our attempt to make happen &#8230;<\/p>\n<p><strike style=color:purple;><br \/>\n&lt;style&gt;<br \/>\n<code><br \/>\n@keyframes fadebutton { \/* Thanks to https:\/\/ide.geeksforgeeks.org\/online-html-editor\/4f0ce33b-a6e5-463e-8398-9500b4752d90 *\/<br \/>\n  from {<br \/>\n    background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    background-image: linear-gradient(to right, lightblue 100%, rgb(255,255,127) 0%);<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<br \/>\n<\/strike><\/p>\n<p> &#8230; failing, the day before yesterday.  We&#8217;ve bypassed this &#8220;not working&#8221; linear gradient usage example for a new idea combining &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Overlay blog postings at this blog' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>&#8220;overlay&#8221;<\/a> element ideas &#8230; combined with &#8230;<\/li>\n<li>keyframes\/transitions usage &#8230; <font color=blue>more along your traditional numerical usage<\/font>, linking it to a <i>width<\/i> HTML element <font size=1>CSS<\/font> property &#8230;<br \/>\n<code><br \/>\n   <font size=1>function pmstuff() {<\/font><br \/>\n     var buts=document.getElementById('bwait').getBoundingClientRect();<br \/>\n     var divs=document.getElementById('dwait').getBoundingClientRect();<br \/>\n     var svgs=document.getElementById('mysvg').getBoundingClientRect();<br \/>\n     document.getElementById('dstyle').innerHTML+='&lt;style&gt;  .wbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + buts.height + 'px; top:' + buts.top + 'px; left:' + buts.left + 'px; position:absolute;  -webkit-animation: widthbutton 18s ease-out infinite; -moz-animation: widthbutton 18s ease-out infinite; animation: widthbutton 18s ease-out infinite; } <font color=blue>@keyframes widthbutton { 0% { width: 0px; } 100% { width: ' + buts.width + 'px; } }<\/font> &lt;\/style&gt;';<br \/>\n     document.getElementById('delement').innerHTML+='&lt;button id=obut class=wbutton&gt;&lt;\/button&gt;';<br \/>\n     document.getElementById('dstyle').innerHTML+='&lt;style&gt;  .dbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + divs.height + 'px; top:' + divs.top + 'px; left:' + divs.left + 'px; position:absolute;  -webkit-animation: widthdiv 18s ease-out infinite; -moz-animation: widthdiv 18s ease-out infinite; animation: widthdiv 18s ease-out infinite; } <font color=blue>@keyframes widthdiv { 0% { width: 0px; } 100% { width: ' + divs.width + 'px; } }<\/font> &lt;\/style&gt;';<br \/>\n     document.getElementById('delement').innerHTML+='&lt;button id=dbut class=dbutton&gt;&lt;\/button&gt;';<br \/>\n     document.getElementById('dstyle').innerHTML+='&lt;style&gt;  .sbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + svgs.height + 'px; top:' + svgs.top + 'px; left:' + svgs.left + 'px; position:absolute;  -webkit-animation: widthsvg 18s ease-out infinite; -moz-animation: widthsvg 18s ease-out infinite; animation: widthsvg 18s ease-out infinite; } <font color=blue>@keyframes widthsvg { 0% { width: 0px; } 100% { width: ' + svgs.width + 'px; } }<\/font> &lt;\/style&gt;';<br \/>\n     document.getElementById('delement').innerHTML+='&lt;button id=sbut class=sbutton&gt;&lt;\/button&gt;';<br \/>\n     <font size=1>var prec=document.getElementsByTagName('progress')[0].getBoundingClientRect();<br \/>\n     var mrec=document.getElementsByTagName('meter')[0].getBoundingClientRect();<br \/>\n     document.getElementById('doverlay').innerHTML+='&lt;span onclick=\"event.stopPropagation(); ouralert(' + \"'Next Episode.'\" + '); document.getElementById(' + \"'myvideo'\" + ').style.opacity=' + \"'1.0'\" + '; document.getElementById(' + \"'myvideo'\" + ').play();  \" id=pspan style=\"background-color:transparent;position:absolute;top:' + eval(20 + prec.top) + 'px;left:' + eval(20 + prec.left) + 'px;z-index:99;\"&gt;&#9654; Play Now&lt;\/span&gt;';<br \/>\n     document.getElementById('doverlay').innerHTML+='&lt;span onclick=\"event.stopPropagation(); ouralert(' + \"'Next Episode.'\" + '); document.getElementById(' + \"'myvideo'\" + ').style.opacity=' + \"'1.0'\" + '; document.getElementById(' + \"'myvideo'\" + ').play();  \" id=mspan style=\"background-color:transparent;position:absolute;top:' + eval(20 + mrec.top) + 'px;left:' + eval(20 + mrec.left) + 'px;z-index:99;\"&gt;&#9654; Play Now&lt;\/span&gt;';<br \/>\n     setInterval(aunit, 180);<br \/>\n   }<\/font><br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html-GETME\">short_wait_scenarios.html<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html\">Short Wait Scenario<\/a> web application.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-next-episode-button-scenarios-primer-tutorial\/'>New Next Episode Button Scenarios Primer Tutorial<\/a>.<\/p-->\n<hr>\n<p id='nebspt'>Previous relevant <a target=_blank title='Next Episode Button Scenarios Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/next-episode-button-scenarios-primer-tutorial\/'>Next Episode Button Scenarios Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Next Episode Button Scenarios Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/next_episode_button.gif\" title=\"Next Episode Button Scenarios Primer Tutorial\" style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Next Episode Button Scenarios Primer Tutorial<\/p><\/div>\n<p>We were streaming episodes of <a target=_blank title=Frasier href='https:\/\/www.stan.com.au\/watch\/frasier'>Frasier<\/a>, effectively &#8220;binge watching&#8221;, the other day, on Stan, and were impressed by the cuteness of the &#8230;<\/p>\n<blockquote><p>\nNext episode &#8230;\n<\/p><\/blockquote>\n<p> &#8230; button &#8220;linear gradient&#8221; look.  So we wrote a <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html_GETME\">&#8220;proof of concept&#8221;<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/short_wait_scenarios.html\">Short Wait Scenario<\/a> web application featuring five ideas we&#8217;ve had &#8230;<\/p>\n<ul>\n<li>button &#8230; using linear-gradient background-image &#8230; using &#8220;keyframes&#8221; and &#8220;transitions&#8221;<\/li>\n<li>progress &#8230; with overlayed span text<\/li>\n<li>meter &#8230; with overlayed span text<\/li>\n<li>div &#8230; using linear-gradient background-image &#8230; using &#8220;keyframes&#8221; and &#8220;transitions&#8221;<\/li>\n<li>SVG &#8230; using text subelement SVG element class pointing at linear-gradient background-image &#8230; using &#8220;keyframes&#8221; and &#8220;transitions&#8221;<\/li>\n<\/ul>\n<p> &#8230; to &#8220;semi-simulate&#8221; what that Stan button achieves <font size=1>(but we can&#8217;t entirely with the current restriction with video playing on modern web browsers that a real user created button press should happen on the webpage before any media playing &#8230; hence the &#8220;Okay to Wait &#8230;&#8221; button we&#8217;re asking you to press to simulate Stan binge watching mode)<\/font> and found the <i>keyframes<\/i> <i>transition<\/i> work not fast enough on this first draft.  We&#8217;ll do some more research, here.<\/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='#d61330' onclick='var dv=document.getElementById(\"d61330\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wait\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61330' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\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='#d61354' onclick='var dv=document.getElementById(\"d61354\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61354' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Revisiting the recent Next Episode Button Scenarios Primer Tutorial has a couple of advantages &#8230; we managed to make keyframes\/transitions logic start working for the 3 of 5 ideas we had regarding our Short Wait (for new episode streaming service &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/next-episode-button-scenarios-functional-transition-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":[4,12,14,37],"tags":[84,126,127,1896,4527,174,211,281,2380,342,4524,385,576,652,675,2020,1517,894,997,1226,2378,2674,1319,1369,4525,1719,4526,2257],"class_list":["post-61354","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-event-driven-programming","category-tutorials","tag-animation-2","tag-background","tag-background-image","tag-binge","tag-bingeing","tag-button","tag-click","tag-css","tag-delay","tag-div","tag-elementproress","tag-emoji","tag-html","tag-javascript","tag-keyframes","tag-linear-gradient","tag-meter","tag-overlay","tag-programming","tag-svg","tag-transition","tag-transitions","tag-tutorial","tag-video","tag-wait","tag-watch","tag-watching","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61354"}],"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=61354"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61354\/revisions"}],"predecessor-version":[{"id":61371,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61354\/revisions\/61371"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}