Tag Archives: highlight

Word Find Game Aesthetics Tutorial

Posted on by

CSS styling keeps getting better for webpages, with extended functionality, as proven when CSS3 came to being. Two styling features we find quite impactive are … CSS animation … and … CSS linear gradients … we use, respectively, regarding … “selection” textarea and “click” div of span elements … helping create a colour coded border “glow” 3D effect … <style> /* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */ @-webkit-keyframes glow { from { box-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 { box-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; } } @-webkit-keyframes wglow { from { box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #7300e6, 0 0 9px #7300e6, 0 0 11px #7300e6, 0 0 13px #7300e6, 0 0 15px #7300e6; } to { box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #a64dff, 0 0 10px #a64dff, 0 0 12px #a64dff, 0 0 14px #a64dff, 0 0 16px #a64dff; } } textarea { font-family: Courier New; font-size: 20px; opacity: 0.9; z-index: 9; padding: 0 0 0 0; margin: 0 0 0 0; text-shadow: -1px 1px 1px #952dff; -webkit-animation: glow 1s linear infinite alternate; -moz-animation: glow 1s linear infinite alternate; animation: glow 1s linear infinite alternate; } #wunderlay { font-family: Courier New; font-size: 20px; opacity: 0.3; z-index: 11; padding: 0 0 0 0; margin: 0 0 0 0; -webkit-animation: glow 1s linear infinite alternate; -moz-animation: glow 1s linear infinite alternate; animation: glow 1s linear infinite alternate; } </style> … that is dynamically changed to “wglow” (and font-family Courier) should the user select “click” mode of interactive entry background-image CSS property linear gradient background to dropdown and textbox element effect … <style> /* Thanks to https://medium.com/thirty-9/3-tips-for-using-subtle-css-gradients-f5691e453602 */ body { background-image: linear-gradient(to right bottom, #ffffff, #fcfafc, #f9f6f8, #f8f1f3, #f6ecec); } #names { background-image: linear-gradient(to right bottom, #eeeeee, #ebe9eb, #e8e5e7, #e7e0e2, #e5dbdb); } select { background-image: linear-gradient(to right bottom, white, yellow, pink, silver, lightgray); } </style> And so, improving on yesterday’s Word Find Game Mobile Tutorial we have in our changed word_find_game.html Word Find Game you can also try, yes, yet again, below. Previous relevant Word Find Game Mobile Tutorial is shown below. Yesterday’s

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

Word Find Game Mobile Tutorial

Posted on by

Yesterday’s Word Find Game Personalization Tutorial, and the Word Find Game from versions before all had an unwieldy relationship with mobile platforms. The … selection, via Selection API, using HTML textarea, suits non-mobile well … but we think today’s newly coded for … click, via HTML span element onclick logics, work better on mobile platforms … and so we’ve coded for a new dropdown to offer both modus operandi as options, with new “click” modus operandi Javascript … function didclick(spano) { var newi=eval(spano.id.replace(‘span’,”)); var documentgetSelectiontoString=”, revsis=”; var wlen=0, ijh=0; if (setsoftwo.length == 0) { setsoftwo.push(newi); document.getElementById(‘span’ + newi).style.backgroundColor=’yellow’; } else { console.log(‘Newi=’ + newi + ‘ and down=’ + Math.abs(eval(newi % 100) – eval(setsoftwo[0] % 100)) + ‘ and across=’ + Math.abs(Math.floor(newi / 100) – Math.floor(setsoftwo[0] / 100)) + ‘ via setsoftwo[0]=’ + setsoftwo[0]); if (Math.floor(newi / 100) == Math.floor(setsoftwo[0] / 100)) { wlen=eval(1 + Math.abs(eval(setsoftwo[0] – newi))); if (wlen >= 4) { for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh++) { documentgetSelectiontoString+=document.getElementById(‘span’ + ijh).innerHTML; revsis=document.getElementById(‘span’ + ijh).innerHTML + revsis; document.getElementById(‘span’ + ijh).style.backgroundColor=’orange’; document.getElementById(‘span’ + ijh).title=document.getElementById(‘span’ + ijh).innerHTML; document.getElementById(‘span’ + ijh).style.cursor=’progress’; } subscore=eval(0 – eval(” + documentgetSelectiontoString.length)); findingnemo=”; if (!backwardsallowed) { setTimeout(retry, 2000); document.getElementById(‘nameif’).title=”; } else { setTimeout(retry, 8000); document.getElementById(‘mytao’).style.cursor=’progress’; document.getElementById(‘nameif’).title=’../PHP/surprise.php?miZn=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&maZx=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&firstJUNKname=y&youllneverfindthis=y’ + ‘&second=y&iswordthere=’ + encodeURIComponent(revsis); } document.getElementById(‘nameif’).src=’../PHP/surprise.php?miZn=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&maZx=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&firstJUNKname=y&youllneverfindthis=y’ + ‘&iswordthere=’ + encodeURIComponent(documentgetSelectiontoString.toLowerCase()); setsoftwo=[]; } } else if (eval(newi % 100) == eval(setsoftwo[0] % 100)) { if (updownallowed) { console.log(‘up down’); wlen=eval(1 + Math.abs(eval(Math.floor(setsoftwo[0] / 100) – Math.floor(newi / 100)))); console.log(‘newi=’ + newi + ‘ and wlen=’ + wlen + ‘ via setsoftwo[0]=’ + setsoftwo[0]); if (wlen >= 4) { for (ijh=Math.min(setsoftwo[0], newi); ijh<=Math.max(setsoftwo[0], newi); ijh+=100) { documentgetSelectiontoString+=document.getElementById(‘span’ + ijh).innerHTML; revsis=document.getElementById(‘span’ + ijh).innerHTML + revsis; document.getElementById(‘span’ + ijh).style.backgroundColor=’orange’; document.getElementById(‘span’ + ijh).title=document.getElementById(‘span’ + ijh).innerHTML; document.getElementById(‘span’ + ijh).style.cursor=’progress’; } subscore=eval(0 – eval(” + documentgetSelectiontoString.length)); findingnemo=”; if (!backwardsallowed) { setTimeout(retry, 2000); document.getElementById(‘nameif’).title=”; } else { setTimeout(retry, 8000); document.getElementById(‘mytao’).style.cursor=’progress’; document.getElementById(‘nameif’).title=’../PHP/surprise.php?miZn=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&maZx=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&firstJUNKname=y&youllneverfindthis=y’ + ‘&second=y&iswordthere=’ + encodeURIComponent(revsis); } document.getElementById(‘nameif’).src=’../PHP/surprise.php?miZn=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&maZx=’ + eval(1 + eval(” + documentgetSelectiontoString.length)) + ‘&firstJUNKname=y&youllneverfindthis=y’ + ‘&iswordthere=’ + encodeURIComponent(documentgetSelectiontoString.toLowerCase()); setsoftwo=[]; } } } else if (Math.abs(Math.floor(eval(newi / 100)) – Math.floor(eval(setsoftwo[0] / 100))) == Math.abs(eval(newi % 100) – eval(setsoftwo[0] % 100))) { if (diagonalsallowed)

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

Word Find Game Personalization Tutorial

Posted on by

Yesterday’s Word Find Game Modes of Use Tutorial gave us the means by which we could have multiple players in our “Finding the Word” game, as a number. But many users prefer “names” to “numbers”. And so … we start asking for an optional (comma separated) user name list … that if used … starts looking for Notifications API functionality to keep the players informed about proceedings … and … if underlying Navigator API navigator.platform points at an underlying macOS operating system, also offer the user the chance to turn notification wording to audio commentary, as well … as per Javascript … function notify(what) { if (what.trim() != ” && anames[0].replace(‘Player 1’,”).trim() != ”) { if (what != lastwhat) { lastwhat=what; setTimeout(lwn, 8000); document.getElementById(‘notif’).src=’./notifications_ideas.php?scheduledblurb=’ + encodeURIComponent(what); if (trysay) { //alert(‘HTTP://localhost:8888/macos_say_record.php?andsoonclose=y&docronwork=say%20’ + encodeURIComponent(what)); window.open(‘HTTP://localhost:8888/macos_say_record.php?andsoonclose=y&docronwork=say%20’ + encodeURIComponent(what), ‘sayif’, ‘top=50,left=50,width=500,height=500′); } } } return what; } … showing two different uses of two different invisible HTML iframe elements … <iframe id=notif style=’display:none;’ src=></iframe> <iframe id=sayif name=sayif style=’display:none;’ src=></iframe> … in our changed word_find_game.html Word Find Game you can also try, yet again, below. Previous relevant Word Find Game Modes of Use Tutorial is shown below. Online games often feature … degree of difficulty number of player(s) … modes of use that the user(s) can control. And so, with this in mind, to improve on yesterday’s Word Find Game Underlay Tutorial we’ve set out providing ways the users can control these two concepts via two new dropdowns … <h1>Word Find Game <select onchange=”restart(this);”><option value=”hard”>Hard</option><option value=”easy”>Easy</option><option value=”easier”>Easier</option><option value=”easiest”>Easiest</option></select> <span id=curbit>for</span> <select id=numsel onchange=’nparrange(this);’><option value=1>1 player</option><option value=2>2 players</option><option value=3>3 players</option><option value=4>4 players</option><option value=5>5 players</option></select></h1> … along with a span element showing the current player number all within that topmost h1 element, and helped out by two new dropdown (ie. select element) onchange event Javascript logics … var numplayers=1; var curplayer=0; var ascores=[0], agoes=[0]; var backwardsallowed=true; var updownallowed=true; var diagonalsallowed=true; var zdebye=”; var zzdebye=”; var lastzdebye=”; var goutstris=”; var delayis=0; var sofar=’;’; var score=0, goes=0, subscore=0; function nparrange(sio) { if (eval(” + sio.value) > eval(” + ascores.length)) { while (eval(” + sio.value) > eval(” + ascores.length)) { ascores.push(0); agoes.push(0); } numplayers=eval(” + ascores.length); document.getElementById(‘curbit’).innerHTML=’for <font color=green>’ + eval(1 + eval(” + curplayer)) + ‘</font> of’; if (eval(” + ascores.length) > 1) { var cscores=”; var cgoes=”; var betw=”; //if (eval(0 + eval(” + curplayer)) == 0) { betw='<font color=red>’; } if (eval(1 + eval(” + curplayer)) >=

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

Word Find Game Modes of Use Tutorial

Posted on by

Online games often feature … degree of difficulty number of player(s) … modes of use that the user(s) can control. And so, with this in mind, to improve on yesterday’s Word Find Game Underlay Tutorial we’ve set out providing ways the users can control these two concepts via two new dropdowns … <h1>Word Find Game <select onchange=”restart(this);”><option value=”hard”>Hard</option><option value=”easy”>Easy</option><option value=”easier”>Easier</option><option value=”easiest”>Easiest</option></select> <span id=curbit>for</span> <select id=numsel onchange=’nparrange(this);’><option value=1>1 player</option><option value=2>2 players</option><option value=3>3 players</option><option value=4>4 players</option><option value=5>5 players</option></select></h1> … along with a span element showing the current player number all within that topmost h1 element, and helped out by two new dropdown (ie. select element) onchange event Javascript logics … var numplayers=1; var curplayer=0; var ascores=[0], agoes=[0]; var backwardsallowed=true; var updownallowed=true; var diagonalsallowed=true; var zdebye=”; var zzdebye=”; var lastzdebye=”; var goutstris=”; var delayis=0; var sofar=’;’; var score=0, goes=0, subscore=0; function nparrange(sio) { if (eval(” + sio.value) > eval(” + ascores.length)) { while (eval(” + sio.value) > eval(” + ascores.length)) { ascores.push(0); agoes.push(0); } numplayers=eval(” + ascores.length); document.getElementById(‘curbit’).innerHTML=’for <font color=green>’ + eval(1 + eval(” + curplayer)) + ‘</font> of’; if (eval(” + ascores.length) > 1) { var cscores=”; var cgoes=”; var betw=”; //if (eval(0 + eval(” + curplayer)) == 0) { betw='<font color=red>’; } if (eval(1 + eval(” + curplayer)) >= eval(” + ascores.length)) { betw='<font color=red>’; } for (var inp=0; inp<eval(” + ascores.length); inp++) { if (eval(” + curplayer) == inp) { cscores+=betw + ‘<font color=green>’ + ascores[inp] + ‘</font>’; cgoes+=betw + ‘<font color=green>’ + agoes[inp] + ‘</font>’; betw=’:<font color=red>’; } else { cscores+=betw + ascores[inp] + betw.replace(‘:’,”).replace(‘<font color=red>’, ‘</font>’).replace(‘<font color=green>’, ‘</font>’); cgoes+=betw + agoes[inp] + betw.replace(‘:’,”).replace(‘<font color=red>’, ‘</font>’).replace(‘<font color=green>’, ‘</font>’); //betw=’:’; betw=(‘:’ + betw.replace(‘:’,”)).replace(‘<font color=red>’,”).replace(‘<font color=green>’,'<font color=red>’); } console.log(‘numplayers=’ + numplayers + ‘ at ‘ + inp + ‘ vs curplayer=’ + curplayer + ‘ ‘ + cscores + ‘/’ + cgoes); } document.getElementById(‘score’).innerHTML=” + cscores + ‘/’ + cgoes; //curplayer++; //if (curplayer >= eval(” + ascores.length)) { curplayer=0; } //scores=ascores[curplayer]; //goes=agoes[curplayer]; } } } function restart(sio) { var myblurb=document.getElementById(‘blurb’).innerHTML; // Forwards, backwards, up, down, diagonal 4 letters or more highlight below var setn=[8,1,1,3,11,1,2,1,8,0,0,3,1,5,7,1,0,5,3,5,3,1,1,0,1,0]; if (sio.value == ‘hard’) { location.href=document.URL; } if (sio.value != ‘hard’ && eval(” + letters.length) == 26) { myblurb=myblurb.replace(‘ letters ‘, ‘ more common set of letters ‘); // A-9, B-2, C-2, D-4, E-12, F-2, G-3, H-2, I-9, J-1, K-1, L-4, M-2, N-6, O-8, P-2, Q-1, R-6, S-4, T-6, U-4, V-2, W-2, X-1, Y-2, Z-1 var kbye=eval(”

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

Word Find Game Underlay Tutorial

Posted on by

If you are a regular reader at this blog, you will know we discuss the CSS styling idea of … overlay … much more than … underlay … but there is essentially only the difference in the control of “z-index” (and maybe “opacity”) property different about the concepts, and to deploy to improve on for the start we made with yesterday’s Word Find Game Primer Tutorial. “Underlay” usefulness, to us, goes like this … what you “underlay” … for us within the new CSS styling … <style> textarea { font-family: Courier New; font-size: 20px; opacity: 0.9; z-index: 9; padding: 0 0 0 0; margin: 0 0 0 0; } #underlay { font-family: Courier New; font-size: 20px; opacity: 0.3; z-index: 1; padding: 0 0 0 0; margin: 0 0 0 0; } div.underlay { font-family: Courier New; font-size: 20px; opacity: 0.3; z-index: 2; padding: 0 0 0 0; margin: 0 0 0 0; } </style> … regimen … has nothing to do with interactive entry, which should be more in your “overlay” thinking, else the user is stumped … but … can help with dynamically enhanced markup jobs that value add to the aesthetics of the webpage … specifically showing the user “where they’ve been” amongst the “sea of letters” of our changed word_find_game.html Word Find Game you can also try below. Previous relevant Word Find Game Primer Tutorial is shown below. Today’s “Word Find Game” gets its inspirations from two sources … remembering those word find games you might find in the Sunday newspapers … and as a coding basis … textarea and Selection API user interface you can prepare for by reading yesterday’s Selection API and Clipboard API Tutorial Today we just do the “proof of concept” first draft word_find_game.html, because the Selection API highlighting really suits … horizontal forwards horizontal backwards … word finding in the game, but we also want to allow for … vertical down vertical up diagonal right down diagonal right up diagonal left down diagonal left up … which can be handled, but in a pretty kludgy way … function retry() { if ((” + document.getElementById(‘nameif’).title).trim() != ”) { document.getElementById(‘nameif’).src=document.getElementById(‘nameif’).title; document.getElementById(‘nameif’).title=”; } else { document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, subscore); } } function cscore(cursortype, ssc) { if (ssc != 0) { goes++; } if (ssc > 0) { score+=ssc; } document.getElementById(‘score’).innerHTML=” + score + ‘/’ + goes; subscore=0; return cursortype; } function checkname(iois, iserror) { var ifnd=-1, newname=”;

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

Word Find Game Primer Tutorial

Posted on by

Today’s “Word Find Game” gets its inspirations from two sources … remembering those word find games you might find in the Sunday newspapers … and as a coding basis … textarea and Selection API user interface you can prepare for by reading yesterday’s Selection API and Clipboard API Tutorial Today we just do the “proof of concept” first draft word_find_game.html, because the Selection API highlighting really suits … horizontal forwards horizontal backwards … word finding in the game, but we also want to allow for … vertical down vertical up diagonal right down diagonal right up diagonal left down diagonal left up … which can be handled, but in a pretty kludgy way … function retry() { if ((” + document.getElementById(‘nameif’).title).trim() != ”) { document.getElementById(‘nameif’).src=document.getElementById(‘nameif’).title; document.getElementById(‘nameif’).title=”; } else { document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, subscore); } } function cscore(cursortype, ssc) { if (ssc != 0) { goes++; } if (ssc > 0) { score+=ssc; } document.getElementById(‘score’).innerHTML=” + score + ‘/’ + goes; subscore=0; return cursortype; } function checkname(iois, iserror) { var ifnd=-1, newname=”; var revsisc=”, jrev=0; console.log(‘checkname1’); if (iserror) { if (iois.src.indexOf(‘second=’) == -1 && iois.src.indexOf(‘iswordthere=’) != -1) { if ((” + iois.title).trim() != ”) { //document.getElementById(‘mytao’).style.cursor=’pointer’; document.body.title=”; iois.src=iois.title; iois.title=”; } else { //alert(1); for (jrev=eval(-1 + eval(” + decodeURIComponent(iois.src.split(‘iswordthere=’)[1].split(‘&’)[0].split(‘#’)[0]).length)); jrev>=0; jrev–) { revsisc+=decodeURIComponent(iois.src.split(‘iswordthere=’)[1].split(‘&’)[0].split(‘#’)[0]).substring(jrev, eval(1 + jrev)); } //alert(‘Newname=’ + revsisc); document.body.title=”; iois.title=”; iois.src=iois.src.split(‘iswordthere=’)[0] + ‘second=y&iswordthere=’ + encodeURIComponent(revsisc); } } else { document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, subscore); } } else { if (iois != null) { ifnd=iois.src.indexOf(‘iswordthere=’); console.log(‘checkname2 ‘ + ifnd); var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null && ifnd != -1) { console.log(‘checkname3 ‘ + ifnd); if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { console.log(‘checkname4 ‘ + ifnd); if (aconto.body.innerHTML.indexOf(‘</p>’) != -1 && aconto.body.innerHTML.indexOf(‘></p>’) == -1) { document.body.title=”; iois.title=”; document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, Math.abs(subscore)); console.log(‘Found name ‘ + aconto.body.innerHTML.split(‘</p>’)[0].split(‘>’)[eval(-1 + aconto.body.innerHTML.indexOf(‘</p>’)[0].split(‘>’).length)]); } else if (aconto.body.innerHTML.indexOf(‘<‘) == -1 && aconto.body.innerHTML.trim() != ”) { document.body.title=”; iois.title=”; document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, Math.abs(subscore)); console.log(‘Found name ‘ + aconto.body.innerHTML); } else if (iois.src.indexOf(‘second=’) == -1 && iois.src.indexOf(‘iswordthere=’) != -1) { if ((” + iois.title).trim() != ”) { //document.getElementById(‘mytao’).style.cursor=’pointer’; document.body.title=”; iois.src=iois.title; iois.title=”; } else { //alert(1); for (jrev=eval(-1 + eval(” + decodeURIComponent(iois.src.split(‘iswordthere=’)[1].split(‘&’)[0].split(‘#’)[0]).length)); jrev>=0; jrev–) { revsisc+=decodeURIComponent(iois.src.split(‘iswordthere=’)[1].split(‘&’)[0].split(‘#’)[0]).substring(jrev, eval(1 + jrev)); } //alert(‘Newname=’ + revsisc); document.body.title=”; iois.title=”; iois.src=iois.src.split(‘iswordthere=’)[0] + ‘second=y&iswordthere=’ + encodeURIComponent(revsisc); } } else { document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, subscore); } } else { console.log(‘checkname5 ‘ + ifnd); //alert(‘WhY?’); document.getElementById(‘mytao’).style.cursor=cscore(‘pointer’, subscore); } } else if (ifnd != -1) { console.log(‘checkname6 ‘ + ifnd); ifnd=ifnd; if

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

Selection API and Clipboard API Tutorial

Posted on by

There’s the … clipboard, the “cut and copy and paste ideas”, for text, as we showed you with Clipboard API Image Tutorial and Clipboard API Primer Tutorial … but there’s also the bit before you reach the clipboard using the … text selection (ie. the bit of text you highlight using your mouse or touchpad) … accessible, today, via our introduction to the Selection API … using HTML changed code … <table><tr><td><textarea id=mytao class=editor rows=7 cols=120 onmousedown=”mustnot=true; setTimeout(mnoff, 2000);” ontouchstart=”mustnot=true; setTimeout(mnoff, 2000);”></textarea></td></TR><TR><td id=emailsms style=display:none;vertical-align:top;> <a target=_blank href=’mailto:?subject=My%20Selection%20…&body=’ id=aemail title=Email>&#128231;</a> <a target=_blank onmouseover=”if (smsee.length == 0 && origsmsurl.indexOf(‘sms:&’) != -1) { smsee=prompt(‘Please enter SMS number to send to.’, ”); if (smsee == null) { smsee=”; } else { origsmsurl=origsmsurl.replace(‘sms:&’,’sms:’ + smsee + ‘&’); asmsurl=asmsurl.replace(‘sms:&’,’sms:’ + smsee + ‘&’); this.href=asmsurl; } }” ontouchstart=”if (smsee.length == 0 && origsmsurl.indexOf(‘sms:&’) != -1) { smsee=prompt(‘Please enter SMS number to send to.’, ”); if (smsee == null) { smsee=”; } else { origsmsurl=origsmsurl.replace(‘sms:&’,’sms:’ + smsee + ‘&’); asmsurl=asmsurl.replace(‘sms:&’,’sms:’ + smsee + ‘&’); this.href=asmsurl; } }” href=’sms:&body=My%20Selection%20…’ id=asms title=SMS>&#128223;</a></td></tr></table><br><br> … supported by new Javascript event interventional code … var origemailurl=’mailto:?subject=My%20Selection%20…&body=’; var origsmsurl=’sms:&body=My%20Selection%20…’; var smsee=”; // addEventListener version document.addEventListener(‘selectionchange’, () => { document.getElementById(’emailsms’).style.display=’table-cell’; document.getElementById(‘mytao’).title=document.getSelection().toString(); aemailurl=origemailurl + encodeURIComponent(document.getSelection().toString()); document.getElementById(‘aemail’).href=aemailurl; asmsurl=origsmsurl + encodeURIComponent(String.fromCharCode(10) + document.getSelection().toString()); document.getElementById(‘asms’).href=asmsurl; console.log(document.getSelection().toString()); }); // addEventListener version document.addEventListener(‘selectstart’, () => { document.getElementById(‘mytao’).title=”; aemailurl=origemailurl; asmsurl=origsmsurl; console.log(‘Selection started’); }); … to be able to share your highlighted text snippets via email or SMS in the changed clipboard_api_test.html Selection API usage web application you can also try below. Previous relevant Clipboard API Image Tutorial is shown below. Yes, yesterday’s Clipboard API Primer Tutorial‘s Clipboard API usages just involved … text based data … and today we turn our attention to … image based data … to extend the functionality and interest of our changed clipboard_api_test.htm proof of concept text and image clipboard using webpage. It’s lucky for us that there are so many good resources out there to help, one link of real interest, for us, being this excellent link, thanks, getting us to use this new Javascript function … async function pasteImage() { //event.stopPropagation(); try { const permission = await navigator.permissions.query({ name: ‘clipboard-read’ }); if (permission.state === ‘denied’) { throw new Error(‘Not allowed to read clipboard.’); } const clipboardContents = await navigator.clipboard.read(); for (const item of clipboardContents) { if (!item.types.includes(‘image/png’)) { throw new Error(‘Clipboard contains non-image data.’); } const blob = await item.getType(‘image/png’); imgz = new Image(); anothercell(); imgz.onload =

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

WordPress Blog Collaborative Annotated Email Cedes to Context Menu Tutorial

Posted on by

Up until the work of this blog posting (a few days ago by the time this posting “goes to air”) the “highlighted text” on this WordPress Blog work talked about with WordPress Blog Collaborative Annotated Email FormData Post Tutorial only talked about the inhouse aspects to this functionality, perhaps understandably. This was quite brazen, and today we set out to “un”brazen it. What happens when you highlight text on a webpage and two finger gesture on macOS or right click on Windows? Yes, you are presented with a “Context Menu” (containing “Copy” option at the very least) dependent on the web browser and operating system overseeing that webpage. Well, quite often our “inhouse work” was effectively “swallowing up” the chance to get to the “Context Menu” because not enough delay had been coded into our functionality. And so, onto this WordPress Blog’s Twenty Ten theme’s header.php we changed … function delayshow() { document.getElementById(‘hfloater’).style.display=’block’; } function lookforhighlight() { var usualdelay=2000, oRange=null, oRect=null, s_top=’0px’, s_left=’5px’, fourhundred=300, isfx=’0′; usualdelay=9000; // new bigger delay allowing for normal copy/paste to get in first, perhaps if (hight == ‘ ‘) { setTimeout(lfhlater, 12000); // 5000); hight=”; } if (!document.getElementById(‘phfloater’)) { setTimeout(lookforhighlight, usualdelay); var xsel=window.getSelection().toString(); if (xsel.length == 0) { try { xsel=document.selection.createRange().htmlText; xsel=xsel.replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘); xsel=xsel.replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘); } catch(ertw) { xsel=”; } } else { xsel=xsel.replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘).replace(String.fromCharCode(10),’ ‘); xsel=xsel.replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘).replace(String.fromCharCode(13),’ ‘); if (xsel != hight && xsel != ”) { oRange = window.getSelection().getRangeAt(0); //get the text range oRect = oRange.getBoundingClientRect(); s_top = (” + oRect.top).replace(‘px’,”) + ‘px’; s_left = (” + oRect.left).replace(‘px’,”) + ‘px’; if (s_top != ‘0px’) { fourhundred=eval(” + s_top.replace(‘px’,”)); s_top=’0px’; var dse=”, dde=”; if (document.scrollingElement) { if (document.scrollingElement.scrollTop) { dse=(” + document.scrollingElement.scrollTop); } } if (document.documentElement) { if (document.documentElement.scrollTop) { dde=(” + document.documentElement.scrollTop); } } if (dse != ”) { fourhundred+=eval(” + dse.replace(‘px’,”)); isfx=’0′; } else if (dde != ”) { fourhundred+=eval(” + dde.replace(‘px’,”)); isfx=’0′; } else if ((” + window.scrollY) != ”) { fourhundred+=eval(” + (” + window.scrollY).replace(‘px’,”)); isfx=’0′; } else if ((” + window.pageYOffset) != ”) { fourhundred+=eval(” + (” + window.pageYOffset).replace(‘px’,”)); isfx=’0′; } else { isfx=(” + document.body.scrollTop).replace(‘px’,”); if (isfx.replace(‘0’,”) == ”) { isfx=(” + document.scrollingElement.scrollTop).replace(‘px’,”); if (isfx.replace(‘0’,”) == ”) { isfx=(” + window.scrollY).replace(‘px’,”); if (isfx.replace(‘0’,”) == ”) { isfx=(” + window.pageYOffset).replace(‘px’,”); } } } } fourhundred+=100; } } } if (xsel != hight && xsel != ”) { hight=xsel; if

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