Walking Trip …

Walking Trip

Walking Trip

Offenbach's Suite ... Warts 'n All

Offenbach's Suite ... Warts 'n All

If this was interesting you may be interested in this too.

Posted in Photography, Trips | Tagged , , | 34 Comments

HTML CSV Report Validation via Client Input or Regular Expression Tutorial

HTML CSV Report Validation via Client Input or Regular Expression Tutorial

HTML CSV Report Validation via Client Input or Regular Expression Tutorial

There are as many ways to present data as there are stars in the sky, we venture, but some make so much more sense than others in terms of …

  • how the data comes to you
  • what you want to use the data for in an ongoing sense
  • what is shareable
  • what is tailorable and/or editable and/or transportable
  • what is simple to understand and use
  • what suits the style of thinking of the parties involved

… and as far as yesterday’s HTML Worded Validation via Client Input or Regular Expression Tutorial tabled data goes, we have spreadsheet thoughts, and adding to that thoughts about simplicity we decide to add …


Export CSV

… thoughts, where CSV stands for Comma Separated Values data.

Functionality thoughts for us were, in broadbrush terms …

  • work it via a button with onclick event logic (the Javascript function of which you can see below)
  • look for headings (in a CSV header record) via document.getElementsByTagName(‘th’) innerHTML data
  • look for row data (in a CSV row record) via document.getElementsByTagName(‘input’) value data
  • present left hand HTML input type= attribute as a left hand CSV data set and the right hand Regex as a right hand CSV data
  • that data either being derived from [inputElement].value (when not erroneous) or [inputElement].placeholder (sometimes where erroneous) … a report presented …
  • in a table with one row and two report data column cells we present the data as per the code …

    function csvize() {
    var zero=0, iz=0;
    var csvdatas=['', ''];
    var csvdelims=['', ''];
    var ths=document.getElementsByTagName('th');
    var tds=document.getElementsByTagName('input');
    for (iz=0; iz<ths.length; iz+=2) {
    csvdatas[zero]+=csvdelims[zero] + '"' + ths[iz].innerHTML + '"';
    csvdelims[zero]=',';
    zero=eval(1 - zero);
    csvdatas[zero]+=csvdelims[zero] + '"' + ths[iz].innerHTML + ' ' + ths[eval(1 + eval('' + iz))].innerHTML + '"';
    csvdelims[zero]=',';
    zero=eval(1 - zero);
    }
    csvdatas[0]+=String.fromCharCode(10);
    csvdatas[1]+=String.fromCharCode(10);
    csvdelims=['', ''];
    for (iz=0; iz<ths.length; iz+=2) {
    if (tds[iz].value == '' && tds[iz].placeholder.indexOf(iai) != -1) {
    csvdatas[zero]+=csvdelims[zero] + '"' + tds[iz].placeholder + '"';
    } else {
    csvdatas[zero]+=csvdelims[zero] + '"' + tds[iz].value + '"';
    }
    csvdelims[zero]=',';
    zero=eval(1 - zero);
    if (tds[eval(1 + eval('' + iz))].value == '' && tds[eval(1 + eval('' + iz))].placeholder.indexOf(iai) != -1) {
    csvdatas[zero]+=csvdelims[zero] + '"' + tds[eval(1 + eval('' + iz))].placeholder + '"';
    } else {
    csvdatas[zero]+=csvdelims[zero] + '"' + tds[eval(1 + eval('' + iz))].value + '"';
    }
    csvdelims[zero]=',';
    zero=eval(1 - zero);
    }
    csvdatas[0]+=String.fromCharCode(10);
    csvdatas[1]+=String.fromCharCode(10);
    document.getElementById('tbcsv').innerHTML='<tr><td style=width:50%;><textarea rows=2 cols=115 id=tacsv1 style=width:100%;></textarea></td><td style=width:50%;><textarea rows=2 cols=115 id=tacsv2 style=width:100%;></textarea></td></tr>';
    document.getElementById('tacsv1').innerHTML=csvdatas[0];
    document.getElementById('tacsv2').innerHTML=csvdatas[1];
    document.getElementById('tcsv').style.display='block';
    }

See this work as per the changed email_validation.htm‘s live run link.


Previous relevant HTML Worded Validation via Client Input or Regular Expression Tutorial is shown below.

HTML Worded Validation via Client Input or Regular Expression Tutorial

HTML Worded Validation via Client Input or Regular Expression Tutorial

It’s not, at least for us, a trivial issue to add wording in addition to yesterday’s HTML Validation via Client Input or Regular Expression Tutorial red dashed bordering flagging invalid entries regarding …

  • email
  • telephone number
  • url
  • number

… for those two modes of validation being …

  • tailored HTML input type= attribute element types that came in with HTML5 … versus …
  • HTML input type=text combined via Javascript client regex matching

We wanted to add wording to ram the message home a bit better, a thought you may want to investigate yourself for mission critical information.

Would it surprise you to learn that the event driven programming code methods for the two modes above are very different? The former mode needs CSS styling :invalid selector changes that later can be detected back at Javascript (though you may want to research jQuery CSS functionalities) and though we experimented with the :after selector and the content: attribute unsuccessfully we succeeded with


#iemail:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#iemail:invalid:after {
content: ' is an invalid email address';
}

… combined with Javascript …


var emailr=null;

// at document.body onload below ...
if (emailr == null) { emailr=document.getElementById('iemail').getBoundingClientRect(); }

function chkemail() {
if (iai == '') { iai=' is an invalid '; }
if (document.getElementById('iemail').value.indexOf(iai) == 0) {
document.getElementById('iemail').value=document.getElementById('iemail').value.replace(iai, document.getElementById('iemail').placeholder + iai);
} else if (('' + document.getElementById('iemail').style.border).indexOf(' dashed ') != -1) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
} else if (emailr != null) {
var vsemailr=document.getElementById('iemail').getBoundingClientRect();
if (vsemailr.width != emailr.width) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
document.getElementById('iemail').style.maxWidth=emailr.width; //'100%';
}
}
else if (emailp != '') {
document.getElementById('iemail').placeholder=emailp;
}
}

… as well as keyboard event logics collecting into this.placeholder the characters the user enters.

Would it surprise you to learn that the event driven programming code methods for the HTML5 input type=number within that first mode needs different validation tactics to the others within that first mode above? The reason for this is that HTML5 uses keypress limiting ideas with this input type=number type of element and we have to work “around the sides” of that (as in “as well as keyboard event logics collecting into this.placeholder the characters the user enters”).

Central to Javascript logic here is settling on a phrase to look for, ours being ” is an invalid ” that you can see in play with the changed email_validation.htm‘s live run link.


Previous relevant HTML Validation via Client Input or Regular Expression Tutorial is shown below.

HTML Validation via Client Input or Regular Expression Tutorial

HTML Validation via Client Input or Regular Expression Tutorial

Our attitude to validation is “to get in there early”, so no matter how effective the recent PHP Form Validation via Filter Regular Expression Tutorial is with its data validation, this serverside validation can’t beat client validation you do right at the …

  • onkeydown and onkeypress
  • onblur

… (optional) event logics associated with HTML input elements. With HTML5 came several input tag type= attribute validators …

HTML5 input tag type= attribute Client Validation Methods (can combine with pattern= attribute)
email CSS selector styling eg. <style> #iemail:invalid { border: 2px dashed red; } #iemail:valid { border: 2px solid black; } </style>
tel pattern=’^[0-9-+s()]*$’ and CSS selector styling eg. <style> #iipn:invalid { border: 2px dashed red; } #iipn:valid { border: 2px solid black; } </style>
url CSS selector styling eg. <style> #iurl:invalid { border: 2px dashed red; } #iurl:valid { border: 2px solid black; } </style>
number Self validates

… versus HTML input type=text combined with regex expression matching … as for telephone number …

function huhipn(inw) {
var isok=false;
if (inw.value != '') {
// Thanks to https://www.w3resource.com/javascript/form/phone-no-validation.php
isok=inw.value.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) || inw.value.match(/^\d{10}$/) || inw.value.match(/^\d{11}$/);
if (!isok) {
inw.style.border='2px dashed red';
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

… called off those aforesaid mentioned events.

You can try email_validation.html‘s live run link to see what we mean.


Previous relevant PHP Form Validation via Filter Regular Expression Tutorial is shown below.

PHP Form Validation via Filter Regular Expression Tutorial

PHP Form Validation via Filter Regular Expression Tutorial

With the recent PHP Form Validation via Filter Extension Tutorial we avoided “the elephant in the room” that being the use of regular expressions. No, Nala, not 😀 or even 🤪 but the definition of a date data item (or can be a PHP object) via …

So what is it about dates that suit regular expressions? It’s that there are so many ways to express a Date (or DateTime) in user entry land (as a “timestamp format” entry) and a regular expression set aside for some of those timestamp formats that we can think that a user may think of, could be the go to start down this road of discovery. Behind the scenes we also arrange for an equivalent PHP “timestamp format” equivalent to be sent by the HTML form controlling all this so that we can have a two phase date validation process that …

  • first passes the user entry through a PHP Filter extension‘s FILTER_VALIDATE_REGEXP examination, but there being no “integer range” constraint mechanism here, you could enter a value such as “2019-02-29″ and it is fairly obvious what you mean with this Year-Month-Date entry, but it passes this first pass of validation (there being no “integer range” constraint mechanism) when it shouldn’t (curiously PHP date_create_from_format(string $format , “2019-02-29″) will return a date object that is dated “2019-03-01″ such is its desire to please but we do a sanity check for this “empathy overshoot” in our code), and so we need a ….
  • second pass creates a PHP date object using that equivalent PHP “timestamp format” equivalent (that we separately and additionally scrutinize for that “empathy overshoot” issue as explained above)

… and if successful with both passes above the user entered date information passes our validation processing to go on and win that elusive cigar?!


Previous relevant PHP Form Validation via Filter Extension Tutorial is shown below.

PHP Form Validation via Filter Extension Tutorial

PHP Form Validation via Filter Extension Tutorial

Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …


echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …

  • onsubmit event Javascript client logic … but today we go exploring …
  • callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
    $var=filter_var($prevar, );

You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.

If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.


Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.

HTML5 Form API Validation Primer Tutorial

HTML5 Form API Validation Primer Tutorial

HTML5 is more than just the “5” tagged on. Take a look at this list of API related parts to the HTML5 specification.

As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.

The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.

The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.

You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

HTML Worded Validation via Client Input or Regular Expression Tutorial

HTML Worded Validation via Client Input or Regular Expression Tutorial

HTML Worded Validation via Client Input or Regular Expression Tutorial

It’s not, at least for us, a trivial issue to add wording in addition to yesterday’s HTML Validation via Client Input or Regular Expression Tutorial red dashed bordering flagging invalid entries regarding …

  • email
  • telephone number
  • url
  • number

… for those two modes of validation being …

  • tailored HTML input type= attribute element types that came in with HTML5 … versus …
  • HTML input type=text combined via Javascript client regex matching

We wanted to add wording to ram the message home a bit better, a thought you may want to investigate yourself for mission critical information.

Would it surprise you to learn that the event driven programming code methods for the two modes above are very different? The former mode needs CSS styling :invalid selector changes that later can be detected back at Javascript (though you may want to research jQuery CSS functionalities) and though we experimented with the :after selector and the content: attribute unsuccessfully we succeeded with


#iemail:invalid {
border: 2px dashed red;
max-width: calc(100% - 5px);
}

#iemail:invalid:after {
content: ' is an invalid email address';
}

… combined with Javascript …


var emailr=null;

// at document.body onload below ...
if (emailr == null) { emailr=document.getElementById('iemail').getBoundingClientRect(); }

function chkemail() {
if (iai == '') { iai=' is an invalid '; }
if (document.getElementById('iemail').value.indexOf(iai) == 0) {
document.getElementById('iemail').value=document.getElementById('iemail').value.replace(iai, document.getElementById('iemail').placeholder + iai);
} else if (('' + document.getElementById('iemail').style.border).indexOf(' dashed ') != -1) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
} else if (emailr != null) {
var vsemailr=document.getElementById('iemail').getBoundingClientRect();
if (vsemailr.width != emailr.width) {
document.getElementById('iemail').value=document.getElementById('iemail').placeholder + iai + 'email address';
document.getElementById('iemail').style.maxWidth=emailr.width; //'100%';
}
}
else if (emailp != '') {
document.getElementById('iemail').placeholder=emailp;
}
}

… as well as keyboard event logics collecting into this.placeholder the characters the user enters.

Would it surprise you to learn that the event driven programming code methods for the HTML5 input type=number within that first mode needs different validation tactics to the others within that first mode above? The reason for this is that HTML5 uses keypress limiting ideas with this input type=number type of element and we have to work “around the sides” of that (as in “as well as keyboard event logics collecting into this.placeholder the characters the user enters”).

Central to Javascript logic here is settling on a phrase to look for, ours being ” is an invalid ” that you can see in play with the changed email_validation.htm‘s live run link.


Previous relevant HTML Validation via Client Input or Regular Expression Tutorial is shown below.

HTML Validation via Client Input or Regular Expression Tutorial

HTML Validation via Client Input or Regular Expression Tutorial

Our attitude to validation is “to get in there early”, so no matter how effective the recent PHP Form Validation via Filter Regular Expression Tutorial is with its data validation, this serverside validation can’t beat client validation you do right at the …

  • onkeydown and onkeypress
  • onblur

… (optional) event logics associated with HTML input elements. With HTML5 came several input tag type= attribute validators …

HTML5 input tag type= attribute Client Validation Methods (can combine with pattern= attribute)
email CSS selector styling eg. <style> #iemail:invalid { border: 2px dashed red; } #iemail:valid { border: 2px solid black; } </style>
tel pattern=’^[0-9-+s()]*$’ and CSS selector styling eg. <style> #iipn:invalid { border: 2px dashed red; } #iipn:valid { border: 2px solid black; } </style>
url CSS selector styling eg. <style> #iurl:invalid { border: 2px dashed red; } #iurl:valid { border: 2px solid black; } </style>
number Self validates

… versus HTML input type=text combined with regex expression matching … as for telephone number …

function huhipn(inw) {
var isok=false;
if (inw.value != '') {
// Thanks to https://www.w3resource.com/javascript/form/phone-no-validation.php
isok=inw.value.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) || inw.value.match(/^\d{10}$/) || inw.value.match(/^\d{11}$/);
if (!isok) {
inw.style.border='2px dashed red';
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

… called off those aforesaid mentioned events.

You can try email_validation.html‘s live run link to see what we mean.


Previous relevant PHP Form Validation via Filter Regular Expression Tutorial is shown below.

PHP Form Validation via Filter Regular Expression Tutorial

PHP Form Validation via Filter Regular Expression Tutorial

With the recent PHP Form Validation via Filter Extension Tutorial we avoided “the elephant in the room” that being the use of regular expressions. No, Nala, not 😀 or even 🤪 but the definition of a date data item (or can be a PHP object) via …

So what is it about dates that suit regular expressions? It’s that there are so many ways to express a Date (or DateTime) in user entry land (as a “timestamp format” entry) and a regular expression set aside for some of those timestamp formats that we can think that a user may think of, could be the go to start down this road of discovery. Behind the scenes we also arrange for an equivalent PHP “timestamp format” equivalent to be sent by the HTML form controlling all this so that we can have a two phase date validation process that …

  • first passes the user entry through a PHP Filter extension‘s FILTER_VALIDATE_REGEXP examination, but there being no “integer range” constraint mechanism here, you could enter a value such as “2019-02-29″ and it is fairly obvious what you mean with this Year-Month-Date entry, but it passes this first pass of validation (there being no “integer range” constraint mechanism) when it shouldn’t (curiously PHP date_create_from_format(string $format , “2019-02-29″) will return a date object that is dated “2019-03-01″ such is its desire to please but we do a sanity check for this “empathy overshoot” in our code), and so we need a ….
  • second pass creates a PHP date object using that equivalent PHP “timestamp format” equivalent (that we separately and additionally scrutinize for that “empathy overshoot” issue as explained above)

… and if successful with both passes above the user entered date information passes our validation processing to go on and win that elusive cigar?!


Previous relevant PHP Form Validation via Filter Extension Tutorial is shown below.

PHP Form Validation via Filter Extension Tutorial

PHP Form Validation via Filter Extension Tutorial

Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …


echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …

  • onsubmit event Javascript client logic … but today we go exploring …
  • callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
    $var=filter_var($prevar, );

You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.

If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.


Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.

HTML5 Form API Validation Primer Tutorial

HTML5 Form API Validation Primer Tutorial

HTML5 is more than just the “5” tagged on. Take a look at this list of API related parts to the HTML5 specification.

As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.

The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.

The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.

You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

HTML Validation via Client Input or Regular Expression Tutorial

HTML Validation via Client Input or Regular Expression Tutorial

HTML Validation via Client Input or Regular Expression Tutorial

Our attitude to validation is “to get in there early”, so no matter how effective the recent PHP Form Validation via Filter Regular Expression Tutorial is with its data validation, this serverside validation can’t beat client validation you do right at the …

  • onkeydown and onkeypress
  • onblur

… (optional) event logics associated with HTML input elements. With HTML5 came several input tag type= attribute validators …

HTML5 input tag type= attribute Client Validation Methods (can combine with pattern= attribute)
email CSS selector styling eg. <style> #iemail:invalid { border: 2px dashed red; } #iemail:valid { border: 2px solid black; } </style>
tel pattern=’^[0-9-+s()]*$’ and CSS selector styling eg. <style> #iipn:invalid { border: 2px dashed red; } #iipn:valid { border: 2px solid black; } </style>
url CSS selector styling eg. <style> #iurl:invalid { border: 2px dashed red; } #iurl:valid { border: 2px solid black; } </style>
number Self validates

… versus HTML input type=text combined with regex expression matching … as for telephone number …

function huhipn(inw) {
var isok=false;
if (inw.value != '') {
// Thanks to https://www.w3resource.com/javascript/form/phone-no-validation.php
isok=inw.value.match(/^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/) || inw.value.match(/^\d{10}$/) || inw.value.match(/^\d{11}$/);
if (!isok) {
inw.style.border='2px dashed red';
} else {
inw.style.border='2px solid black';
}
} else {
inw.style.border='2px solid black';
}
return isok;
}

… called off those aforesaid mentioned events.

You can try email_validation.html‘s live run link to see what we mean.


Previous relevant PHP Form Validation via Filter Regular Expression Tutorial is shown below.

PHP Form Validation via Filter Regular Expression Tutorial

PHP Form Validation via Filter Regular Expression Tutorial

With the recent PHP Form Validation via Filter Extension Tutorial we avoided “the elephant in the room” that being the use of regular expressions. No, Nala, not 😀 or even 🤪 but the definition of a date data item (or can be a PHP object) via …

So what is it about dates that suit regular expressions? It’s that there are so many ways to express a Date (or DateTime) in user entry land (as a “timestamp format” entry) and a regular expression set aside for some of those timestamp formats that we can think that a user may think of, could be the go to start down this road of discovery. Behind the scenes we also arrange for an equivalent PHP “timestamp format” equivalent to be sent by the HTML form controlling all this so that we can have a two phase date validation process that …

  • first passes the user entry through a PHP Filter extension‘s FILTER_VALIDATE_REGEXP examination, but there being no “integer range” constraint mechanism here, you could enter a value such as “2019-02-29″ and it is fairly obvious what you mean with this Year-Month-Date entry, but it passes this first pass of validation (there being no “integer range” constraint mechanism) when it shouldn’t (curiously PHP date_create_from_format(string $format , “2019-02-29″) will return a date object that is dated “2019-03-01″ such is its desire to please but we do a sanity check for this “empathy overshoot” in our code), and so we need a ….
  • second pass creates a PHP date object using that equivalent PHP “timestamp format” equivalent (that we separately and additionally scrutinize for that “empathy overshoot” issue as explained above)

… and if successful with both passes above the user entered date information passes our validation processing to go on and win that elusive cigar?!


Previous relevant PHP Form Validation via Filter Extension Tutorial is shown below.

PHP Form Validation via Filter Extension Tutorial

PHP Form Validation via Filter Extension Tutorial

Our recent Javascript and PHP Base64 Primer Tutorial with its Base64 thoughts, the …


echo "<textarea id=tb64 cols=100 rows=10>" . base64_decode(urldecode($_POST['base64'])) . "</textarea><br>";

… of which we adopt for today’s PHP code, set our minds towards HTML form thoughts and HTML form validation thoughts. The most immediate validation thought on an HTML form is probably …

  • onsubmit event Javascript client logic … but today we go exploring …
  • callback PHP serverside logic via the PHP Filter extension functionalities in the pattern …
    $var=filter_var($prevar, );

You will see on examination of our proof of concept PHP filter_ideas.php code how these PHP Filter Extensions can be used for validation purposes (with a more extensive list here), and you could try it out for yourself at this live run link.

If form validation interests you, perhaps a read of HTML5 Form API Validation Primer Tutorial below is in order.


Previous relevant HTML5 Form API Validation Primer Tutorial is shown below.

HTML5 Form API Validation Primer Tutorial

HTML5 Form API Validation Primer Tutorial

HTML5 is more than just the “5” tagged on. Take a look at this list of API related parts to the HTML5 specification.

As you may have gleaned from our recent HTML Input Element Types Randomized History Tutorial a lot of new HTML input elements were added with the view to improving the capabilities of HTML form elements for collecting information from users interactively. Along with that, as you might expect, validation methodologies were improved, as any programmer would tell you, can be one of the most challenging “practical element” of web design to do well to not involve user error, or “user giving up”.

The HTML5 form API has great “Constraint Validation”, not all new to HTML, but vastly improved and extended, as you can read a lot about at this really great webpage, thanks.

The HTML input attribute we find of great practical benefit with all this is the pattern attribute to define a constraint, in the same sort of vein as a RegEx expressions helps you perform pattern-matching and “search and replace” functions on text. This would be great use for organizations that work with “codes” or “Part Numbers” or SKU (stock keeping units) that follow a consistent pattern.

You can try some simple Constraint Validation at today’s live run link with its underlying serverside PHP code you could call html5_form_constraint_validation.html as you wish.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Workplace Concepts Game Horizontal Rule Reveal Tutorial

Workplace Concepts Game Horizontal Rule Reveal Tutorial

Workplace Concepts Game Horizontal Rule Reveal Tutorial

Today we want to add a “reveal” feel to the previous Workplace Concepts Game Horizontal Rule Cell Tutorial.

Our favourite “reveal” element combination is the team of details tag and its nested summary tag partner. The great thing about these two new HTML5 inclusions (which don’t work with InternetExplorer nor Microsoft Edge) are a great means to “reveal” optional functionality. For today’s work, that is to include in an HTML iframe element a pointing to a YouTube Video search (using the YouTube video via its Embedded Iframe API) interface.

It can even be that our Horizontal Rule element alignment is not ruined if the user closes details tags before clicking the yellow button.

Here is the changed workplace_concepts.htm‘s Workplace Concepts Game for you to try this out for yourself.


Previous relevant Workplace Concepts Game Horizontal Rule Cell Tutorial is shown below.

Workplace Concepts Game Horizontal Rule Cell Tutorial

Workplace Concepts Game Horizontal Rule Cell Tutorial

Yesterday’s Workplace Concepts Game Primer Tutorial used …

  • an HTML table … with …
  • one static row of 4 column “header cells” … and … one static Next button row … and …
  • one dynamic row of 4 column “data cells” updated with our Workplace Concept user controlled information

… a turn in a game (user) “go” separated by 4 “data cell” positioned “Horizontal Rule” (hr) elements.

The trouble with this insistence on the one dynamic row of 4 column “data cells” is that unless the programmer is careful the Horizontal Rules will be ragged in their “top” positioning. This scenario remains the “Ragged Horizontal Rules can Happen” of the …

  • New Table Row
  • Blank Lines before Horizontal Rules across All Columns
  • Ragged Horizontal Rules can Happen
  • Margin Top to Horizontal Rules
  • Light Green Padding Top to Horizontal Rules
  • Absolutely Positioning Invisible Horizontal Rules
  • Absolutely Positioning Visible Horizontal Rules

… set of new “separation of go” methodologies we have for you to try in today’s incarnation of the changed workplace_concepts.htm‘s Workplace Concepts Game.

All bar that “New Table Row” methodology perseveres with one dynamic row of 4 column “data cells” thoughts. Of course, this “new row” idea may seem the more obvious way to go, but the slightly less imposing Horizontal Rule element has always been a favourite of mine, and can still be worked not to have that annoying raggedness in that variety of ideas of the list above … as per …

  • New Table Row … loses (hr) raggedness with a new row created each go
  • Blank Lines before Horizontal Rules across All Columns … loses (hr) raggedness with equal numbers of content lines (as necessary just &nbsp;) added for each column before any Horizontal Rule placement each go
  • Ragged Horizontal Rules can Happen
  • Margin Top to Horizontal Rules … loses (hr) raggedness with a margin-top is given to the Horizontal Rules too high up the webpage to bring them back in line each go
  • Light Green Padding Top to Horizontal Rules … loses (hr) raggedness with a padding-top is given to the Horizontal Rules too high up the webpage to bring them back in line each go
  • Absolutely Positioning Invisible Horizontal Rules … loses (hr) raggedness with the Horizontal Rules initially not placed in the table but appended to a separate div in the webpage then the Horizontal Rules are position:absolute left:[like the left of its “data cell” top:[the biggest “data cell” bottom co-ordinate] width:[undefined and so is zero]
  • Absolutely Positioning Visible Horizontal Rules … loses (hr) raggedness with the Horizontal Rules initially not placed in the table but appended to a separate div in the webpage then the Horizontal Rules are position:absolute left:[like the left of its “data cell” top:[the biggest “data cell” bottom co-ordinate] width:[“data cell” width] opacity:0.2 z-index:-1 marginTop:-25px

Feel free to try any/all these new ideas below …

You can also see this play out at WordPress 4.1.1’s Workplace Concepts Game Primer Tutorial.


Previous relevant Workplace Concepts Game Horizontal Rule Cell Tutorial is shown below.

Workplace Concepts Game Primer Tutorial

Workplace Concepts Game Primer Tutorial

Here’s a new web application project. Content wise we take …

  • a workplace concept …
  • link that concept to one or more categories namely “rights”, “responsibilities”, “ethical”, “unethical” …
  • organized into a single dimension array with semicolon and plus sign delimitation … in order to create …
  • a web application game where the user presses buttons to categorize workplace concepts

As you might imagine one person’s categorize can overlap and confuse for another person, but that is another matter.

We organize the categories “rights”, “responsibilities”, “ethical”, “unethical” into HTML table heading (th) elements with associated (ie id is same as category name) non-header row cell (td) elements that get appended to by the user answers.

New today was an idea we had to separate answer groups by td cells receiving a new hr (horizontal rule) element, but we want to improve that look (that gets ragged) over time.

Why not try the workplace_concepts.html‘s live run link to see what we mean.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

PHP Cookies Navigation Primer Tutorial

PHP Cookies Navigation Primer Tutorial

PHP Cookies Navigation Primer Tutorial

Today’s tutorial is a bit “against the grain” for how we normally think, as far as navigation in web applications, goes. For us, that is because …

  • Instead of our usual $_GET (ie. equating to ? and & web address bar URL parts) and $_POST (or even $_FILE uploads) we consider the use of serverside (PHP) cookies via use of $_COOKIE
  • Instead of our usual clientside HTTP Cookie (along with Javascript) code today we use PHP serverside cookie code via setcookie usages for parent updates of a “receiving” child piece of PHP within the parent’s HTML iframe element, the URL of which remains the same, navigated to by parent PHP calling itself to prompt cookie updates and HTML iframe redisplays

As well as that new tab live run access method for sender_of_cookie.php parent’s supervision of receiver_of_cookie.php child (within HTML iframe element) navigation, there is nothing wrong with the parent being an iframe itself as per the access method below …

Did you know?

The PHP $_REQUEST is like a superglobal associative array that consists of …

  • $_GET
  • $_POST
  • $_COOKIE

If this was interesting you may be interested in this too.

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

Workplace Concepts Game Horizontal Rule Cell Tutorial

Workplace Concepts Game Horizontal Rule Cell Tutorial

Workplace Concepts Game Horizontal Rule Cell Tutorial

Yesterday’s Workplace Concepts Game Primer Tutorial used …

  • an HTML table … with …
  • one static row of 4 column “header cells” … and … one static Next button row … and …
  • one dynamic row of 4 column “data cells” updated with our Workplace Concept user controlled information

… a turn in a game (user) “go” separated by 4 “data cell” positioned “Horizontal Rule” (hr) elements.

The trouble with this insistence on the one dynamic row of 4 column “data cells” is that unless the programmer is careful the Horizontal Rules will be ragged in their “top” positioning. This scenario remains the “Ragged Horizontal Rules can Happen” of the …

  • New Table Row
  • Blank Lines before Horizontal Rules across All Columns
  • Ragged Horizontal Rules can Happen
  • Margin Top to Horizontal Rules
  • Light Green Padding Top to Horizontal Rules
  • Absolutely Positioning Invisible Horizontal Rules
  • Absolutely Positioning Visible Horizontal Rules

… set of new “separation of go” methodologies we have for you to try in today’s incarnation of the changed workplace_concepts.htm‘s Workplace Concepts Game.

All bar that “New Table Row” methodology perseveres with one dynamic row of 4 column “data cells” thoughts. Of course, this “new row” idea may seem the more obvious way to go, but the slightly less imposing Horizontal Rule element has always been a favourite of mine, and can still be worked not to have that annoying raggedness in that variety of ideas of the list above … as per …

  • New Table Row … loses (hr) raggedness with a new row created each go
  • Blank Lines before Horizontal Rules across All Columns … loses (hr) raggedness with equal numbers of content lines (as necessary just &nbsp;) added for each column before any Horizontal Rule placement each go
  • Ragged Horizontal Rules can Happen
  • Margin Top to Horizontal Rules … loses (hr) raggedness with a margin-top is given to the Horizontal Rules too high up the webpage to bring them back in line each go
  • Light Green Padding Top to Horizontal Rules … loses (hr) raggedness with a padding-top is given to the Horizontal Rules too high up the webpage to bring them back in line each go
  • Absolutely Positioning Invisible Horizontal Rules … loses (hr) raggedness with the Horizontal Rules initially not placed in the table but appended to a separate div in the webpage then the Horizontal Rules are position:absolute left:[like the left of its “data cell” top:[the biggest “data cell” bottom co-ordinate] width:[undefined and so is zero]
  • Absolutely Positioning Visible Horizontal Rules … loses (hr) raggedness with the Horizontal Rules initially not placed in the table but appended to a separate div in the webpage then the Horizontal Rules are position:absolute left:[like the left of its “data cell” top:[the biggest “data cell” bottom co-ordinate] width:[“data cell” width] opacity:0.2 z-index:-1 marginTop:-25px

Feel free to try any/all these new ideas below …


Previous relevant Workplace Concepts Game Horizontal Rule Cell Tutorial is shown below.

Workplace Concepts Game Primer Tutorial

Workplace Concepts Game Primer Tutorial

Here’s a new web application project. Content wise we take …

  • a workplace concept …
  • link that concept to one or more categories namely “rights”, “responsibilities”, “ethical”, “unethical” …
  • organized into a single dimension array with semicolon and plus sign delimitation … in order to create …
  • a web application game where the user presses buttons to categorize workplace concepts

As you might imagine one person’s categorize can overlap and confuse for another person, but that is another matter.

We organize the categories “rights”, “responsibilities”, “ethical”, “unethical” into HTML table heading (th) elements with associated (ie id is same as category name) non-header row cell (td) elements that get appended to by the user answers.

New today was an idea we had to separate answer groups by td cells receiving a new hr (horizontal rule) element, but we want to improve that look (that gets ragged) over time.

Why not try the workplace_concepts.html‘s live run link to see what we mean.

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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

Workplace Concepts Game Primer Tutorial

Workplace Concepts Game Primer Tutorial

Workplace Concepts Game Primer Tutorial

Here’s a new web application project. Content wise we take …

  • a workplace concept …
  • link that concept to one or more categories namely “rights”, “responsibilities”, “ethical”, “unethical” …
  • organized into a single dimension array with semicolon and plus sign delimitation … in order to create …
  • a web application game where the user presses buttons to categorize workplace concepts

As you might imagine one person’s categorize can overlap and confuse for another person, but that is another matter.

We organize the categories “rights”, “responsibilities”, “ethical”, “unethical” into HTML table heading (th) elements with associated (ie id is same as category name) non-header row cell (td) elements that get appended to by the user answers.

New today was an idea we had to separate answer groups by td cells receiving a new hr (horizontal rule) element, but we want to improve that look (that gets ragged) over time.

Why not try the workplace_concepts.html‘s live run link to see what we mean.

If this was interesting you may be interested in this too.

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

Emoji Border Image Ajax Slice Repeat Outset Tutorial

Emoji Border Image Ajax Slice Repeat Outset Tutorial

Emoji Border Image Ajax Slice Repeat Outset Tutorial

Onto yesterday’s Emoji Border Image Slice Repeat Outset Tutorial we wanted to show you three ideas for “what to do after you say hello” to …

  • border-image-slice
  • border-image-repeat
  • border-image-outset

… ideas … those being the HTML iframe contents (via srcdoc HTML or src URL) ideas …

  • srcdoc via jQuery Ajax request HTML …

    var dprefix=document.URL.split('?')[0].split('#')[0];
    var dp=dprefix;
    var qsel='?ajaxurl='+ encodeURIComponent(document.getElementById('myr').textContent);
    $.ajax({ url: dp + qsel,
    data: {"url":dprefix + qsel},
    type: 'get',
    success: function(output) {
    document.getElementById('diframe').style.display='inline-block';
    document.getElementById('diframe').style.position='absolute';
    document.getElementById('diframe').style.left='50px';
    document.getElementById('diframe').style.top='150px';
    document.getElementById('diframe').style.width='90%';
    document.getElementById('diframe').style.height='285px';
    document.getElementById('diframe').style.zIndex='50';
    document.getElementById('oiframe').style.display='inline-block';
    document.getElementById('oiframe').style.width='90%';
    document.getElementById('oiframe').style.height='255px';
    document.getElementById('oiframe').style.opacity='0.5';
    document.getElementById('oiframe').srcdoc=output;
    }
    });
  • src via URL
  • srcdoc via HTML and Javascript above “cobbled together” …

    vshuh="<!doctype html><html><head>" + document.head.innerHTML + "</head>" + document.body.outerHTML.split(' id="diframe"')[0] + '></div></body></html>';

What did we learn from this? Of the three ideas above, one behaves differently as far as the end result goes. Can you guess which, anyone, anyone? Yes, Alfonzo Dominico Jones, it’s the “srcdoc via jQuery Ajax request HTML”, well done. And can you tell the class why? Well, that’s interesting yes, that it’s the only one with a cleaning product, but think, perhaps, it is also that the cleaning productthe content that results here excludes any dynamic changes the document.body onload event can achieve. And so, that is why the top green bordered content is different in today’s tutorial picture view of us trying this new look to the changed right_bottom.html‘s live run link.


Previous relevant Emoji Border Image Slice Repeat Outset Tutorial is shown below.

Emoji Border Image Slice Repeat Outset Tutorial

Emoji Border Image Slice Repeat Outset Tutorial

CSS border images are “another woooooooorrrrlllldd” out there in “I.T. land” … you rang … and adding onto the previous Emoji Border or Background Image Mobile Canvas Tutorial web application we allow the user, as far as border images go, specify …

  • border-image-slice
  • border-image-repeat
  • border-image-outset

… via, respectively, emoji definition or image URL definition appended by ? or & delimited (arguments) involving …

  • slice=number|%|fill|initial|inherit
  • repeat=stretch|repeat|round|initial|inherit
  • outset=length|number|initial|inherit

… that you can get more information about at this great link, thanks.

As such, you may want to take a gecko at the changed right_bottom.html‘s live run link.

This could be a topic you just need to throw yourself into, to find out more, though we can show you a little with today’s animated GIF presentation.


Previous relevant Emoji Border or Background Image Mobile Canvas Tutorial is shown below.

Emoji Border or Background Image Mobile Canvas Tutorial

Emoji Border or Background Image Mobile Canvas Tutorial

Yesterday’s Emoji Border or Background Image Canvas Tutorial‘s HTML5 canvas functionality was best showing those attributes we listed …

  • the HTML5 canvas element right click or two finger gesture functionality includes Copy options …
  • the canvas can collect both images and text and be able to summarize that into …
  • a single image can be derived from the canvas element, encapsulating its contents … so that …
  • the canvas element can export that graphical content into a data URI that involves no absolute URLs … and so ties in nicely with …
  • email attachments can go hand in hand with the canvas element via a serverside function such as PHP’s mail function to enhance sharing functionalities

… for non-mobile platforms, alas. What was stopping the “Copy” options, in particular, on mobile platforms? Basically the difference in this web application’s workings are that the canvas [canvas].drawImage first image object parameter in our case is an absolute URL, the use of which will, on mobile platforms, cause a …


SecurityError: The operation is insecure.

… error when using the [canvas].toDataURL method with an absolute URL first parameter, unless either of the two approaches below is adopted …

… the latter approach of which we implement using some new (child iframe called) PHP right_bottom.php that features the use of file_get_contents method for the broad brush description’s contents below …


"turn absolute URL into a data URI" occurs with an HTML img element "src" attribute value where in pseudo PHP, for a *.png image ...
[data URI] = 'data:image/png;base64,' . base64_encode(file_get_contents([absolute URL]));

This mobile platform progress on today’s live run‘s right_bottom.html had these changes we hope, again, are of use to you as you follow this web application’s progress.


Previous relevant Emoji Border or Background Image Canvas Tutorial is shown below.

Emoji Border or Background Image Canvas Tutorial

Emoji Border or Background Image Canvas Tutorial

We want to keep moving on HTML5 canvas integration adding onto yesterday’s Emoji Border or Background Image Sharing Tutorial beginnings to the Sharing functionality of our Emoji Creations web application.

What’s the big deal with the HTML5 canvas element? For a few things …

  • the HTML5 canvas element right click or two finger gesture functionality includes Copy options …
  • the canvas can collect both images and text and be able to summarize that into …
  • a single image can be derived from the canvas element, encapsulating its contents … so that …
  • the canvas element can export that graphical content into a data URI that involves no absolute URLs … and so ties in nicely with …
  • email attachments can go hand in hand with the canvas element via a serverside function such as PHP’s mail function to enhance sharing functionalities

The Emoji CSS helping images here can populate HTML img elements and the object of that image can form the basis for parameter one of the canvas drawImage method to draw that image into the contents of the canvas element. We show all this in a window.open new window as a first idea we’ll develop further into the future.

Progress on today’s live run‘s right_bottom.html had these changes we hope are of use to you as you follow this web application’s progress.

You can also see this play out at WordPress 4.1.1’s Emoji Border or Background Image Canvas Tutorial.


Previous relevant Emoji Border or Background Image Sharing Tutorial is shown below.

Emoji Border or Background Image Sharing Tutorial

Emoji Border or Background Image Sharing Tutorial

We’re getting in early with “sharing” thoughts to augment the usefulness of yesterday’s Emoji Border or Background Image Primer Tutorial, but think some aspects here will develop further as we turn this web application into more of a “product” in future days.

We started the day with thoughts of integrating the HTML5 canvas element into the workings, because it will be integral to future functionality improvements, but found its “sharing” capabilities regarding …

  • border image … and/or …
  • background image

… to be harder than we thought, though we have not given up here. Instead, though, as far as “sharing” improvements go, we allow the user to send emails via the client mail application via an HTML “a” “mailto:” link that we click to set the email functionality off.

Our “a” “mailto:” link’s href attribute is populated at two places, those being …

  • a remembered href “prefix” at the document.body onload event … starting with the HTML …

    <a href='mailto:?subject=Emoji%20Creation&body=' style='display:none;' id='aemail'>Email</a>

    … the document.body onload event Javascript logic …

    var wasa='';
    document.getElementById('aemail').href+=encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?canvas=');
    wasa=document.getElementById('aemail').href;

    … then …
  • a calculated “suffix” kicked off by the user clicking a new “Email” link in amongst the header fields of the web application

… and it is this second “suffix” calculation that crystallizes for us, in code, the curiosity that never fails to get our curiosity of this scenario involving the nesting of encodeURIComponent within another encodeURIComponent, as in the Javascript statement …


document.getElementById('aemail').href=wasa + encodeURIComponent(encodeURIComponent(cis));
document.getElementById('aemail').click();

So that, with an email body section content of …


https://www.rjmprogramming.com.au/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E

… triggered by the “a” “mailto:” link href …


mailto:?subject=Emoji%20Creation&body=HTTPs%3A%2F%2Fwww.rjmprogramming.com.au%2Fright%5Fbottom.html%3Fcanvas%3D%253Ccanvas%2520%2520id%253D%2522mycanvas%2522%25C2%25A0style%253D%2522top%253A0px%253Bleft%253A0px%253Bposition%253Aabsolute%253Bz-index%253A7%253B%2520width%253A673.3333129882812px%253B%2520height%253A280.6666564941406px%253Bdisplay%253A%2520block%253B%2520border%253A%252080px%2520solid%2520red%253B%2520border-image-source%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F1f3a1.png)%253B%2520background-image%253A%2520url(https%253A%252F%252Ftwemoji.maxcdn.com%252F2%252F72x72%252F26f1.png)%253B%2522%253E%253C%252Fcanvas%253E

… any stray blank characters will cause a broken link, whereas these spaces sometimes survive a pasting into a web browser address bar with proper navigational integrity. So what goes on with the URL above is …

  1. the “mailto:” brings up the email client application with the To: field left blank …
  2. the “?subject=Emoji%20Creation” fills in a default value of “Emoji Creation” (via decodeURIComponent) into the Subject field …
  3. what follows the “&body=” is filled in as the default value in the Body section of the email (via decodeURIComponent) to https://www.rjmprogramming.com.au/right_bottom.html?canvas=%3Ccanvas%20%20id%3D%22mycanvas%22%C2%A0style%3D%22top%3A0px%3Bleft%3A0px%3Bposition%3Aabsolute%3Bz-index%3A7%3B%20width%3A673.3333129882812px%3B%20height%3A280.6666564941406px%3Bdisplay%3A%20block%3B%20border%3A%2080px%20solid%20red%3B%20border-image-source%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F1f3a1.png)%3B%20background-image%3A%20url(https%3A%2F%2Ftwemoji.maxcdn.com%2F2%2F72x72%2F26f1.png)%3B%22%3E%3C%2Fcanvas%3E at the receiving end of the email “sharing”

… hence the need for “encodeURIComponent(encodeURIComponent(cis))”.

Our HTML and Javascript and CSS live run‘s right_bottom.html changed this way today to add in email sharing.


Previous relevant Emoji Border or Background Image Primer Tutorial is shown below.

Emoji Border or Background Image Primer Tutorial

Emoji Border or Background Image Primer Tutorial

Have you ever seen an Emoji you’d really like to use as either a webpage …

  • border image … and/or …
  • background image

? Well, we’re here to tell you, thanks to the brilliance of Emoji CSS you may already be familiar with us mentioning at these blog postings … yes … this can be done.

Our proof of concept live run‘s right_bottom.html HTML and Javascript and CSS most interesting Javascript is …


<script type='text/javascript'>

var bmode='border';

function analyze(tvi) {
if (tvi.textContent != '') {
if (tvi.textContent.length <= 2) {
if (bmode == 'border') {
document.getElementById('myb').style.borderImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.textContent.codePointAt(0).toString(16) + '.png")';
} else {
document.getElementById('myb').style.backgroundImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.textContent.codePointAt(0).toString(16) + '.png")';
}
} else {
if (bmode == 'border') {
document.getElementById('myb').style.borderImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'') + '.png")';
} else {
document.getElementById('myb').style.backgroundImage='url("//twemoji.maxcdn.com/2/72x72/' + tvi.innerHTML.toLowerCase().replace(/\&/g,'').replace(/\#/g,'') + '.png")';
}
}
}
}
</script>

… called from the onblur event of an HTML div contenteditable=true field there for the user to enter an Emoji of interest ideally via …

  • HTML Entity (Hex) value (less the & and # please) … but should also work for …
  • Emoji Placement menu selections that on a MacBook Pro you’d access via Control-Command-Space

… the toggling between “border” and “background” available via our oft-used “-” sign link in the headers.

Useful, we hope, huh?!

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

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