Numbers Guessing Game
Your Numbers Game
Get
clueYour
answerYour
ScoreClue? Score 0/0
-
Recent Posts
- PHP Exif Quiz Geographicals Tutorial
- PHP Exif Quiz Tutorial
- PHP Exif Retention off iPhone Images Tutorial
- List to Grid Layout CSS Media Query Tutorial
- List to Grid Layout Primer Tutorial
- Out and About WordPress Blog Content Tweaks Just with iPhone Tutorial
- Command Line History By Date Tutorial
- Overseas Travel Global Roaming Mobile Primer Tutorial
Categories
- Ajax
- Android
- Animation
- Anything You Like
- Code::Blocks
- Coding
- Colour Matching
- Data Integration
- Database
- Delphi
- Eclipse
- eLearning
- ESL
- Event-Driven Programming
- Games
- GIMP
- GUI
- Hardware
- Installers
- iOS
- Land Surveying
- Moodle
- Music Poll
- NetBeans
- Networking
- News
- Not Categorised
- OOP
- Operating System
- Photography
- Projects
- Signage Poll
- Software
- SpectroPhotometer
- Tiki Wiki
- Trips
- Tutorials
- Uncategorized
- Visual Studio
- Xcode
Meta
Tags
Ajax animation background button canvas command line CSS Did you know DOM dropdown email emoji event form game Google Google chart hashtag HTML IFRAME image iOS Javascript MAMP media mobile navigation onclick overlay PHP popup programming select share sharing SMS SVG table text textarea tutorial url video web browser webpageYour Background Image
OnTopList
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 3D, address bar, aesthetics, Ajax, argument, arguments, arrow, ascii text file, attribute, background, background image, border-radius, breadcrumb, calendar, calendar type, cell, collaboration, communication, conduit, content, contenteditable, cross-domain, CSS, data attribute, date, day, day of week, DOM, domain, dropdown, edit, editable, element, email, English, FormData, french, get, global, global data attribute, Google Translate, Gregorian, grid, hashtag, hashtagging, HTML, IFRAME, innerHTML, internationalization, intl, Javascript, jewish, Julian, language, language translation, link, localStorage, mailto, month, object, ondblclick, onkeypress, personalization, PHP, PHP calendar, popup, popup blocker, post, postmessage, programming, proof of concept, recall, recalling, save, saving, share, sharing, SMS, span, style, styling, substitute, SVG, table, table cell, text file, text shadow, time, timestamp, tool, translation, transparency, tutorial, url, Web Application, web browser, webpage, window.localStorage, window.open, window.opener, window.postMessage, year
|
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 animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, calendar, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, Linux, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, operating system, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, soft link, span, speech to text, stop press, symbolic link, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
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 animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, Linux, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, operating system, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, soft link, span, speech to text, stop press, symbolic link, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
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 animation, Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, keyframes, limit, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
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 Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, Lorem Picsum, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, presenation, project, property, random, random image, repository, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
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 argument, child, client pre-emptive iframe, detection, document, DOM, event, hierarchy, HTML, IFRAME, intervention, Javascript, name, object, onload, parent, popup, popup window, programming, proof of concept, timing, tutorial, Web Application, window, window.open, window.opener, window.parent
|
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 Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, option, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointer-events, pointing, portrait, preparation, project, property, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
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 Apache, Apple, audio, beep, below the fold, blocked, box shadow, button, cell, collaboration, contenteditable, CSS, device, Document Root, DOM, double click, drag, draggable, drop shadow, email, emoji, event, FileZilla, fold, game, Google, Google Chrome, handoff, hash, hashtag, IDE, IFRAME, image, image editor, img, iPhone, Javascript, limit, locked, macOS, mobile, mouse, nest, noun, onblur, ondblclick, ondragstart, online game, OOP, orientation, outline, overlay, PaintBrush, personalization, PHP, planning, pointer, pointing, portrait, preparation, project, property, resource, resources, section, share, sharing, SMS, span, speech to text, stop press, table, tap, text, thing, tile, timezone, trackpad, tutorial, upload, url, user experience, UX, Web Application, web browser, webpage, width, Wikipedia, z-index
|
Leave a comment


Thanks. Since then, a Shower Songs project at https://www.rjmprogramming.com.au/HTMLCSS/shower_songs.html is an improvement regarding "Radio Play" on mobile platforms.