Tag Archives: IFRAME

Editable Calendar PHP Tutorial

Up until yesterday’s Editable Calendar Collaboration Tutorial the roles for PHP were … help bring non default yellow span element text over to any Google Translate language translation … help reduce URL size for SMS links … otherwise … if called under other conditions pass content through to the HTML webpage … and today, just before “otherwise” above, we want to add … Offer calendar timestamp equivalents that are not the Gregorian calendar, out of Julian, French, Jewish … which PHP Calendar Functions can help with, via HTML iframe src attribute calling URLs like … https://www.rjmprogramming.com.au/calendar_contenteditable.php?docals=y&monththe=8&yearthe=2026&datethe=1 … involving, in the changed calendar_contenteditable.php helping PHP … <?php // calendar_contenteditable.php // RJM Programming – September, 2026 // Help out calendar_contenteditable.html error_reporting(E_ALL); function extended_jdtofrench($juliandate) { // thanks to https://www.php.net/manual/en/function.jdtofrench.php if ($juliandate > 2380945) { // jdtofrench () only accepts dates until september 1806 $gregorian_date = jdtogregorian ($juliandate); $temp = explode (‘/’, $gregorian_date); $year = $temp[2]; $juliandate = gregoriantojd ($temp[0], $temp[1], 1805); $republican_date = jdtofrench ($juliandate); $republican_date = explode (‘/’, $republican_date); $diff = $year – 1805; $republican_date[2] = $republican_date[2] + $diff; } else { $republican_date = jdtofrench($juliandate); } return $republican_date[1] . ‘/’ . (1 + $republican_date[0]) . ‘/’ . $republican_date[2]; } function mdytodmy($inv) { $things=explode(‘/’, $inv); if (sizeof($things) == 3) { return ” . $things[1] . ‘/’ . (1 + $things[0]) . ‘/’ . $things[2]; } return $inv; } function mdytodmyj($inv) { $things=explode(‘/’, $inv); if (sizeof($things) == 3) { return ” . $things[1] . ‘/’ . (0 + $things[0]) . ‘/’ . $things[2]; } return $inv; } if (isset($_GET[‘docals’]) && isset($_GET[‘monththe’]) && isset($_GET[‘yearthe’])) { //data-gregorian=” data-julian=” data-jewish=” data-french=” $onl=”; $jewishtsh=”; $frenchts=”; $gregdate=’1′; $gregmonth=” . $_GET[‘monththe’]; $gregyear=” . $_GET[‘yearthe’]; if (isset($_GET[‘datethe’])) { $gregdate=” . $_GET[‘datethe’]; } $jdnum=gregoriantojd($gregmonth, $gregdate, $gregyear); $gregoriants=” . $gregmonth . ‘/’ . $gregdate . ‘/’ . $gregyear; $frenchts=extended_jdtofrench(($jdnum + 2)); $jewishts=jdtojewish(($jdnum + 1)); $juliants=jdtojulian($jdnum); $jewishtsz=jdtojewish(($jdnum + 1), true); $jewishtsh=iconv(‘WINDOWS-1255’, ‘UTF-8’, $jewishtsz); $onl.=” var ispans=0, spans=parent.document.getElementsByTagName(‘span’); “; $onl.=” parent.document.getElementById(‘calcap’).setAttribute(‘data-gregorian’, ‘” . mdytodmy($gregoriants) . “‘); spans[1].setAttribute(‘data-gregorian’, ‘” . mdytodmy($gregoriants) . “‘); “; $onl.=” parent.document.getElementById(‘calcap’).setAttribute(‘data-julian’, ‘” . mdytodmy($juliants) . “‘); spans[1].setAttribute(‘data-julian’, ‘” . mdytodmy($juliants) . “‘); “; $onl.=” parent.document.getElementById(‘calcap’).setAttribute(‘data-french’, ‘” . $frenchts . “‘); spans[1].setAttribute(‘data-french’, ‘” . $frenchts . “‘); “; $onl.=” parent.document.getElementById(‘calcap’).setAttribute(‘data-jewish’, ‘” . mdytodmyj($jewishts) . “‘); spans[1].setAttribute(‘data-jewish’, ‘” . mdytodmyj($jewishts) . “‘); “; $onl.=” parent.document.getElementById(‘calcap’).setAttribute(‘data-jewishy’, ‘” . $jewishtsh . “‘); spans[1].setAttribute(‘data-jewishy’, ‘” . $jewishtsh . “‘); “; if (5 == 5) { for ($ioff=1; $ioff<=31; $ioff++) { $jdnum++; $gregoriants=” . $gregmonth . ‘/’ … Continue reading →

Posted in eLearning, Event-Driven Programming, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Block Calendar Game Tutorial

Yes, today’s blog posting title kind of gives the game away, regarding what we were getting at with yesterday’s Horizontal Game Soft Link Resources Tutorial‘s operating system Soft Links preparation work, help with a … Horizontal Block Calendar Game … being that new possibility. Yesterday’s work allowed that any day number within a month of any year can be linked to an image, and because, in that form, it only has to be in the Stock section, where it has … filter: brightness(0); … anonymity anyway, and then can be adjusted for the visible cells of dominoes above that to continue on as a Dominoes Horizontal Block Game. This way these Horizontal Block Calendar Game differences from the Dominoes Horizontal Block Game are three fold … dominoes in the Stock are organized in a Calendar fashion … for each first time selection of dominoes for each of the two players, sets of 7 dominoes are selected by each player, rather than the web application doing this programmatically months with more than 28 (the number of domino tiles) will yield up to 3 mystery cell scoring opportunity cells … in the changed eighteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Game Soft Link Resources Tutorial is shown below. After yesterday’s Horizontal Block Game CSS Animation Tutorial, today we’re revisiting … resources … reminiscent of our start to the current “Dominoes Game And On” blog thread back in it’s early days Dominoes Game Sections Tutorial discussion. Perhaps we should hone in on a subtitle of … pseudo resources … for today’s revisit here. Why? Well, on macOS (here with our MAMP local Apache/PHP/MySql web server) and the Linux operating system of our RJM Programming Apache/PHP/MySql web server there is this wonderful concept of … Soft Links … (or Symbolic Links) available to us via those operating system smarts. And, not often, but sometimes, regarding web applications, those “soft link” ideas can be harnessed for “the practical good” … aaaaaaaahhhhhhhhh! We are not letting on, yet, what the future plan for using this is (though you can probably guess?!), but we wrote this Korn Shell (placed in the web server relevant Games/Dominoes folder (cding to it before running)) … #!/bin/ksh # dominoes_(3 + 1)_(9 % 7).png … then swap as required ln -s dominoes_2_4.png dominoes_1_9.png ln -s dominoes_1_4.png dominoes_1_8.png ln -s dominoes_0_4.png dominoes_1_7.png # dominoes_(3 + 0)_(9 % 7).png … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Games, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Game Soft Link Resources Tutorial

After yesterday’s Horizontal Block Game CSS Animation Tutorial, today we’re revisiting … resources … reminiscent of our start to the current “Dominoes Game And On” blog thread back in it’s early days Dominoes Game Sections Tutorial discussion. Perhaps we should hone in on a subtitle of … pseudo resources … for today’s revisit here. Why? Well, on macOS (here with our MAMP local Apache/PHP/MySql web server) and the Linux operating system of our RJM Programming Apache/PHP/MySql web server there is this wonderful concept of … Soft Links … (or Symbolic Links) available to us via those operating system smarts. And, not often, but sometimes, regarding web applications, those “soft link” ideas can be harnessed for “the practical good” … aaaaaaaahhhhhhhhh! We are not letting on, yet, what the future plan for using this is (though you can probably guess?!), but we wrote this Korn Shell (placed in the web server relevant Games/Dominoes folder (cding to it before running)) … #!/bin/ksh # dominoes_(3 + 1)_(9 % 7).png … then swap as required ln -s dominoes_2_4.png dominoes_1_9.png ln -s dominoes_1_4.png dominoes_1_8.png ln -s dominoes_0_4.png dominoes_1_7.png # dominoes_(3 + 0)_(9 % 7).png … then swap as required ln -s dominoes_2_3.png dominoes_0_9.png ln -s dominoes_1_3.png dominoes_0_8.png ln -s dominoes_0_3.png dominoes_0_7.png # dominoes_(3 + 2)_(9 % 7).png … then swap as required ln -s dominoes_2_5.png dominoes_2_9.png ln -s dominoes_1_5.png dominoes_2_8.png ln -s dominoes_0_5.png dominoes_2_7.png ln -s dominoes_0_1.png dominoes_1_0.png ln -s dominoes_0_2.png dominoes_2_0.png ln -s dominoes_0_3.png dominoes_3_0.png ln -s dominoes_0_4.png dominoes_4_0.png ln -s dominoes_0_5.png dominoes_5_0.png ln -s dominoes_0_6.png dominoes_6_0.png ln -s dominoes_1_2.png dominoes_2_1.png ln -s dominoes_1_3.png dominoes_3_1.png ln -s dominoes_1_4.png dominoes_4_1.png ln -s dominoes_1_5.png dominoes_5_1.png ln -s dominoes_1_6.png dominoes_6_1.png ln -s dominoes_2_3.png dominoes_3_2.png ln -s dominoes_2_4.png dominoes_4_2.png ln -s dominoes_2_5.png dominoes_5_2.png ln -s dominoes_2_6.png dominoes_6_2.png ln -s dominoes_3_4.png dominoes_4_3.png ln -s dominoes_3_5.png dominoes_5_3.png ln -s dominoes_3_6.png dominoes_6_3.png ln -s dominoes_4_5.png dominoes_5_4.png ln -s dominoes_4_6.png dominoes_6_4.png ln -s dominoes_5_6.png dominoes_6_5.png … and in our web server’s cPanel Terminal ran that via … ksh -x dominoes_more.ksh … to create soft links, so that … # ls -la dominoes_[0-9]*.png -rw-r–r– 1 rjmprogr rjmprogr 6281 Aug 11 20:23 dominoes_0_0.png -rw-r–r– 1 rjmprogr rjmprogr 8277 Aug 11 20:23 dominoes_0_1.png -rw-r–r– 1 rjmprogr rjmprogr 10040 Aug 11 20:22 dominoes_0_2.png -rw-r–r– 1 rjmprogr rjmprogr 11113 Aug 11 20:22 dominoes_0_3.png -rw-r–r– 1 rjmprogr rjmprogr 12169 Aug 11 20:22 dominoes_0_4.png -rw-r–r– 1 rjmprogr rjmprogr 14102 Aug 11 20:22 dominoes_0_5.png -rw-r–r– 1 rjmprogr rjmprogr 13251 Aug … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Operating System, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Block Game CSS Animation Tutorial

Today we … extend yesterday’s Horizontal Block Game Random Image Types Tutorial‘s ondblclick and oncontextmenu (or ontouchmove) “drill downs” to other Wikipedia image Block Game choices … and … allow for a CSS @keyframes animation definition to affect … CSS @keyframes animation default initialization that may be dynamically called into play at a later time … <style> @keyframes myanim { 0%, 58.33% { filter: invert(0%) contrast(100%); } 75%, 100% { filter: invert(100%) contrast(800%); } } </style> … and editable via Javascript … animans=prompt(‘Optionally enter CSS @keyframes animation definition.’, (animval == ‘y’ ? document.getElementById(‘mysel’).getAttribute(‘data-anim’) : animval)); … via a new dropdown option … Optionally passed across in a new animated argument, processed by initialization Javascript … var animgprefix=”, animgsuffix=”; var animval=’y’, animdef=”@keyframes myanim { 0%, 58.33% { filter: invert(0%) contrast(100%); } 75%, 100% { filter: invert(100%) contrast(800%); } } “; var animclass=(location.search.split(‘animated=’)[1] ? decodeURIComponent(location.search.split(‘animated=’)[1].split(‘&’)[0]) : ”); if (animclass != ”) { if ((” + animclass).toLowerCase().indexOf(‘@keyframes’) != -1) { animval=animclass; } else if ((” + animclass).toLowerCase() == ‘y’) { animval=animdef; } animclass=’ animated’; } … as well as document.body onload called … if ((” + animval).toLowerCase().indexOf(‘@keyframes’) != -1) { if (animval != document.getElementById(‘mysel’).getAttribute(‘data-anim’)) { document.getElementById(‘mysel’).setAttribute(‘data-anim’, animval); } document.getElementById(‘dstyle’).innerHTML+='<st’ + ‘yle> ‘ + animval + ‘ </st’ + ‘yle>’; document.getElementById(‘optanim’).innerHTML=’Animation ‘ + animval + ‘ … ‘; } In Play at the time of relevance … <style> .animated:not([style*=”filter”]) { animation: myanim 12s infinite; } </style> Javascript dynamically called into play wherever in the code … document.getElementById(‘dstyle’).innerHTML+='<st’ + ‘yle> ‘ + animval + ‘ </st’ + ‘yle>’; … and relevant HTML elements have class=animated applied to them dynamically … for example … document.getElementById(‘seven1’).innerHTML+=brhuh + othersmaybe(‘<img’ + (animclass == ” ? ” : ‘ class=animated’) + ‘ draggable=”true” ondragstart=”goone(event.target);” onclick=”goone(this);” style=width:80px; class=”player1″ id=”‘ + player1arr[ij] + ‘” src=”‘ + player1arr[ij] + ‘.png”></img>’); … happens … … to add to the changed seventeenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Random Image Types Tutorial is shown below. Around here, further to the recent Horizontal Block Game Less Personal Types Tutorial‘s Horizontal Block Game incarnation developments, today we present two new Random Image choices we turn to quite a bit, those being … the great Lorem Picsum repository of random imagery, helped out by does lorem picsum url allow for an image ID‘s great advice … and … inhouse WordPress Blog tutorial URL involving ?mustbedated=YYYYMMDD referencing … offering both … image … Continue reading →

Posted in Animation, eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Block Game Random Image Types Tutorial

Around here, further to the recent Horizontal Block Game Less Personal Types Tutorial‘s Horizontal Block Game incarnation developments, today we present two new Random Image choices we turn to quite a bit, those being … the great Lorem Picsum repository of random imagery, helped out by does lorem picsum url allow for an image ID‘s great advice … and … inhouse WordPress Blog tutorial URL involving ?mustbedated=YYYYMMDD referencing … offering both … image randomosity possibilities … as well as … means to recall same content … via ondblclick … function odc(evt) { var evttarget=evt.target, spanarr=[], jspan=0; evt.stopPropagation(); if (evttarget.outerHTML.indexOf(‘<img’) == 0) { spanarr=document.getElementsByTagName(‘span’); for (jspan=0; jspan<spanarr.length; jspan++) { if (evttarget.outerHTML.indexOf(‘<img’) == 0) { if (spanarr[jspan].innerHTML.indexOf(evt.target.outerHTML) != -1) { evttarget=spanarr[jspan]; } } } } if (eval(” + evttarget.innerHTML.split(‘ data-url=”‘).length) >= 2) { etarget=evttarget; window.open(evttarget.innerHTML.split(‘ data-url=”‘)[1].split(‘”‘)[0], ‘_blank’, ‘top=10,left=’ + eval(-600 + screen.width) + ‘,width=600,height=800’); } } … and oncontextmenu (or ontouchmove) … function onc(evt) { var evttarget=evt.target, spanarr=[], jspan=0; evt.preventDefault(); if (evttarget.outerHTML.indexOf(‘<img’) == 0) { spanarr=document.getElementsByTagName(‘span’); for (jspan=0; jspan<spanarr.length; jspan++) { if (evttarget.outerHTML.indexOf(‘<img’) == 0) { if (spanarr[jspan].innerHTML.indexOf(evt.target.outerHTML) != -1) { evttarget=spanarr[jspan]; } } } } if (eval(” + evttarget.innerHTML.split(‘ data-url=”‘).length) >= 3) { window.open(evttarget.innerHTML.split(‘ data-url=”‘)[2].split(‘”‘)[0], ‘_blank’, ‘top=10,left=’ + eval(-600 + screen.width) + ‘,width=600,height=800′); } } … conduits, for an inquisitive user, as well, in the changed sixteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Less Personal Types Tutorial is shown below. Onto yesterday’s Horizontal Block Game Personalized Second Image Type Tutorial‘s new Horizontal Block Game types, today, we add a variety more number of emoji and image type game incarnations, as per … ++DominoesShapeAnimalFoodTransportActivityMathematicsMoonAstrologyFlagChessNumberEmail …PlanetCardOther TimeZones (further to yours below)Sydney … that last one the only “Personalized” one for us here, near Sydney, Australia. And that second last one, accessing Wikipedia image URLs, thanks, involving other TimeZones (we’ve found out about using PHP TimeZone information functionality in the past), to make happen, involved a dropdown off a dropdown, as per (this Javascript DOM positioning this second dropdown, as the user has selected this second last option) … document.getElementById(‘sele’).style.position=’absolute’; osel.style.width=’290px’; document.getElementById(‘sele’).style.left=” + eval(-30 + eval(” + osel.getBoundingClientRect().right)) + ‘px’; document.getElementById(‘sele’).style.top=” + eval(36 + eval(” + osel.getBoundingClientRect().top)) + ‘px’; document.getElementById(‘sele’).style.zIndex=’211′; document.getElementById(‘sele’).style.display=’block’; … in the changed fifteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Personalized Second Image Type Tutorial is shown below. After yesterday’s Horizontal Block Game Types Tutorial a cruel streak … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Parent and Child Popup and Iframe Tutorial

Around here, we like both of the approaches below to setting up a parent (web application) calling a child (web application) … iframe popup window … scenario. Curiously, though, via the second argument of a window.open call from the parent) specifying an iframe name attribute in that second argument you can set up … The Best of Both Iframe Worlds To do this … var woo=null; woo=window.open(document.getElementById(‘myform’).action, ‘myif’, ‘top=100,left=100,width=600,height=600′); … is quite interesting … well, you had to be there to see it for yourself?! as far as the parent is concerned the popup (it being a window object thaing, we’re guessing) detection happens some seconds before the iframe (it being a document object (being loaded successfully) thaing, we’re guessing … what we like to think of as the iframe onload event being that gem of an event to be able to have a “restart of proceedings” and which we like to think of as “client pre-emptive iframe” thinking) detection … while … as far as the child is concerned (we made happen in the changed sixteenth draft Dominoes Block Game, we talked about recently with Horizontal Block Game Less Personal Types Tutorial, you can try way below) … if (window.opener) { document.getElementById(‘mysel’).title+=’ … opened in popup via ‘ + window.opener.document.URL + ‘ at ‘ + (” + (new Date())); } if (window.parent != window.self) { document.getElementById(‘mysel’).title+=’ … opened in iframe via ‘ + parent.document.URL + ‘ at ‘ + (” + (new Date())); } … the popup and iframe usage (of itself) happen at the same time (admittedly … doh! … but, we like to see it for ourselves) … using the proof of concept web application you can try below … Previous relevant Horizontal Block Game Less Personal Types Tutorial is shown below. Onto yesterday’s Horizontal Block Game Personalized Second Image Type Tutorial‘s new Horizontal Block Game types, today, we add a variety more number of emoji and image type game incarnations, as per … ++DominoesShapeAnimalFoodTransportActivityMathematicsMoonAstrologyFlagChessNumberEmail …PlanetCardOther TimeZones (further to yours below)Sydney … that last one the only “Personalized” one for us here, near Sydney, Australia. And that second last one, accessing Wikipedia image URLs, thanks, involving other TimeZones (we’ve found out about using PHP TimeZone information functionality in the past), to make happen, involved a dropdown off a dropdown, as per (this Javascript DOM positioning this second dropdown, as the user has selected this second last option) … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Block Game Less Personal Types Tutorial

Onto yesterday’s Horizontal Block Game Personalized Second Image Type Tutorial‘s new Horizontal Block Game types, today, we add a variety more number of emoji and image type game incarnations, as per … ++DominoesShapeAnimalFoodTransportActivityMathematicsMoonAstrologyFlagChessNumberEmail …PlanetCardOther TimeZones (further to yours below)Sydney … that last one the only “Personalized” one for us here, near Sydney, Australia. And that second last one, accessing Wikipedia image URLs, thanks, involving other TimeZones (we’ve found out about using PHP TimeZone information functionality in the past), to make happen, involved a dropdown off a dropdown, as per (this Javascript DOM positioning this second dropdown, as the user has selected this second last option) … document.getElementById(‘sele’).style.position=’absolute’; osel.style.width=’290px’; document.getElementById(‘sele’).style.left=” + eval(-30 + eval(” + osel.getBoundingClientRect().right)) + ‘px’; document.getElementById(‘sele’).style.top=” + eval(36 + eval(” + osel.getBoundingClientRect().top)) + ‘px’; document.getElementById(‘sele’).style.zIndex=’211′; document.getElementById(‘sele’).style.display=’block’; … in the changed fifteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Personalized Second Image Type Tutorial is shown below. After yesterday’s Horizontal Block Game Types Tutorial a cruel streak in us might say … Emojis Smemojis … as we return to another image (element img) scenario, except this time they take the form of … Background image pairs (thanks to Wikipedia, here) for the left and right span element amigos of a Domino tile image’s hosting span element (introduced in yesterday’s work) So what’s the “Personalized” about this? Well, we add a new type that is the user’s local (ie. from the client side … var qwr=” + Intl.DateTimeFormat().resolvedOptions().timeZone; ) … timezone, as an intrinsic part of what goes to make up the datetime stamp in your neck of the woods, whether you think much about it, or not. This functionality benefits from dynamic CSS like … <style> .dominoes0:after { background-image:url(//upload.wikimedia.org/wikipedia/commons/thumb/c/c1/St_Mary%27s_Cathedral_-_panoramio.jpg/250px-St_Mary%27s_Cathedral_-_panoramio.jpg?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail); background-size:cover; background-repeat:no-repeat; color:transparent; } </style> … added as the need arises. That being the case, as of today (but as of tomorrow, who knows?) the last dropdown option, adding onto yesterday’s mostly emoji overlay options, being the unique part of your local TimeZone, differs around the world for people trying the changed fourteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Types Tutorial is shown below. Do you remember, way before yesterday’s Dominoes Horizontal Block Game Drag Tutorial, way back at Dominoes Horizontal Block Game Width Tutorial, we commented … This “width” issue would probably disappear if Dominoes ever become emojis … and today’s work fulfills that wish … … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment

Horizontal Block Game Personalized Second Image Type Tutorial

After yesterday’s Horizontal Block Game Types Tutorial a cruel streak in us might say … Emojis Smemojis … as we return to another image (element img) scenario, except this time they take the form of … Background image pairs (thanks to Wikipedia, here) for the left and right span element amigos of a Domino tile image’s hosting span element (introduced in yesterday’s work) So what’s the “Personalized” about this? Well, we add a new type that is the user’s local (ie. from the client side … var qwr=” + Intl.DateTimeFormat().resolvedOptions().timeZone; ) … timezone, as an intrinsic part of what goes to make up the datetime stamp in your neck of the woods, whether you think much about it, or not. This functionality benefits from dynamic CSS like … <style> .dominoes0:after { background-image:url(//upload.wikimedia.org/wikipedia/commons/thumb/c/c1/St_Mary%27s_Cathedral_-_panoramio.jpg/250px-St_Mary%27s_Cathedral_-_panoramio.jpg?utm_source=en.wikipedia.org&utm_campaign=parser&utm_content=thumbnail); background-size:cover; background-repeat:no-repeat; color:transparent; } </style> … added as the need arises. That being the case, as of today (but as of tomorrow, who knows?) the last dropdown option, adding onto yesterday’s mostly emoji overlay options, being the unique part of your local TimeZone, differs around the world for people trying the changed fourteenth draft Dominoes Block Game you can try below. Previous relevant Horizontal Block Game Types Tutorial is shown below. Do you remember, way before yesterday’s Dominoes Horizontal Block Game Drag Tutorial, way back at Dominoes Horizontal Block Game Width Tutorial, we commented … This “width” issue would probably disappear if Dominoes ever become emojis … and today’s work fulfills that wish … somewhat? It’s not that dominoes have become emojis, yet, but we thought we’d embellish our … Domino basis in code … with overlayed (to any one Domino tile) left hand and right hand emojis, so that we can offer … ++DominoesShapeAnimalFoodTransportActivityEmail … … set of 5 emoji overlayed and 1 domino image and an email snapshot set of extended functionalities onto that one original game type, accessible via a new URL argument type … New initialization Javascript code … var svgis='<svg xmlns=”http://w3.org” style=”position: absolute; width: 0; height: 0;” aria-hidden=”true”><filter id=”edge-detection”><feConvolveMatrix order=”3 3″ kernelMatrix=”-1 -2 -1 0 0 0 1 2 1″ preserveAlpha=”true” /></filter></svg>’; var shapeis=[“\\002739″,”\\002737″,”\\002729″,”\\002727″,”\\002719″,”\\002724″,”\\002713”]; var foodis=[“\\01f371″,”\\01f358″,”\\01f359″,”\\01f35a”,”\\01f35b”,”\\01f35c”,”\\01f35d”,”\\01f360″,”\\01f362″,”\\01f363″,”\\01f364″,”\\01f365″,”\\01f361″,”\\01F366″,”\\01F367″,”\\01F368″,”\\01F369″,”\\01F36A”,”\\01F382″,”\\01F370″]; var animalis=[‘128028′,’128018′,’128030′,’128029′,’128012′,’128040′,’129408′,’128060′,’128027′,’129413′,’128044′,’129445’]; var transportis=[“\\002708″,”\\01F680″,”\\01F681″,”\\01F686″,”\\01F687″,”\\01F68C”,”\\01F68F”,”\\01F5FA”]; var activityis=[“\\0026BD”,”\\01F3C0″,”\\01F3C2″,”\\0026BE”,”\\01F3C1″,”\\01F3D0″,”\\01F3C9″,”\\01F3B1″]; var animgprefix=”, animgsuffix=”, anothertype=”, newtypes=[], thisemhe=”, thisem=”; var othertype=(location.search.split(‘type=’)[1] ? decodeURIComponent(location.search.split(‘type=’)[1].split(‘&’)[0]) : ”); var anothertype=othertype.toLowerCase() + ‘is’, numarr=0; var templateprefix='<span class=”image-wrapper”>’, templatesuffix='<span style=”visibility:visible;” class=”doml dominoes5″></span><span style=”visibility:visible;” class=”domr dominoes6″></span></span>’; if (othertype.toLowerCase().replace(‘dominoes’, ”) != ”) { if (typeof anothertype == “string”) { setTimeout(alat, … Continue reading →

Posted in eLearning, Event-Driven Programming, Games, Tutorials | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Leave a comment