Tag Archives: url

Colouring In Drag and Drop Keyboard Events Tutorial

Despite us having precedents to turn to regarding … establishing a layer of keyboard onkeydown event logic for a non-textbox HTML element … we’ve had to look up so many websites for advice, thanks, that it must have been that “day of discovery” you should persevere with, for reference points into the future. Alas, little of it can be used on mobile platforms. Their setup precludes these keyboard independency possibilities we really like about non-mobile keyboard event functionality. It can set up a “whole new woooorrrrllllddd” for your web application designs! What was the motivation for our interest? Well, we have a mouse with a mouse wheel, and it occurred to us how useful the wheel could be when dragging and some content is below the fold, and rather than lose the dragging, you can use the mouse wheel to navigate to those areas of the webpage, still dragging your draggable element, with our Colouring In web application. And so, onto yesterday’s Colouring In Drag and Drop Mixed Platform Collaboration Tutorial … This excellent link taught us … When tabindex’s value is set to a negative number, its element can be programmatically focused via JavaScript. This excellent link taught us … el.focus({preventScroll: true}); # can focus to element el without involving any programmatic scrolling This excellent link taught us … Pondered … can i simulate mousewheel up or down with javascript … and our findings … no! But interesting. This excellent link taught us … Mused on … Drag, drop and mousewheel? … and our findings … yes for physical mouse wheel usage (hence today’s interest) … but no, regarding Javascript logic. Again, very interesting. This excellent link taught us … We didn’t follow through on it but … How to scroll the window automatically when mouse moves bottom of the page using jquery … intimates you could use jQuery code to detect user scrolling towards “below the fold” and warn the user or perhaps take some action … interesting. This excellent link taught us … element.scrollIntoView({block: ‘end’}); # scrolls into view to the bottom of element This excellent link taught us … Setting up a timed Javascript functionality with codelines like … document.body.scrollTop = document.body.scrollTop + 200; … could get around the Drag and Drop API disallowing programmatical scrolling during dragging operations. … to arrive at … document.getElementById(‘mytable’).tabIndex = -1; document.getElementById(‘mytable’).onkeydown = function(e) { var charx = e.which ||

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

Colouring In Drag and Drop Mixed Platform Collaboration Tutorial

The urging within a lot of Responsive Web Design online advice is to use “proportional” units such as … % vw and vh … as much as possible, and all that is true. But the “px” unit is still relevant on occasions, and even needed on occasions, and we’d like to explain this a little in terms of an approach we took, on top of the work of yesterday’s Colouring In Drag and Drop Undo and Redo Tutorial, where we tried to improve the sharing qualities of “colouring in of a clip art background” scenario (fairly obviously insulting to the child who’s done their best but the computer’s let them down), where precision is so important with the sharing, and the collaboration occurs between devices of vastly different platform and device dimensions. We started our … “canvas” table using happy Responsive Web Design … width: 90%; height: 53%; … and this is all okay for the capture side, where the background image and colouring in are done by an individual user at their own device … but then when … the user shapes to email off a snapshot of where they are at with the colouring in and we indicate in the body URL a “canvas” table whereby that width: 90%; height: 53%; is converted into a “px” equivalent, via … function doemail(inidea) { var changeanyfrom=’width: 90%; height: 53%;’; // tableohprefix var changeanyto=’width: 90%; height: 53%;’; var tableohprefixbit=”; var documentURL=document.URL; if ((” + location.hash).indexOf(‘inu’ + ‘rl=’) != -1 && documentURL.indexOf(‘#’) == -1) { documentURL+=(” + location.hash); } if (document.getElementById(‘mytable’).outerHTML.indexOf(changeanyfrom) == -1 && document.getElementById(‘mytable’).outerHTML.indexOf(changeanyfrom.replace(/\ /g,”)) != -1) { changeanyfrom=changeanyfrom.replace(/\ /g,”); } if (document.getElementById(‘mytable’).outerHTML.indexOf(changeanyfrom) != -1) { var mtcb=document.getElementById(‘mytable’).getBoundingClientRect(); changeanyto=’width:’ + mtcb.width + ‘px;height:’ + mtcb.height + ‘px;’; tableohprefixbit=’?tableohprefix=’ + encodeURIComponent(document.getElementById(‘mytable’).outerHTML.split(‘<table’)[1].split(‘>’)[0].replace(changeanyfrom,changeanyto)); if (documentURL.indexOf(‘?’) != -1) { documentURL=documentURL.replace(‘?’, tableohprefixbit + ‘&’); } else if (documentURL.indexOf(‘.php’) != -1) { documentURL=documentURL.replace(‘.php’, ‘.php’ + tableohprefixbit); } else if (documentURL.indexOf(‘#’) != -1) { documentURL=documentURL.replace(documentURL.split(‘#’)[0], documentURL.split(‘#’)[0] + tableohprefixbit); } else { documentURL+=tableohprefixbit; } //alert(documentURL); } //else { //alert(‘oops ‘ + document.getElementById(‘mytable’).outerHTML.split(‘>’)[0]); //} var bihbig=”; var fromone=’youllneverfindthis’; var toone=’youllneverfindthis’; var azx=top.document.getElementById(‘xae’ + ‘mail’); //alert(33); if (!azx) { azx=top.document.createElement(“a”); } //alert(3333); //if (1 == 1) { //document.getElementById(‘divas’).appendChild(azx); //} else { top.document.body.appendChild(azx); //} //(334); azx.style = “display: none”; //alert(2334); azx.target = “_top”; //alert(6334); azx.id = ‘xae’ + ‘mail’; document.getElementById(‘result’).innerHTML=”; if (inidea.indexOf(‘@’) == -1) { inidea=(” + prompt(‘Please enter Email address to send to.’, defemail)); if (inidea == null) { inidea=”; }

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

Colouring In Drag and Drop Undo and Redo Tutorial

We all make mistakes. Especially with any colouring in of a Clip Art background image, which might be happening for users of our Colouring In web application we last talked about with yesterday’s Colouring In Drag and Drop Background Image Tutorial. So we’ve decided to help out via … provide Undo and Redo button … var cursnap=0, snapshs=[”], cich=null, woca=null, lastundo=”; function undosnapshot() { if (snapshs[0] != ”) { //alert(‘cursnap=’ + cursnap + ‘ and jsundo att=’ + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’) + ‘ and length=’ + snapshs[eval(” + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’))].length); lastundo=document.getElementById(‘mytable’).innerHTML; document.getElementById(‘mytable’).innerHTML=snapshs[eval(” + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’))]; if (eval(” + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’)) > 0) { document.getElementById(‘jsredo’).setAttribute(‘data-ssn’, ” + eval(0 + eval(” + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’)))); document.getElementById(‘jsundo’).setAttribute(‘data-ssn’, ” + eval(-1 + eval(” + document.getElementById(‘jsundo’).getAttribute(‘data-ssn’)))); } } } function redosnapshot() { if (snapshs[0] != ”) { //alert(‘Cursnap=’ + cursnap + ‘ and jsredo att=’ + document.getElementById(‘jsredo’).getAttribute(‘data-ssn’) + ‘ and length=’ + snapshs[eval(” + document.getElementById(‘jsredo’).getAttribute(‘data-ssn’))].length); if (lastundo != ”) { document.getElementById(‘mytable’).innerHTML=lastundo; lastundo=”; } else { document.getElementById(‘mytable’).innerHTML=snapshs[eval(” + document.getElementById(‘jsredo’).getAttribute(‘data-ssn’))]; } } } function updatesnaps() { if (document.getElementById(‘mytable’).innerHTML != snapshs[cursnap]) { if (eval(” + snapshs.length) < 5) { lastundo=”; cursnap++; snapshs.push(document.getElementById(‘mytable’).innerHTML); document.getElementById(‘jsundo’).setAttribute(‘data-ssn’, ” + eval(-1 + cursnap)); document.getElementById(‘jsredo’).setAttribute(‘data-ssn’, ” + cursnap); } else { lastundo=”; cursnap=4; snapshs[1]=snapshs[2]; snapshs[2]=snapshs[3]; snapshs[3]=snapshs[4]; snapshs[4]=document.getElementById(‘mytable’).innerHTML; document.getElementById(‘jsundo’).setAttribute(‘data-ssn’, ” + eval(-1 + cursnap)); document.getElementById(‘jsredo’).setAttribute(‘data-ssn’, ” + cursnap); } } setTimeout(updatesnaps, 15000); } … functionality … and … a click in the pink area allows a Google clip art image search webpage be displayed … and these … being right clicked might show a Copy Image Address option which copies into the clipboard … data suitable for pasting into the Image URL textbox we introduced yesterday … whether that be an image data URL or perhaps even an absolute image URL, to use as the “canvas” (ie. palette) background image. In this scenario, if the default 99 (pixels across and down) is still happening we open a new window with an incarnation of the webpage for that setting being 200 (pixels across and down). Codewise … a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis … helps out … a changed colouring_in_was_numbers_guessing_game.php PHP coded Colouring In Game you can also try for yourself, below … … helped with these improvements. Previous relevant Colouring In Drag and Drop Background Image Tutorial is shown below. So far it might have been hard for some users to visualize “colouring in” a blank canvas. As such, today, onto yesterday’s Colouring In Drag and

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

Colouring In Drag and Drop Background Image Tutorial

So far it might have been hard for some users to visualize “colouring in” a blank canvas. As such, today, onto yesterday’s Colouring In Drag and Drop Mobile Tutorial we’re now offering … ability to define a tabular background image via a browsed for image … or … ability to define a tabular background image via a user defined image URL … and add a new “opacity” setting … function torgba(inc, opa) { var i, j=0, csess=”rgba(:::1.0)”, alp=”0123456789abcdef”, factor=16; for (i=0; i<=inc.replace(‘#’,”).length; i++) { if (i == 1) { csess=csess.replace(‘rgba(:’,’rgba(‘ + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace(‘#’,”).substring(i,(i + 1)))) + ‘:’); j=0; } else if (i == 3) { csess=csess.replace(‘::’,’:’ + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace(‘#’,”).substring(i,(i + 1)))) + ‘:’); j=0; } else if (i == 5) { csess=csess.replace(‘::’,’:’ + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace(‘#’,”).substring(i,(i + 1)))) + ‘:’); j=0; } else { j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace(‘#’,”).substring(i,(i + 1)))); } csess = csess.replace(“:1.0)”,”:” + opa + “)”); } return csess.replace(/\:/g,’,’); } function opit(ijval) { if (document.getElementById(‘opmeter’)) { if (eval(1.00 – document.getElementById(‘opmeter’).value) != 0.00) { return torgba(ijval, document.getElementById(‘opmeter’).value); } } return ijval; } … all of which we can envisage could have users, at the very least, using this “Colouring In” web application for … a scribbling or doodling mechanism (on a blank canvas) colouring in via a background image with clip art linework, perhaps … create a postcard (type of creation) via a background image, perhaps browsed for (or using the Take Photo or Video option for mobile) on your device, and overlay some scribbled (or doodled) wording Codewise … a changed experimental_drag_and_drop.htm Experimental Drag and Drop clientside HTML and Javascript basis … helps out … a changed colouring_in_was_numbers_guessing_game.php PHP coded Colouring In Game you can also try for yourself, below … … helped with these mobile platform tweaks. We thank https://i.pinimg.com/736x/86/98/2d/86982d9ee1582bb7a4e730f11ebed3f4.jpg for the background image used (and fed into that image URL textbox to make happen) in today’s tutorial animated GIF presentation. Previous relevant Colouring In Drag and Drop Mobile Tutorial is shown below. Yesterday’s Colouring In Drag and Drop Sharing Tutorial sharing and collaboration code for our latest Colouring In web application was tested on our MacBook Air laptop only. As you can imagine, that can mean that code working there is not always going to work the same way on mobile touch devices, but it was not, as it panned out for us, regarding the reason we thought it would be about. We

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

Canvas Sharing via Email Hashtagging Mobile Tutorial

On mobile platforms, quite rightly, be wary of “programmed only click logic”. Along with controlling media playing, this mobile platform idea of needing a real user click to perform some Javascript logic, may be a reason something you have works on non-mobile platforms but not on mobile ones. Sure, as it pans out, we don’t believe it was the case here. With amendments to the recent Canvas Sharing via Email Hashtagging Tutorial‘s logic, we now think it was us launching a mailto: or sms: “a” link from within an iframe, which is not a great move. Using target=_top for this scenario. Take a look at some tweaks better fitting in with mobile usage of our “User of Signature Signature” web application … if (1 == 1) { if (1 == 1 && (” + parent.document.getElementById(‘jsemail’).value).indexOf(‘@’) != -1 && (” + document.getElementById(‘contentto’).value).indexOf(‘data:image’ + (‘/jpeg;base64,’).substring(0,1)) != -1) { azx=top.document.createElement(“a”); top.document.body.appendChild(azx); azx.style = “display: none”; azx.target = ‘_top’; azx.href = ‘mailto:’ + parent.document.getElementById(‘jsemail’).value.trim() + (‘?subject=’ + encodeURIComponent(document.getElementById(‘subject’).value)).replace(/subject\=$/g,’subject=My%20Canvas%20Creation’) + ‘&body=’ + encodeURIComponent(top.document.URL.split(‘?’)[0].split(‘#’)[0] + (‘?subject=’ + encodeURIComponent(document.getElementById(‘subject’).value)).replace(/subject\=$/g,’subject=My%20Canvas%20Creation’) + ‘#img=’ + encodeURIComponent(document.getElementById(‘contentto’).value)); azx.click(); } //else { document.getElementById(‘contentto’).value); setTimeout(function(){ document.getElementById(‘myform’).submit(); }, 10000); //} } else { document.getElementById(‘mysbut’).click(); } See this mobile platform improvement, in action, with the tweaked external Javascript signature_signature.js code used by our signature use in canvas supervisory web application. Previous relevant Canvas Sharing via Email Hashtagging Tutorial is shown below. We’re regular “tweakers” (for example, with Canvas via Image Web Share API Photo Postcard Tutorial) of what we call the … canvas … based … signatures … possible … scribble … or … discrete click … creating … annotation … friendly … … “graphics sharing” web application “User of Signature Signature”. And with us, more and more … decoupling our PHP mail sharing conduits … in favour of … “a” link “mailto:” email (and sometimes “sms:” SMS) communication conduits … now making use of … hashtagging … parts to URLs used … … because this methodology has fewer data limits, it being a “clientside” only (for the main part) means of sharing data. Today, we’re looking into this. Happily, for this work, “the lynchpin” is some “signature_signature.js” external Javascript, which is all that needs tweaking to make these changes. Previously, we’d relied, more, on “signature_signature.php” PHP, which oversaw our previous interfacing to the mail server up at the RJM Programming domain via the PHP mail function. Now, the user sends their own emails with

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

Event Calendar Collaboration Textarea Highlight Linking Tutorial

For the first time we can remember, with our Events in Month web application of yesterday’s Event Calendar Collaboration Remembering Recipient Tutorial … we’re channelling how in emails “word strings” starting with “http” become links … and so … in our event in month “blurb” textarea elements we allow user highlighted text containing such “http” “word strings” be opened in popup windows showing the content of those URLs, as available Here is the relevant Javascript we ended up with, for this … var thesel=”, showsel=false, lastsel=”; function showthesel() { var uwords=[], iuw=1, ils=0; if (showsel) { showsel=false; if (lastsel != thesel && thesel.toLowerCase().replace(‘https:’, ‘http:’).indexOf(‘http://’) >= 0) { lastsel=thesel; thesel=”; } if (lastsel != ” && thesel == ”) { uwords=lastsel.toLowerCase().split(‘http’); ils=eval(4 + eval(” + uwords[0].length)); for (iuw=1; iuw<uwords.length; iuw++) { window.open(‘//’ + lastsel.substring(ils).split(‘//’)[1].split(‘ ‘)[0].split(String.fromCharCode(10))[0].split(String.fromCharCode(13))[0], ‘_blank’, ‘top=’ + eval(10 * iuw + 50) + ‘,left=’ + eval(10 * iuw + 50) + ‘,width=600,height=600’); ils+=eval(4 + eval(” + uwords[iuw].length)); } } } } function handleSelection() { // thanks to https://stackoverflow.com/questions/46651479/reacting-to-selection-changes-in-an-html-textarea const activeElement = document.activeElement; // Make sure this is your textarea if (activeElement && activeElement.outerHTML.indexOf(‘<textarea’) == 0) { const range = { start: activeElement.selectionStart, end: activeElement.selectionEnd }; // Do something with your range if (eval(” + range.end) > eval(” + range.start)) { thesel=(activeElement.value.substring(range.start).substring(0, eval(eval(” + range.end) – eval(” + range.start) ))); if (!showsel && thesel.toLowerCase().replace(‘https:’, ‘http:’).indexOf(‘http://’) >= 0) { showsel=true; setTimeout(showthesel, 5000); } } } } document.addEventListener(‘selectionchange’, handleSelection); Also, today, we have a few CSS tweaks in the changed events_in_month.htm parent of the Events in Month web application. Feel free to try it for yourself. Stop Press Just briefly, delved into the wooooorrrrllllldddd of days of the week before 1582 debate … you had to be there … and in the words of Lleyton … Come on!!!! And we came out the other side. Good times! Anyway, thanks for all the interesting discussion, which we recommend you start at with this gem. Anyway, we now allow dates after 1582 (after this was previously set at 1970) in all respects and dates between 0000 and 1581 only via tweaks to the address bar URL you do yourself and we just hide the day of the week string. Otherwise … this could be needed?! Previous relevant Event Calendar Collaboration Remembering Recipient Tutorial is shown below. When doing our inhouse testing for Event Calendar Collaboration Tutorial the other day, it got us “peeved”, shall we

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

Event Calendar Collaboration Remembering Recipient Tutorial

When doing our inhouse testing for Event Calendar Collaboration Tutorial the other day, it got us “peeved”, shall we say. We wanted a mechanism, with those “a” link “mailto:” emailing arrangements, of not having to fill out the email address in the “To:” field each time. First world problem alert! Still and all … When it comes to procedures … Aaaaaarrrrgggghhhh … Nuances count … regarding … Errrrrrr … Saving time … Saving frustration … resulting in the “easy to remember” acronym WANESS … we rest our cases! What can help here? Well, it is a personalization … so … anyone, anyone? Yes, Lou, back from holidays, a month late … yes, well, okay … we can see you’ve put some thought into this … HTTP Cookies could be used. Yes, Shwetank, you’ve had your hand up some time now. We agree, Web Storage window.localStorage allows for more data, so we’ll go with that, though either style of approach would work here. Global variables initialization … var defemail=”, defsms=”; if ((” + window.localStorage.getItem(‘eventcollaboratoremailee’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { defemail=window.localStorage.getItem(‘eventcollaboratoremailee’); } if ((” + window.localStorage.getItem(‘eventcollaboratorsmsno’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { defsms=window.localStorage.removeItem(‘eventcollaboratorsmsno’); } Within document.body onload event logic … if (document.getElementById(‘semail’) && document.getElementById(‘ssms’)) { document.getElementById(‘semail’).oncontextmenu=function(){ emailaskit(); }; document.getElementById(‘semail’).ontouchmove=function(){ emailaskit(); }; document.getElementById(‘ssms’).oncontextmenu=function(){ smsaskit(); }; document.getElementById(‘ssms’).ontouchmove=function(){ smsaskit(); }; if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { document.getElementById(‘semail’).title+=’ Move gesture here can ask for new default remembered email address for collaboration purposes’; document.getElementById(‘ssms’).title+=’ Move gesture here can ask for new default remembered SMS number for collaboration purposes’; } else { document.getElementById(‘semail’).title+=’ Right click here can ask for new default remembered email address for collaboration purposes’; document.getElementById(‘ssms’).title+=’ Right click here can ask for new default remembered SMS number for collaboration purposes’; } } Calling these two Javascript function helpers … function emailaskit() { if (defemail == defemail.trim()) { defemail=defemail.trim() + ‘ ‘; var emailm=prompt(‘Enter default email address.’, defemail.trim()); if (emailm == null) { emailm=”; } if (emailm.trim() != ” && emailm.trim().indexOf(‘@’) != -1) { defemail=emailm.trim() + ‘ ‘; if ((” + window.localStorage.getItem(‘eventcollaboratoremailee’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { defemail=window.localStorage.removeItem(‘eventcollaboratoremailee’); } window.localStorage.setItem(‘eventcollaboratoremailee’, emailm.trim()); } } defemail=defemail.trim() + ‘ ‘; } function smsaskit() { if (defsms == defsms.trim()) { defsms=defsms.trim() + ‘ ‘; var smsm=prompt(‘Enter default SMS number.’, defsms.trim()); if (smsm == null) { smsm=”; } if (smsm.trim() != ” && smsm.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() == ”) { defsms=smsm.trim() + ‘ ‘; if ((” + window.localStorage.getItem(‘eventcollaboratorsmsno’)).replace(/^null/g,”).replace(/^undefined/g,”) != ”) { window.localStorage.removeItem(‘eventcollaboratorsmsno’); } window.localStorage.setItem(‘eventcollaboratorsmsno’, smsm.trim()); } } defsms=defsms.trim() + ‘ ‘; } And allow

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

Canvas Sharing via Email Hashtagging Tutorial

We’re regular “tweakers” (for example, with Canvas via Image Web Share API Photo Postcard Tutorial) of what we call the … canvas … based … signatures … possible … scribble … or … discrete click … creating … annotation … friendly … … “graphics sharing” web application “User of Signature Signature”. And with us, more and more … decoupling our PHP mail sharing conduits … in favour of … “a” link “mailto:” email (and sometimes “sms:” SMS) communication conduits … now making use of … hashtagging … parts to URLs used … … because this methodology has fewer data limits, it being a “clientside” only (for the main part) means of sharing data. Today, we’re looking into this. Happily, for this work, “the lynchpin” is some “signature_signature.js” external Javascript, which is all that needs tweaking to make these changes. Previously, we’d relied, more, on “signature_signature.php” PHP, which oversaw our previous interfacing to the mail server up at the RJM Programming domain via the PHP mail function. Now, the user sends their own emails with their own email client software, and emails contain one long body URL string where … canvas … element’s … [canvasElement].toDataURL(‘image/jpeg’, 0.7) … means by which a … data URI representation of the graphical data … can be hashtagged into that long body URL string. If the email recipient clicks this link, our external Javascript … Reads such incoming data via location.hash … var azx=null, wowowo=null; var imgbih=(” + (” + location.hash).replace(/^null/g,”).replace(/^undefined/g,”)).split(‘img=’)[1] ? (decodeURIComponent((” + location.hash).replace(/^null/g,”).replace(/^undefined/g,”)).split(‘img=’)[1].split(‘&’)[0]).replace(/\ /g,’+’) : ”; var passedsubject=location.search.split(‘subject=’)[1] ? decodeURIComponent(location.search.split(‘subject=’)[1].split(‘&’)[0]) : ”; And loaded into canvas and new window … setTimeout(function(){ if (imgbih != ”) { //alert(imgbih); if (top.document.getElementById(‘topcanvas’)) { var xanimg=document.createElement(‘img’); xanimg.onload=function() { var tc=top.document.getElementById(‘topcanvas’).getContext(‘2d’); tc.drawImage(xanimg, 0, 0); }; xanimg.src=imgbih; } var wowowo=window.open(”,’_blank’,’top=100,left=100,width=800,height=800′); wowowo.document.write(‘<html><body style=”background:URL(‘ + “‘” + imgbih + “‘” + ‘);background-repeat:no-repeat;”></body></html>’); imgbih=”; if (passedsubject != ”) { wowowo.document.title=” + passedsubject; } } }, 5000); Before submitting form method=POST to signature_signature.php check out form fields … if ((” + document.getElementById(’emailto’).value).indexOf(‘@’) != -1 && (” + document.getElementById(‘contentto’).value).indexOf(‘data:image/jpeg;base64,’) != -1) { azx=document.createElement(“a”); document.body.appendChild(azx); azx.style = “display: none”; azx.href = ‘mailto:’ + document.getElementById(’emailto’).value + (‘?subject=’ + encodeURIComponent(document.getElementById(‘subject’).value)).replace(/subject\=$/g,’subject=My%20Canvas%20Creation’) + ‘&body=’ + encodeURIComponent(top.document.URL.split(‘?’)[0].split(‘#’)[0] + (‘?subject=’ + encodeURIComponent(document.getElementById(‘subject’).value)).replace(/subject\=$/g,’subject=My%20Canvas%20Creation’) + ‘#img=’ + encodeURIComponent(document.getElementById(‘contentto’).value)); azx.click(); } else { document.getElementById(‘myform’).submit(); } … to enact fairly simple changes for more stable sharing and collaboration arrangements via a tweaked external Javascript signature_signature.js code used by our signature use in canvas supervisory web application.

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