Tag Archives: SVG

Editable Calendar PHP Tutorial

Posted on by

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

Editable Calendar Collaboration Tutorial

Posted on by

Yesterday’s Editable Calendar Cross Domain Sharing Tutorial had us … sharing … and caring and we all know sharing can lead to … collaboration … and today we’re encouraging users to join in with others sharing editable calendars via email (and though the hashtagging goes beyond SMS lengths we’re including that as an option too, and we may find a way down the track that the lengths of data can be reduced to suit an SMS message … function doemail(inidea) { var newurl=document.URL.split(‘//’)[0] + ‘//’ + ‘www.rjmprogramming.com.au/calendar_contenteditable.html’ + ‘?_x_tr_tl=’ + document.getElementById(‘language’).value + ‘&month=’ + themonth + ‘&theyear=’ + theyear + ‘#’ + encodeURIComponent(‘<h’ + ‘1’ + ((” + document.body.innerHTML).split((‘<h’ + ‘1’))[1]).split(‘ id=”lastdiv”></div>’)[0] + ‘ id=”lastdiv”></div>’); var zfrom=’youllneverfindthis’, zto=’youllneverfindthis’; var azx=top.document.getElementById(‘xae’ + ‘mail’); if (!azx) { azx=top.document.createElement(“a”); } top.document.body.appendChild(azx); azx.style = “display: none”; azx.target = “_top”; azx.id = ‘xae’ + ‘mail’; azx.href = ‘mailto:’ + inidea + ‘?subject=’ + encodeURIComponent(document.getElementsByTagName(‘h1’)[0].innerHTML.split(‘<select’)[0].split(‘</font>’)[0].split(‘>’)[eval(-1 + document.getElementsByTagName(‘h1’)[0].innerHTML.split(‘<select’)[0].split(‘</font>’)[0].split(‘>’).length)].replace(/\&nbsp\;/g,’ ‘)) + ‘%20’ + encodeURIComponent(document.getElementsByTagName(‘h1’)[0].innerHTML.split(‘</select>’)[1].split(‘</font>’)[0].split(‘>’)[eval(-1 + document.getElementsByTagName(‘h1’)[0].innerHTML.split(‘</select>’)[1].split(‘</font>’)[0].split(‘>’).length)].split(‘<‘)[0].replace(/\&nbsp\;/g,’ ‘) + ‘ … ‘) + ‘%20’ + encodeURIComponent(document.getElementById(‘calcap’).innerText) + ‘&body=’ + encodeURIComponent(newurl); //encodeURIComponent(document.URL.split(‘#’)[0] + ‘<h2’ + document.body.innerHTML.split(‘<h2’)[1])); azx.click(); return ”; } function dosms() { var newurl=document.URL.split(‘//’)[0] + ‘//’ + ‘www.rjmprogramming.com.au/calendar_contenteditable.html’ + ‘?_x_tr_tl=’ + document.getElementById(‘language’).value + ‘&month=’ + themonth + ‘&theyear=’ + theyear + ‘#’ + encodeURIComponent(‘<h’ + ‘1’ + ((” + document.body.innerHTML).split((‘<h’ + ‘1’))[1]).split(‘ id=”lastdiv”></div>’)[0] + ‘ id=”lastdiv”></div>’); if (1 == 1) { snum=(” + prompt(‘Please enter SMS number to send to. We suspect message is too long for an SMS and if you enter an email address here instead, we will try to send an email instead. Append space(s) to remember, whatever you enter, for next time.’, snum)).replace(/^null/g, (defemail.indexOf(‘@’) != -1 ? defemail : (defsms != ” ? defsms : ”)) ); } else { snum=(” + prompt(‘Please enter SMS number to send to. Append space(s) to remember for next time.’, snum)).replace(/^null/g, (defsms != ” ? defsms : (defemail.indexOf(‘@’) != -1 ? defemail : ”))); } if (snum == null) { snum=”; } if (snum.indexOf(‘@’) != -1) { if (snum.trim() != snum) { snum=snum.trim(); if ((” + window.localStorage.getItem(‘findeditablecalendaremailee’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { window.localStorage.removeItem(‘findeditablecalendaremailee’); } window.localStorage.setItem(‘findeditablecalendaremailee’, snum); defemail=snum; } return doemail(snum); } else if (snum.trim() != ” && snum.trim().replace(/0/g,”).replace(/1/g,”).replace(/2/g,”).replace(/3/g,”).replace(/4/g,”).replace(/5/g,”).replace(/6/g,”).replace(/7/g,”).replace(/8/g,”).replace(/9/g,”).trim() == ”) { if (snum.trim() != snum) { snum=snum.trim(); if ((” + window.localStorage.getItem(‘findeditablecalendarsmsno’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { window.localStorage.removeItem(‘findeditablecalendarsmsno’); } window.localStorage.setItem(‘findeditablecalendarsmsno’, snum); defsms=snum; } var azx=top.document.getElementById(‘xas’ + ‘ms’); if (azx == null) { azx=top.document.createElement(“a”); } top.document.body.appendChild(azx); azx.id = ‘xas’ + ‘ms’; azx.target = “_top”; azx.style … Continue reading →

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

Editable Calendar Cross Domain Sharing Tutorial

Posted on by

Unless you are new to the party you’ll know that with yesterday’s Editable Calendar Styling Tutorial‘s Editable Calendar project … Google Translate … is our go to regarding the internationalization and language translation functionality. We get to Google Translate, where permitted (up to you, and whether you have popup blockers happening with the web browser you are using), via a popup window, which means, in that scenario, there are two distinct domains in play … Google Translate‘s domain “child” window … and … RJM Programming‘s domain “parent” window … and so the communications between parent and child (regarding any Saved calendar data a user may want to apply and remember), in this scenario, are restricted, but asking Under what conditions can window.opener.parentfunc() type of call work when the domains are different? reminded us of the talents of window.postMessage to help here, thanks. It got us to … Be listening out at the RJM Programming domain document.URL scenario “parent” window … window.addEventListener(“message”, (event) => { // thanks to https://www.google.com/search?q=Undef+what+conditions+can+window.opener.parentfunc()+type+of+call+work+when+the+domains+are+different%3F&rlz=1C5OZZY_en&oq=Undef+what+conditions+can+window.opener.parentfunc()+type+of+call+work+when+the+domains+are+different%3F&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTI2NzQwajBqN6gCALACAA&sourceid=chrome&source=chrome.ob&ie=UTF-8 var thislang=”; // Always verify the origin of the sender for security if (event.origin !== “https://www-rjmprogramming-com-au.translate.goog”) return; if ((” + event.data).indexOf(encodeURIComponent(‘<h’ + ‘1’)) != -1) { if (document.getElementById(‘language’).outerHTML.indexOf(‘ data-lcode=”‘) != -1 && document.getElementById(‘language’).outerHTML.indexOf(‘ data-lcode=””‘) == -1) { thislang=document.getElementById(‘language’).getAttribute(‘data-lcode’); } document.body.innerHTML='<h’ + ‘1’ + decodeURIComponent((” + event.data).split(encodeURIComponent(‘<h’ + ‘1’))[1]).split(‘ id=”lastdiv”></div>’)[0] + ‘ id=”lastdiv”></div>’; if (thislang.trim() != ”) { document.getElementById(‘language’).value=thislang; document.getElementById(‘language’).setAttribute(‘data-lcode’, thislang); } inplay=true; lastinplayc=document.body.innerHTML + ‘ ‘; fromfor=true; setTimeout(lsit, 2000); } }); Be broadcasting at the Google Translate domain document.URL scenario “child” window … if (window.opener) { if (document.URL.indexOf(‘&iam=’) != -1) { window.opener.postMessage(encodeURIComponent(document.body.innerHTML), decodeURIComponent(document.URL.split(‘&iam=’)[1].split(‘&’)[0].split(‘#’)[0])); } else { window.opener.postMessage(encodeURIComponent(document.body.innerHTML), ‘https://rjmprogramming.com.au’); } } … for our Editable Calendar project. Also, today, we introduce Month, Year “breadcrumb” caption element … CSS caption element SVG background image based arrows … thanks to this great advice … #calcap { // thanks to https://www.google.com/search?q=background+arrow+background+svg+images+at+left+and+right+of+an+element&rlz=1C5OZZY_en&oq=background+arrow+background+svg+images+at+left+and+right+of+an+element&gs_lcrp=EgZjaHJvbWUyBggAEEUYOdIBCTM1ODAyajBqN6gCALACAA&sourceid=chrome&source=chrome.ob&ie=UTF-8 z-index: 67; padding: 8 8 8 8; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4); background-color: rgb(240,240,240); border-radius: 8px; background-image: url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M15 18l-6-6 6-6″/></svg>’), url(‘data:image/svg+xml;utf8,<svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″><path d=”M9 18l6-6-6-6″/></svg>’); background-position: left center, right center; background-repeat: no-repeat; } Javascript caption element ondblclick event logic (based on cursor positioning) function incit(e) { var x=-999, y=-999; var rectis=e.target.getBoundingClientRect(); if (e.touches) { if (e.touches[0].pageX) { x = e.touches[0].pageX; y = e.touches[0].pageY; } else { x = e.touches[0].clientX; y = e.touches[0].clientY; … Continue reading →

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

Canvas Interfacer Image Map Circle Tutorial

Posted on by

Further to the recent Canvas Interfacer Image Map Collaboration Tutorial‘s Image Map creation modes … shape=rect … via 2 pointings … and … shape=poly … via an initial click and a series of right click (non-mobile) and double click (mobile) ending polygon with up to 2 separated clicks … today we also allow for … shape=circle … in the two modes of use the user enters as C0 or C2 at the first prompt window respectively … Image Map ends up just with shape=circle (rather than any shape=rect) Image Map ends up with shape=circle then shape=rect combinations (allowing for both to play their part, as required) … to round out what Image Maps allow. Again, rubberbanding in amongst HTML div element innerHTML SVG innards is the go, but for shape=circle we use SVG circle element types rather than the SVG polyline used for rubberbanding the shape=poly Image Map area subelements. We hope you try … Random Background via Lorem Picsum Image Map savvy web application … uses … the changed user_of_signature_signature.htm Canvas and Image Map web application .. helped out by … the changed signature_signature.js external Javascript … to see this in action. Previous relevant Canvas Interfacer Image Map Collaboration Tutorial is shown below. So far, with our currently running Image Map creating project yesterday’s Canvas Interfacer Mobile Image Map Tutorial continued on at, we’ve had a bit of focus on … a single user getting as far into the Image Map creation process themselves because there are advantages to “strike while the iron is hot” marrying up Image Map area element positioning with a description, that can help later with stitching together Javascript event logic that can be useful making the Image Map … useful … but … that doesn’t mean sharing and collaboration are of no use … perhaps the originator is a better designer than coder, for example Anyway, that made us turn our attention to sharing and collaboration, email or SMS based, communication functionality, and we saw the two intervention points being … share the contents of the Image Map only HTML textarea element (with some default surrounding HTML and Javascript supplied) … and after a few double clicks, perhaps, the user might get to be able to … share the contents of the Image Map (with user tailored surrounding HTML and Javascript) textarea element So how does a user make this happen? On mobile, it’s … Continue reading →

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

SVG Emoji Favicon Aesthetics CSS Tutorial

Posted on by

The recent SVG Emoji Favicon HTML Entities Tutorial had us adding user interaction, but we think especially as far as the input type submit buttons were concerned, lacking style. Especially on mobile platforms, on occasions without attention, and you add a background colour to your input type submit buttons you can end up with … too small a button white font … double whammy bad scenario, which prompted us to get interested in some CSS … <?php echo ” <style> input[type=\”submit\”] { font-color: blue; color: blue; font-size: 24px; height: 50px; border-radius: 55px; border: 1px dotted red; background-color: yellow; text-shadow: -1px 1px 1px #952dff; } textarea { background-color: #f0f0f0; } input[type=\”text\”] { background-color: #e0e0e0; } </style> “; ?> … for this project in the changed emojiicon.php web application you can try for yourself below. Previous relevant SVG Emoji Favicon HTML Entities Tutorial is shown below. Yesterday’s SVG Emoji Favicon Textarea Tutorial … textarea SVG … adding onto … numerical codepoint definition means to an Emoji definition in terms of web browser tab icon creation capabilities … shone a light, a “lightbulb moment” for us, in terms of the fact that so many Emojis of interest are actually multiple HTML entity ones (eg. all the national flag emojis are actually made up of four HTML entities) and our initial textbox design of … <?php echo ” <input title=’Emoji codepoint as web browser tab icon (ie. look up to see after clicking display)’ type=number onchange=emnone(); onblur=emnone(); id=codepoint name=codepoint step=’1′ value=’-1′ min=’-1′></input> “; ?> … should be able to become the more savvy (for multiple emojis now possible because of the logics behind the new textbox mentioned below) via this new Javascript … <?php echo ” /** * Convert a string to HTML entities … thanks to https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript */ String.prototype.toHtmlEntities = function() { return this.replace(/./gm, function(s) { // return \”&#\” + s.charCodeAt(0) + \”;\”; return (s.match(/[a-z0-9\s]+/i)) ? s : \”&#\” + s.charCodeAt(0) + \”;\”; }); }; function emnone() { document.getElementById(‘anemoji’).value=”; } function cpit(otb) { if (otb.value != ”) { if (otb.value.toHtmlEntities().indexOf(‘&#x’) != -1) { } else if (otb.value.toHtmlEntities().indexOf(‘&#’) != -1) { document.getElementById(‘codepoint’).type=’text’; //alert(” + otb.value.toHtmlEntities().replace(/^\&\#/g,”).replace(/\;$/g,”).replace(/\;\&\#/g,’.’)); document.getElementById(‘codepoint’).value=” + otb.value.toHtmlEntities().replace(/^\&\#/g,”).replace(/\;$/g,”).replace(/\;\&\#/g,’.’); } else { document.getElementById(‘codepoint’).value=”; for (var jj=0; jj<otb.value.length; jj++) { if (document.getElementById(‘codepoint’).value == ”) { document.getElementById(‘codepoint’).value=” + otb.value.substring(jj).substring(0,1).charCodeAt(); } else { document.getElementById(‘codepoint’).type=’text’; document.getElementById(‘codepoint’).value+=’.’ + otb.value.substring(jj).substring(0,1).charCodeAt(); } } } //alert(otb.value.toHtmlEntities()); } } “; ?> … that supplements the web application user interaction possibilities via a new HTML … Continue reading →

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

Diagonal Element Rubber Banding Mobile Tutorial

Posted on by

Yesterday’s Diagonal Element Rubber Banding Tutorial saw “Rubber Banding” introduced, better for non-mobile, but today … we shore up mobile “Rubber Banding” via ontouchmove introduced … document.body.ontouchmove=function(e){ var rectis=document.body.getBoundingClientRect(); if (e.touches[0].clientX) { ourDrawLine(eval(rectis.left + e.touches[0].clientX), eval(rectis.top + e.touches[0].clientY)); } else { ourDrawLine(eval(0 + e.touches[0].pageX), eval(0 + e.touches[0].pageY)); } }; … logic, as well as … we shore up mobile “Analogue Clock” … if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById(‘fiboththree’).srcdoc=”<head><title>” + (” + new Date()) + “</title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 322px; height: 322px; position: absolute; top: 48%; left: 55%; transform: translate(-50%, -50%); } </style></head><body id=xbody><div class=\”logo\”><svg class=\”logo__svg\”><circle cx=\”50%\” cy=\”50%\” r=\”160\” style=\”fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\”/></svg></div></body>”; //.replace(/inline\-block\;/g, ‘inline;’); } else { document.getElementById(‘fiboththree’).srcdoc=”<head><title>” + (” + new Date()) + “</title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 312px; height: 312px; position: absolute; top: 47%; left: 49%; transform: translate(-50%, -50%); } </style></head><body id=xbody><div class=\”logo\”><svg class=\”logo__svg\”><circle cx=\”50%\” cy=\”50%\” r=\”155\” style=\”fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\”/></svg></div></body>”; //.replace(/inline\-block\;/g, ‘inline;’); } … aesthetics … as well as … “Rubber Banding” hashtag URL sharing … in the changed fifth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below. Previous relevant Diagonal Element Rubber Banding Tutorial is shown below. Some days before yesterday’s Diagonal Element Square Nesting Tutorial we compared this current “nesting” diagonal element logic to … Yes, this might be thought of as “overkill” compared to … hr element rotations … and/or … SVG … and, today, yes, we bring back “hr element rotation diagonal” thinking, inspired by the work done in the days of PDF Image and Text Nodes Windows Files Tutorial, adding some “what you might hear around the traps” referred to as “Rubber Banding”. Here we “Rubber Band” … after an initial click event followed by some mousemove (like “drag”) event user actions … as a temporary look while in “mousemove” mode, but a detected “mouseout”, in our logic, retains that last “Rubber Banding”, featuring an “hr” diagonal, and overlayed, element set. And so, yet again, feel free to try out the changed fourth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below. Previous relevant Diagonal Element Square Nesting Tutorial is shown below. We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal … display: inline; display: inline-block; … nested diagonals across a square, testing more placement accuracy concepts … function analyze(iois) { var arecto=null, … Continue reading →

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

Diagonal Element Rubber Banding Tutorial

Posted on by

Some days before yesterday’s Diagonal Element Square Nesting Tutorial we compared this current “nesting” diagonal element logic to … Yes, this might be thought of as “overkill” compared to … hr element rotations … and/or … SVG … and, today, yes, we bring back “hr element rotation diagonal” thinking, inspired by the work done in the days of PDF Image and Text Nodes Windows Files Tutorial, adding some “what you might hear around the traps” referred to as “Rubber Banding”. Here we “Rubber Band” … after an initial click event followed by some mousemove (like “drag”) event user actions … as a temporary look while in “mousemove” mode, but a detected “mouseout”, in our logic, retains that last “Rubber Banding”, featuring an “hr” diagonal, and overlayed, element set. And so, yet again, feel free to try out the changed fourth draft Nested Diagonal Elements web application with it’s analogue clock or it’s square diagonals below. Previous relevant Diagonal Element Square Nesting Tutorial is shown below. We’re adding onto the day before yesterday’s Diagonal Element Nesting Analogue Clock Tutorial some diagonal … display: inline; display: inline-block; … nested diagonals across a square, testing more placement accuracy concepts … function analyze(iois) { var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh=”; if (!oktolook) { return ”; } if (iois != null) { var aconto = (iois.contentWindow || iois.contentDocument); if (aconto != null) { if (aconto.document) { aconto = aconto.document; } if (aconto.body != null) { elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split(‘<‘)[2].split(‘ ‘)[0].split(‘>’)[0]); for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) { arecto=elesa[ivb].getBoundingClientRect(); if (ivb == 0 && iois.id == ‘ifleft’) { subsups=aconto.getElementsByTagName(‘sub’); brecto=subsups[0].getBoundingClientRect(); crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect(); huh=’arecto brecto crecto ‘ + String.fromCharCode(10); huh+=’ left: ‘ + arecto.left + ‘ ‘ + brecto.left + ‘ ‘ + crecto.left + ‘ ‘ + String.fromCharCode(10); huh+=’ top: ‘ + arecto.top + ‘ ‘ + brecto.top + ‘ ‘ + crecto.top + ‘ ‘ + String.fromCharCode(10); huh+=’ width: ‘ + arecto.width + ‘ ‘ + brecto.width + ‘ ‘ + crecto.width + ‘ ‘ + String.fromCharCode(10); huh+=’height: ‘ + arecto.height + ‘ ‘ + brecto.height + ‘ ‘ + crecto.height + ‘ ‘ + String.fromCharCode(10); aconto.getElementById(‘mycontainer’).style.width=aconto.getElementById(‘mycontainer’).style.height; //” + eval(eval(” + crecto.right) + 0 + eval(0.0 * eval(” + crecto.width))) + ‘px’; //prompt(huh,’one;’ + iois.id); //aconto.body.innerHTML+='<div style=”position:absolute;left:’ + Math.max(0,arecto.left) + ‘px;top:’ + brecto.top + ‘px;width:’ + brecto.right + ‘px;height:’ + brecto.height + ‘px;background-color:rgba(255,0,0,0.5);”></div>’; elesa[ivb].style.left=’50px’; elesa[ivb].style.marginTop=’75px’; for (var iop=0; iop<15; iop++) { elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 … Continue reading →

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

Circle Terminology in Mathematics Jitters Tutorial

Posted on by

Before today’s work the blog posting Circle Terminology in Mathematics Tutorial below would annoy because of a “soon after page load” navigation to an iframe way below. We’ve seen problems like that before, and it’s normally been due to (where the Stop Press below explains the more robust solution ended up with) … [element].focus() call [element].scrollIntoView() call location.href=’#[idOfAnElement]’; iframe src attribute with a URL involving a real iframe document element ID hashtag navigatable to … but it was not immediately obvious examining code in and around the blog posting content where the usual causes above fitted in. But the end reason did fit in with the problem idea cause list above, but because in the PHP or HTML of the recipient web application associated with the HTML iframe navigated to, it had a textbox with ID equals s and because the TwentyTen themed WordPress blog you are currently reading IDs it’s search textbox s as well. a changed circular_text.html inhouse Circular Text HTML assistant a changed circular_text.php inhouse Circular Text PHP assistant We decided that the PHP or HTML of the recipient web application associated with the HTML iframe navigated to should give way here, and ID it’s textbox to be canbechilds instead so that the lack of “jittery navigation” means you’re reading this calmly ahead of a reread of that tutorial below. Stop Press Sure, we feel better doing the code steps above, but that was insufficient to solve the problem, but here on 01/02/2026 … welcome, February … we think we have a solution now! As intimated above, also a problem we discovered involved … iframe src attribute with a URL involving a real iframe document element ID hashtag navigatable to Rather than change WordPress Blog content we made the Analogue Clock and it’s “hosting friends” acknowledge any top window URLs pointing to this WordPress Blog, and “reflag them” if you will, via “hosting friends” doing code such as … var egtextis=location.search.split(‘text=’)[1] ? (location.search.split(‘text=’)[1].split(‘&’)[0]).replace(/\+/g, ‘ ‘) : ”; if ((” + top.document.URL).toLowerCase().indexOf(‘rjmprogramming.com.au/itblog’) != -1 || document.URL.indexOf(‘nowayjose=’) != -1) { if (egtextis.indexOf(‘%23xbody’) != -1) { egtextis=egtextis.replace(‘%23xbody’,’%3fxbody’); } else if (egtextis.indexOf(‘#xbody’) != -1) { egtextis=egtextis.replace(‘#xbody’,’?xbody’); } } … while the Analogue Clock HTML code itself should … cdone=false, vsonet=20000; function checktwnonz() { if (eval(” + window.top.scrollY) < vsonet) { document.getElementById(‘lbit’).style.display=’none’; setTimeout(checktwnonz, 3000); } else { document.getElementById(‘lbit’).style.display=’none’; document.getElementById(‘xbody’).scrollIntoView(); //location.href=’#xbody’; } } function onl() { var tx=”50%”; var ty=”100%”; var stx=1.0, sty=1.0; … Continue reading →

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