Tag Archives: highlight

Wikipedia Mark Language Tutorial

Posted on by

Yesterday’s Wikipedia Mark Primer Tutorial‘s efforts were a first effort at ideas surrounding … take Wikipedia content, thanks … and … surround textual webpage body content via “mark” HTML element (effectively annotating it) … for the purposes as an aid to “skim reading” for … content words whose length are on or longer than a user nominated length … and today we attend to … some mobile platform issues Wikipedia based language considerations a progress cursor arrangement (for that “show below” arrangement) … in the changed “second draft” PHP wiki_mark_eight.php web application we hope you are interested in (re-)trying. Previous relevant Wikipedia Mark Primer Tutorial is shown below. We’ve got a new “proof of concept” PHP wiki_mark_eight.php web application for you to try today. We’re interested in the notion, perhaps, that highlighted webpage word content can help with “skim reading”. Does it help you notice, or partition somehow, on the fly, if you are doing research and development in a limited period of time? We’ll readily admit … the jury’s out. But we could give it a go with Wikipedia content. So, given the web application is PHP (writing HTML) what can be the road towards Javascript DOM innerText equivalence? <?php // wiki_mark_eight.php // Encase 8 letter or above words in <mark></mark> // RJM Programming // January, 2023 set_time_limit(3600); $letlen=8; $langis=’en’; $urlis=”; function relative_to_absolute($inth) { global $urlis, $letlen; $froms=[]; $sfroms=” “; $ub=”http://” . $_SERVER[‘SERVER_NAME’] . “:” . $_SERVER[‘SERVER_PORT’] . $_SERVER[‘REQUEST_URI’]; if ($urlis != “”) { $ubf=explode(“?”, $urlis); $ubff=explode(“/”, $ubf[0]); if (strpos($ubff[sizeof($ubff) – 1], “.”) !== false && (sizeof($ubff) – 1) > 2) { $ub=str_replace(“/” . $ubff[sizeof($ubff) – 1], “/”, $ubf[0]); } else { $ub=str_replace(“@$@”, “”, str_replace(“/@$@”, “/”, ($ubf[0] . “@$@”))); } $urlis=””; } $ubf=explode(“?”, $ub); $udirname=str_replace(“/wiki_” . “mark_eight.php”, “/”, $ubf[0]); //echo $udirname; //exit; //$low = strtolower($inth); $outth = $inth; $ideas = array(” action='”, ‘ action=”‘, ” Action='”, ‘ Action=”‘, ” ACTION='”, ‘ ACTION=”‘, ” action=”, ” Action=”, ” ACTION=”, ” href='”, ‘ href=”‘, ” Href='”, ‘ Href=”‘, ” HREF='”, ‘ HREF=”‘, ” href=”, ” Href=”, ” HREF=”, ” src='”, ‘ src=”‘, ” Src='”, ‘ Src=”‘, ” SRC='”, ‘ SRC=”‘, ” src=”, ” Src=”, ” SRC=”); if ($udirname != “”) { $inth=str_replace(“‘/static/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/static/”, $inth); $inth=str_replace(‘”/static/’, ‘”‘ . explode(“/wiki/”, $udirname)[0] . “/static/”, $inth); $inth=str_replace(“‘/wiki/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/wiki/”, $inth); $inth=str_replace(‘”/wiki/’, ‘”‘ . explode(“/wiki/”, $udirname)[0] . “/wiki/”, $inth); $inth=str_replace(“‘/w/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/w/”, $inth); … Continue reading →

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

Wikipedia Mark Primer Tutorial

Posted on by

We’ve got a new “proof of concept” PHP wiki_mark_eight.php web application for you to try today. We’re interested in the notion, perhaps, that highlighted webpage word content can help with “skim reading”. Does it help you notice, or partition somehow, on the fly, if you are doing research and development in a limited period of time? We’ll readily admit … the jury’s out. But we could give it a go with Wikipedia content. So, given the web application is PHP (writing HTML) what can be the road towards Javascript DOM innerText equivalence? <?php // wiki_mark_eight.php // Encase 8 letter or above words in <mark></mark> // RJM Programming // January, 2023 set_time_limit(3600); $letlen=8; $langis=’en’; $urlis=”; function relative_to_absolute($inth) { global $urlis, $letlen; $froms=[]; $sfroms=” “; $ub=”http://” . $_SERVER[‘SERVER_NAME’] . “:” . $_SERVER[‘SERVER_PORT’] . $_SERVER[‘REQUEST_URI’]; if ($urlis != “”) { $ubf=explode(“?”, $urlis); $ubff=explode(“/”, $ubf[0]); if (strpos($ubff[sizeof($ubff) – 1], “.”) !== false && (sizeof($ubff) – 1) > 2) { $ub=str_replace(“/” . $ubff[sizeof($ubff) – 1], “/”, $ubf[0]); } else { $ub=str_replace(“@$@”, “”, str_replace(“/@$@”, “/”, ($ubf[0] . “@$@”))); } $urlis=””; } $ubf=explode(“?”, $ub); $udirname=str_replace(“/wiki_” . “mark_eight.php”, “/”, $ubf[0]); //echo $udirname; //exit; //$low = strtolower($inth); $outth = $inth; $ideas = array(” action='”, ‘ action=”‘, ” Action='”, ‘ Action=”‘, ” ACTION='”, ‘ ACTION=”‘, ” action=”, ” Action=”, ” ACTION=”, ” href='”, ‘ href=”‘, ” Href='”, ‘ Href=”‘, ” HREF='”, ‘ HREF=”‘, ” href=”, ” Href=”, ” HREF=”, ” src='”, ‘ src=”‘, ” Src='”, ‘ Src=”‘, ” SRC='”, ‘ SRC=”‘, ” src=”, ” Src=”, ” SRC=”); if ($udirname != “”) { $inth=str_replace(“‘/static/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/static/”, $inth); $inth=str_replace(‘”/static/’, ‘”‘ . explode(“/wiki/”, $udirname)[0] . “/static/”, $inth); $inth=str_replace(“‘/wiki/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/wiki/”, $inth); $inth=str_replace(‘”/wiki/’, ‘”‘ . explode(“/wiki/”, $udirname)[0] . “/wiki/”, $inth); $inth=str_replace(“‘/w/”, “‘” . explode(“/wiki/”, $udirname)[0] . “/w/”, $inth); $inth=str_replace(‘”/w/’, ‘”‘ . explode(“/wiki/”, $udirname)[0] . “/w/”, $inth); $outth = $inth; for ($m=0; $m<sizeof($ideas); $m++) { $huhs = explode($ideas[$m], $inth); if (sizeof($huhs) > 1) { for ($ii=(sizeof($huhs) – 1); $ii>=1; $ii–) { if (strtolower(str_replace(“file”, “http”, strtolower(substr($huhs[$ii], 0, 4)))) == “http”) { $outth = $outth; } else if (substr($huhs[$ii], 0, 1) != “/” && substr($huhs[$ii], 0, 1) != “‘” && substr($huhs[$ii], 0, 1) != ‘”‘) { $outth = str_replace($huhs[$ii], $udirname . $huhs[$ii], $outth); } else if (substr($huhs[$ii], 1, 1) != “/” && substr($huhs[$ii], 0, 1) != “‘” && substr($huhs[$ii], 0, 1) != ‘”‘) { $outth = str_replace($huhs[$ii], substr($udirname, 0, (strlen($udirname) – 0)) . $huhs[$ii], $outth); } } } } … Continue reading →

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

Presenting a Procedural Button Click Tutorial

Posted on by

We’ve long struggled with a presentation approach towards depicting … … in the slide of a procedural click or tap taking place, we have trouble specifying what was clicked to arrive at the results slide which follows … … though, occasionally we’ve used macOS Preview’s “Speech Bubbles” in PDF presentations, as we explained at Preview PDF Annotation Bubbles Primer Tutorial. Somehow, we think that “Speech Bubbles” idea is not as good as a new idea we stumbled upon (and used, within the recent Notes PDF Email Attachments Primer Tutorial‘s animated GIF tutorial picture presentation) looking around Gimp image editor functionality, the other day, and arrived at its very useful … Tools -> Selection Tools -> Rectangle Select Filters -> Decor -> Add Bevel… … Script-Fu functionality! Readers can get suspicious of “photoshopped” content, but often it is important to make clear the procedural intention ahead of showing that action’s results, hence our intense interest in a presentation idea we may implement more and more into the future, we’re predicting! Now, we wonder whether this will help with “cursor display” logic presentations, as well? Hmmmmmm! Previous relevant Preview PDF Annotation Bubbles Primer Tutorial is shown below. Did you notice with yesterday’s PDF slideshow for Genius Scan App PDF Email Tutorial we used some annotation bubbles in our presentation? The use of annotations was one of the first thoughts regarding the “marketing” of different tiers of functionality regarding PDF Processing applications, in the broad categories … just read PDF document and display it (eg. Adobe Acrobat Reader) … which is very often packaged up as a piece of freeware … read PDF and be able to annotate PDF document … often freeware (or, like today’s Mac OS X “Preview” talk, coming as a part of an operating system (freeish)) … read and write to PDF (including password protected data and input fields) … which are often “premium” software products you pay for as a oneoff, or sometimes as an installment charge We really like the idea of “annotation bubbles” as a concept. Especially when your PDF data represents a procedure of some sort, because quite often, these days, with the ease to do this, the imagery in the PDF will be screenshots that are good regarding the realia of the presentation, and the “annotation bubbles” takes you out of that “realia” with the good jolt of what the “annotation bubble” tells you … Continue reading →

Posted in eLearning, GIMP, Tutorials | Tagged , , , , , , , , , , , , , , , , , | Leave a comment

Editable and Uneditable Text kbd Tutorial

Posted on by

When we presented Editable and Uneditable Text Primer Tutorial … the first “highlighting of not to be edited text” idea was to use the HTML mark … and, today, we offer as an alternative way … the second “highlighting of not to be edited text” idea is to use the HTML kbd … where the “kbd” HTML element type ensures display of text with a monospaced font (eg. Courier New), the font type where every character in the font is presented with the same width. Do you remember us using a Courier New font based solution to formulating a very simple “twirler” that did not affect text to its right when we presented Image Pair Fitting into a Given Dimension Refresh Tutorial? Thinking back, we could have applied a “kbd” solution here too. This “kbd” idea suits the Uneditable versus Editable Text aspects to the changed div_within_div.html live run, but won’t suit aesthetically based projects, because it is quite offputing seeing text presented with a mix of monospaced and non monospaced text flowing through text sentences. THe simple changes to code can be categorized as … Javascript global variables, some new … var aglow=’ class=”glow”‘, bglow=”; var eletype=’mark’; CSS new styling for “kbd” scenario … <style> /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */ .glow { font-size: 16px; color: #fff; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; color: black; } @-webkit-keyframes glow { from { text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073; } to { text-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6; } } .wolg { font-size: 16px; color: #fff; text-align: center; -webkit-animation: wolg 1s ease-in-out infinite alternate; -moz-animation: wolg 1s ease-in-out infinite alternate; animation: wolg 1s ease-in-out infinite alternate; color: black; } @-webkit-keyframes wolg { from { text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #6e0073, 0 0 9px #6e0073, 0 0 11px #6e0073, 0 0 13px #6e0073, 0 0 15px #6e0073; } to { text-shadow: 0 0 24px #fff, 0 0 6px #4dffa6, 0 0 8px #4dffa6, 0 0 10px #4dffa6, 0 0 12px #4dffa6, 0 0 14px #4dffa6, 0 … Continue reading →

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

Dots and Boxes Game Parameterization Tutorial

Posted on by

We quite like … substitutional approaches to coding interpretive approaches to coding take a hardcoded string and either … parameterize it repurpose it … and with the “Dots and Boxes Game” web application of yesterday’s Dots and Boxes Game Primer Tutorial it’s a case of parameterizing the table … number of “span” cells across (used to be 100) number of “span” cells down (used to be 20) … as per the device width dependant … var xacross=Math.min(100,Math.round(eval(” + screen.width) / 14.40)); //100; var ydown=Math.round(eval(xacross / 5)); //20; … teamed with changes to 100 and 20 and “near to” Javascript code hardcodings changed into forms of “xacross” and “ydown” variables above. And then there is the hardcoding “Score” we wanted to repurpose so as to allow the user control of whether … notifications “say” audio “toast” message box … are persisted with, via “toggling code” as per … var snotifications_on=true; var osay_on=(((” + navigator.platform.toUpperCase()).indexOf(‘MAC’) >= 0) ? true : false); var etoast_on=(navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i) ? true : false); function pse(insc, istoast) { // insc is “Score ” var outsc=insc; if (outsc.indexOf(‘Score’) == 0) { outsc=outsc.replace(‘e’, ‘<a title=”Toggle toast show status ‘ + (” + etoast_on) + ‘” onclick=”etoast_on=!etoast_on; this.title+=String.fromCharCode(32) + etoast_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘magenta’ : ‘magenta’) + ‘;”>e</a>’); outsc=outsc.replace(‘o’, ‘<a title=”Toggle say try status ‘ + (” + osay_on) + ‘” onclick=”osay_on=!osay_on; this.title+=String.fromCharCode(32) + osay_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘white’ : ‘purple’) + ‘;”>o</a>’); outsc=outsc.replace(‘S’, ‘<a title=”Toggle notifications try status ‘ + (” + osay_on) + ‘” onclick=”snotifications_on=!snotifications_on; this.title+=String.fromCharCode(32) + snotifications_on;” style=”cursor:pointer;text-decoration:none;color:’ + (istoast ? ‘white’ : ‘blue’) + ‘;”>S</a>’); } return outsc; } … in all of the recent … code changed dots_and_boxes_game.html Dots and Boxes Game you can also try below code changed sos_game.html SOS Game you can also try below code changed word_find_game.html Word Find Game you can also try below Previous relevant Dots and Boxes Game Primer Tutorial is shown below. Today, do you fancy … Morphing a clone … or should that be … Cloning a morph … onto yesterday’s SOS Game Primer Tutorial with our new “Dots and Boxes” game? Yes, that’s it for us today, simply because the “morphed into” is a lot like “the end result”, our new Dots and Boxes Game. After all, both are … online games on a board with span cells containing onclick logic ideally for 2 or more players And as for the onclick logic Javascript logic? … Continue reading →

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

Dots and Boxes Game Primer Tutorial

Posted on by

Today, do you fancy … Morphing a clone … or should that be … Cloning a morph … onto yesterday’s SOS Game Primer Tutorial with our new “Dots and Boxes” game? Yes, that’s it for us today, simply because the “morphed into” is a lot like “the end result”, our new Dots and Boxes Game. After all, both are … online games on a board with span cells containing onclick logic ideally for 2 or more players And as for the onclick logic Javascript logic? We can’t remember relying on the outerHTML (ie. the entire HTML element expressed as HTML) of an HTML (span) element for the (onclick event) logic basis, as per (the plug in code different to (and the same as) yesterday’s code) … if (document.getElementById(‘names’)) { if (document.getElementById(‘names’).value == ” && document.getElementById(‘names’).placeholder.indexOf(‘,’) != -1) { document.getElementById(‘names’).value=document.getElementById(‘names’).placeholder; //alert(1); document.getElementById(‘numsel’).value=” + document.getElementById(‘names’).value.split(‘,’).length; //alert(document.getElementById(‘numsel’).value); nparrange(document.getElementById(‘numsel’)); //alert(11); document.getElementById(‘smore’).innerHTML=notify(‘Your go ‘ + anames[curplayer]); } } console.log(‘1’); if (spano.innerHTML.toLowerCase() == ‘s’ || spano.innerHTML.toLowerCase() == ‘o’) { return true; } console.log(‘2’); var rtis=spano.getBoundingClientRect(); console.log(‘3’); e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xx = e.touches[0].pageX; yy = e.touches[0].pageY; } else { xx = e.touches[0].clientX; yy = e.touches[0].clientY; } //console.log(‘pos3=’ + pos3 + ‘,pos4=’ + pos4); } else if (e.clientX || e.clientY) { xx = e.clientX; yy = e.clientY; } else { xx = e.pageX; yy = e.pageY; } var topm=eval(yy – rtis.top); var bottomm=eval(rtis.bottom – yy); var leftm=eval(xx – rtis.left); var rightm=eval(rtis.right – xx); var sbl=eval(” + noc(spano.outerHTML).split(‘border-‘).length); var sbc=eval(” + spano.outerHTML.split(‘background-color’).length); var thislet=’ ‘; var locsubscore=0; var thisi=eval(spano.id.replace(‘span’,”)); if (Math.min(topm, bottomm,leftm,rightm) == leftm || Math.min(topm, bottomm,leftm,rightm) == rightm) { // s if (Math.min(topm, bottomm,leftm,rightm) == leftm) { // s thislet=’border-left:2px solid ‘ + bcols[curplayer]; //alert(56); spano.style.borderLeft=thislet.split(‘:’)[1]; //document.getElementById(‘myh4′).style.fontSize=’6px’; //document.getElementById(‘myh4′).innerHTML=’thisi=’ + thisi + ‘ border-left and ‘ + eval(-1 + thisi) + ‘ is border-right ‘ + spano.outerHTML.replace(/\>/g,’>’).replace(/\</g,'<‘); if ((sbl == 4 && noc(spano.outerHTML).split(‘border-‘).length >= 4) && sbc == 1) { //if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { //alert(” + sbl + ‘ 1:’ + noc(spano.outerHTML).split(‘border-‘).length + ‘ ‘ + spano.outerHTML); //} spano.style.backgroundColor=bcols[curplayer]; //alert(1); locsubscore++; } //else if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i) && sbl == 4 && sbc == 1) { //alert(‘1:’ + spano.outerHTML.split(‘border-‘).length + ‘ ‘ + spano.outerHTML); //} if (eval(thisi % 100) >= 1) { sbl=eval(” + noc(document.getElementById(‘span’ + eval(-1 + thisi)).outerHTML).split(‘border-‘).length); sbc=eval(” + document.getElementById(‘span’ + eval(-1 + thisi)).outerHTML.split(‘background-color’).length); document.getElementById(‘span’ + eval(-1 + thisi)).style.borderRight=thislet.split(‘:’)[1]; if ((sbl == 4 && noc(document.getElementById(‘span’ + eval(-1 + thisi)).outerHTML).split(‘border-‘).length … Continue reading →

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

SOS Game Primer Tutorial

Posted on by

Even though it took too long to get to yesterday’s Word Find Game Viewport Tutorial‘s Word Find Game’s level of satisfaction, for us, it was always going to be worth it, because when you overengineer it can mean cloning off that into another useful web application is a “paring down” exercise, more than anything, and this is infinitely easier than “a reinvention of the wheel” scenario, especially where it comes to “cross platform” game usage “user experience” issues. The fun bit of such an approach, in thinking about what we end up with today is the thought that a … Word Find Game … could be cloned or morphed into a … SOS Game … we remember from our days at high school, in less than a day. The memory of the SOS Game did not extend to the detail, and so we thank How to Play – SOS for reminders about the status of diagonality, while up versus down and forwards versus backwards concerns were a bit “per se” regarding “SOS”! It was the confluence of one “onclick” type event to cover, regarding span elements set out in a grid initialized to a non-breaking space ( ie. &nbsp; ) … fill in contents as “S” fill in contents as “O” … that set us to determining for the span “cell” click, was it positioned … in the top half means “S” … or … in the bottom half means “O” ? This had us converging on changes to the “clicks” mode onclick event Javascript logic … function didclick(e, spano) { if (document.getElementById(‘names’)) { if (document.getElementById(‘names’).value == ” && document.getElementById(‘names’).placeholder.indexOf(‘,’) != -1) { document.getElementById(‘names’).value=document.getElementById(‘names’).placeholder; //alert(1); document.getElementById(‘numsel’).value=” + document.getElementById(‘names’).value.split(‘,’).length; //alert(document.getElementById(‘numsel’).value); nparrange(document.getElementById(‘numsel’)); //alert(11); document.getElementById(‘smore’).innerHTML=notify(‘Your go ‘ + anames[curplayer]); } } console.log(‘1’); if (spano.innerHTML.toLowerCase() == ‘s’ || spano.innerHTML.toLowerCase() == ‘o’) { return true; } console.log(‘2’); var rtis=spano.getBoundingClientRect(); console.log(‘3’); e = e || window.event; e.preventDefault(); if (e.touches) { if (e.touches[0].pageX) { xx = e.touches[0].pageX; yy = e.touches[0].pageY; } else { xx = e.touches[0].clientX; yy = e.touches[0].clientY; } //console.log(‘pos3=’ + pos3 + ‘,pos4=’ + pos4); } else if (e.clientX || e.clientY) { xx = e.clientX; yy = e.clientY; } else { xx = e.pageX; yy = e.pageY; } var thislet=’ ‘; var locsubscore=0; var thisi=eval(spano.id.replace(‘span’,”)); if (eval(yy – rtis.top) <= eval(rtis.bottom – yy)) { // s thislet=’S’; spano.innerHTML=thislet; spano.style.color=’rgb(128,0,128)’; //’#000000′; } else { thislet=’O’; spano.innerHTML=thislet; spano.style.color=’#0000ff’; } sbs=[]; if (eval(thisi % 100) >= 2) { … Continue reading →

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

Word Find Game Viewport Tutorial

Posted on by

Do you remember the last time at this blog that we simulated the Android “toast” mobile app temporary message box with Ants Up a Wall Game Toast Tutorial? It forms part of our solution regarding … mobile device use … the user using the webpage viewport … and the device “spreading” gesture (ie. opposite to “pinch” gesture) to hone in on an area in “sea of letters” … but because they fill the screen this way, and they lose sight of the score we want new … “toast” message box position fixed view of score and status as it changes without the user having to shift their viewing position (looking at their “sea of letters” area) … that was not in yesterday’s Word Find Game Aesthetics Tutorial. Here’s how this happened, for us, with the code … We established a viewport … <meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes” > We CSS style a “toast” class … <style> .custom-alert { display: inline-block; /* visibility: visible; */ background-color: rgba(102,102,102,0.8); color: #fff; text-align: enter; margin: 5% auto; padding: 12px 28px; opacity: 0.9; z-index: 200; } </style> We Javascript initiate the “toast” instance, featuring “viewport” savvy screen positioning, for the webpage and maintain its visibility status … function showIt(what) { var ris=null; if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (document.getElementById(‘custom-alert-1’)) { document.getElementById(‘custom-alert-1’).innerHTML=what; document.getElementById(‘custom-alert-1′).style.opacity=’0.95’; document.getElementById(‘custom-alert-1′).style.display=’inline-block’; // inline //document.getElementById(‘custom-alert-1′).style.visibility=’visible’; document.getElementById(‘custom-alert-1’).scrollIntoView(); } else if (what == ”) { ris=document.getElementById(‘underlay’).getBoundingClientRect(); //alert(eval(eval(ris.left + ris.right) / 2)); document.body.innerHTML+=”<div id=’custom-alert-1′ class=’custom-alert’ style=’position:fixed; left: 50%; transform: translate(-50%, -50%); top:50%; display: none;’>” + what + “</div>”; // thanks to https://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div } else { ris=document.getElementById(‘underlay’).getBoundingClientRect(); document.body.innerHTML+=”<div id=’custom-alert-1′ class=’custom-alert’ style=’position:fixed; left: 50%; transform: translate(-50%, -50%); top:50%; display: inline-block;’>” + what + “</div>”; } setTimeout(hideIt, 10000); } } function hideIt() { document.getElementById(‘custom-alert-1′).style.display=’none’; //document.getElementById(‘custom-alert-1′).style.visibility=’hidden’; } function lonl() { // called around onload event document.getElementById(‘wunderlay’).innerHTML=wdebye; if (documentURL.indexOf(‘clicks=’) != -1) { document.getElementById(‘cmodeopt’).innerHTML=’Click’; //document.getElementById(‘wunderlay’).innerHTML=wdebye; document.getElementById(‘wunderlay’).style.display=’block’; document.getElementById(‘wunderlay’).style.opacity=’1.0′; document.getElementById(‘underlay’).style.display=’none’; document.getElementById(‘seventmode’).innerHTML=document.getElementById(‘seventmode’).innerHTML.replace(‘ highlight ‘, ‘ click ‘); document.getElementById(‘styleothers’).innerHTML='<style> ‘ + document.head.innerHTML.split(‘<style>’)[1].split(‘</style>’)[0].replace(/Courier\ New/g,’Courier’).replace(/ glow\ 1s/g,’ wglow 1s’).replace(/black/g,’transparent’).replace(‘#f0f0f0;’, ‘#f0f0f0; text-shadow: -1px 1px 1px #952dff; ‘) + ‘ </style>’; } else { document.getElementById(‘cmodeopt’).innerHTML=’Selection’; } showIt(”); } We Javascript call with content modify the “toast” instance each time the score changes … function notify(what) { //alert(‘anames[0]=’ + anames[0] + ‘ and trysay=’ + trysay); if (what.trim() != ” && anames[0].replace(‘Player 1’,”).trim() != ”) { if (what.indexOf(‘orry’) != -1 && what.indexOf(anames[curplayer]) == -1) { if (what.indexOf(‘.’) != -1) { what=what.replace(‘.’, ‘, ‘ + anames[curplayer] + ‘.’); } else { what+=’, … Continue reading →

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