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 , , , , , , , , , | 336 Comments

Mac iPhoto Slideshow to iTunes and iMovie Movie Primer Tutorial

Mac iPhoto Slideshow to iTunes and iMovie Movie Primer Tutorial

Mac iPhoto Slideshow to iTunes and iMovie Movie Primer Tutorial

The Mac iPhoto Primer Tutorial from yesterday explains how Mac OS X iPhoto application does a great job of storing your photographs (on the Mac laptop’s hard disk) from a variety of sources, and it shows this for the import of photographs from a digital camera’s memory card.

Today we follow up this idea and show how mind-bogglingly integrated iPhoto is with other Mac laptop “desktop” applications. During the making of the tutorial iPhoto integrated with iTunes, iMovie and along the way Finder comes into the picture too with its really cute photo file grouping right click “Quick Look” usage (last two slides show this).

Basically today we take a single “event”, equating to a date the photographer implicitly “stored” on the data just by taking the care to set a valid date on the digital camera. So this becomes an “event” on iPhoto with a date name as default (though you can change this) … today we chose the “9 January 2008″ iPhoto “event” … and this can lead to the creation of an iPhoto Slideshow, as shown during the tutorial (the early slides in iMovie are a bit of a deadend by the way, but got left in in case somebody else needs this type of functionality).

An iPhoto Slideshow can then be exported as a movie, and this is done during the tutorial. The default export option will allow you to import the movie into iTunes, and this same m4v movie can be imported into iMovie.

From there, you have additional “Share” options with all these desktop applications and once you have m4v videos, these are compatible for YouTube usage.

As you can imagine this is a very powerful combination of media “players” for you to present what you want to say or show.

This tutorial uses the great Lightbox for its slideshow presentation, but if you like the homebaked older slideshow style of presentation there is a link here.

Here is a link to iPhoto information from Apple.

Here is a link to iMovie information from Apple.

Here is a link to iTunes information from Apple.


Previous relevant Mac iPhoto Primer Tutorial is shown below.

Mac iPhoto Primer Tutorial

Mac iPhoto Primer Tutorial

The Mac OS X iPhoto application does a great job of storing your photographs (on the Mac laptop’s hard disk) that are:

  • created on your laptop
  • importable via removable CDs/DVDs/USBs or others
  • importable via digital cameras (with inbuilt memory card) with cable
  • importable via USB card reader with a memory card from a digital camera or somewhere else
  • importable via iCloud
  • importable via a DropBox

It blows my mind enough just to think of the great way it imports from the options that involve a memory card. The blowing mainly derives from its organizational “smarts” if you have been one of those brilliantly organized people who accurately set the date and time on their digital camera. This allows iPhoto’s functionality to compartmentalize the photos by date as one of its “Events” and this is a really helpful feature. So today’s tutorial shows the ease with which a choc-a-block memory card can be very quickly imported into iPhoto within minutes.

The Mac iPhoto application can create slideshows and shares with iCloud, email, messages, social media and Flickr. Let’s see what Wikipedia says about this wonderful application.

iPhoto is a digital photograph manipulation software application developed by Apple Inc. and which used to be included with every Macintosh personal computer as part of the iLife suite of digital media management applications. First released in 2002, iPhoto can import, organize, edit, print and share digital photos. In Mavericks, rather than being included in OS X, iPhoto is available from the Mac App Store.

iPhoto is often compared to Google’s Picasa, CyberLink’s MediaShow, Adobe’s Photoshop Album, Phase One’s Media Pro and Microsoft’s Windows Photo Gallery. iPhoto ’11 (9.5), the latest version of the software, was released as part of the iLife ’11 suite on October 20, 2010.

On March 7, 2012, Apple CEO Tim Cook announced a new, iOS-native version of iPhoto alongside the third-generation iPad.[2]

Here is a link to iPhoto information from Apple.

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


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

Posted in Animation, Photography, Software, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , | 39 Comments

Just Javascript Webmail No Body Attachment Tutorial

Just Javascript Webmail No Body Attachment Tutorial

Just Javascript Webmail No Body Attachment Tutorial

A “hard liner” for the proper use of “business emails” could argue that an email without an attachment is not productive. Couldn’t you just have a face to face meeting instead, if there is just wording in the email (as we somewhat concur with, as an argument)? So yesterday’s Just Javascript Webmail No Body Tutorial had that limitation of no email attachment logic, which we remedy today.

And this is where PHP’s wonderful file_get_contents (function) means by which we garner (URL) content …

  • definitely works with “relative URLs” relative to HTTP://www.rjmprogramming.com.au/HTMLCSS/ where today’s unchanged webmail_nobody.html resides … in “parsing parlance” …

    "relative (URL)" to the left of any # or ? of what lies to the left of the most right hand "/" (of what the address bar URL is of the webpage you are on)

    … so that …

    1. “relative URLs” starting with “./” (followed by the filename, or just the filename (as you can see us using in today’s tutorial picture)) refer to the web server directory corresponding to “HTTP://www.rjmprogramming.com.au/HTMLCSS/” … whereas, for example …
    2. “relative URLs” starting with “../” (followed by the filename) refer to the web server directory corresponding to “HTTP://www.rjmprogramming.com.au/” … for example

    … and …

  • might work for “absolute URLs” (those that start with https: or HTTP: or even // (that we beg you not to confuse with Windows UNC pathnames) that infer a transport protocol of the transport protocol (out of https: or HTTP: or even file:) that got you to the webpage you are currently on), the “might” being far more likely on “absolute URLs” pointing to the same domain as indicated on the URL of the address bar of the webpage you are currently on

Upshot is, the user in their email Body section definitions (still no HTML body though!), can throw into any word they use, an “absolute URL” of interest, or a “relative URL” of interest, of files they want to attach (as attachments, doh!) in their email.

Depending on the email rules though, there are limits as to the amount of attachment data allowed. We’ll leave that to you intrepid “explorers of the Net” to discover for yourselves. On this subject though, have you noticed that with the Photos (or Gallery) app Share options, the Email option drops off when you have highlighted a large number of photos or videos or audios to share? That’s that email limit coming into play.

So feel free to try this HTML-body-less web application live run to see what we mean here. Though the parent HTML is unchanged today, the new (email) attachment functionality needed a changed PHP emailhtml.php to make this happen.

You can also see this play out at WordPress 4.1.1′s Just Javascript Webmail No Body Attachment Tutorial.

Did you know?

This (relative URL) “../” navigation backwards up the hierarchy of the web server directories will, if repeated (ie. nested to “../../” etcetera) too many times, get you into uncharted unnavigable (web server directory) places relative to that web server web site’s Document Root (below which you can not access in public webpages, normally). But when you perform similar thinking with “absolute URLs” and go “HTTP://www.rjmprogramming.com.au/HTMLCSS/../../../blahdeblah.jpg” (in a web browser address bar) for instance, you cannot get into trouble, as you just don’t get beyond this sending you to (attempt the reference to) “HTTP://www.rjmprogramming.com.au/blahdeblah.jpg” because on this rjmprogramming.com.au Apache domain the correspondence of the Document Root (web server directory) is to “HTTP://www.rjmprogramming.com.au/” as the place you are not allowed (and cannot) go below in the hierarchy tree.


Previous relevant Just Javascript Webmail No Body Tutorial is shown below.

Just Javascript Webmail No Body Tutorial

Just Javascript Webmail No Body Tutorial

Were you around and interested in our series of about three blog postings in the series on the theme of creating webpage functionality of some interest, involving no Javascript, when we presented Missing Javascript Audio on Unmute Tutorial? Well, today, it’s the turn of “just Javascript”, which is sort of like what Bookmarklets were about.

With today’s “just Javascript” we have to qualify that a little for our webmail emailing sender application with the architecture …

  • parent webpage with only document.head and apart from a document.title just a script Javascript tag of content (using Javascript prompt windows to ask for user information) …
  • sending (POSTing) data via …
    1. Ajax XMLHttpRequest object … as the conduit for …
    2. FormData object

    … to our changed

  • PHP communication emailing tool emailhtml.php … and out to …
  • the emailee (out there in the big wide woooorrrrrllllldddd)

Guess we find it interesting that you can do all this (sending of email to emailee recipients) with no document.body in sight.

So take a look at that parent webmail_nobody.html‘s live run link to see what we mean here, and/or watch the video below …


Previous relevant Missing Javascript Audio on Unmute Tutorial is shown below.

Missing Javascript Audio on Unmute Tutorial

Missing Javascript Audio on Unmute Tutorial

Our “third cab off the rank” following on from yesterday’s Missing Javascript Stop Watch Tutorial “missing Javascript” ideas is an HTML div nesting scenario using just …

  1. HTML
  2. CSS

… again, with some or all of the “usuals” below …

  • calc method to assist with defining width and height and size dimensions along with operator “+” and/or “-” offset calculation opportunities, and which we’d have used the Javascript window.getComputedStyle and/or [element].getBoundingClientRect methods to cover this (in a much more unwieldy way, as you would probably surmise)
  • CSS variables we started talking about here at CSS Variables Primer Tutorial
  • CSS3 @keyframes rules we first talked about at CSS3 @keyframes Rule Primer Tutorial that assist with animations that we can make work via …
  • CSS3 transitions for scheduled functionality (we’d have used Javascript setTimeout (and setInterval) methods to cover the same “territory”) we first talked about at CSS3 Transition Primer Tutorial … specified with CSS Criteria involving …
  • CSS Selectors :after and :before (and often, as for today’s work, with the content: CSS property) first talked about here with WordPress Bullet Point CSS Styling Primer Tutorial … and, today …
  • CSS3 transform property’s rotate (and translate and scale) settings (for the puppy dog body movements) … as well as the idea that …
  • On non mobile platforms you can set up the playing of “audio” data via the use of an HTML audio tag with the properties …
    1. controls
    2. autostart
    3. loop
    4. muted

    Stop Press

    Above is all fine and good for non-mobile but not so good for mobile, so to keep all happy with the one click, still, is to transfer HTML coding from …


    <audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="display:none;margin-left:-350px;opacity:0.1;" autostart muted loop controls src="Puppy-sounds.mp3" />

    … to …


    <!--audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="display:none;margin-left:-350px;opacity:0.1;" autostart muted loop controls src="Puppy-sounds.mp3" /-->
    <audio id='myaudiotwo' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="margin-left:-350px;opacity:0.1;" autostart="0" loop controls src="Puppy-sounds.mp3" />

    … and a src= URL data source (as we thank this link for today), or data URI if preferred (which we do for today’s image data from this link, thanks (when we were researching animated GIF data URIs (which we may return to at a later date))

… that sets up the scenario that all the user has to do to hear the audio is to click the “muted” control button, without needing the usual Javascript play() methods … but not on mobile!

Feel free to let the puppy play, that uses the HTML and CSS (but no Javascript) of the_nested.html and based largely on the previous HTML Nested Centering via Multiple Select Tutorial so that these changes reflect how we got to the first draft of today’s work. Maybe some of the ideas are of interest. We hope so!


Previous relevant Missing Javascript Stop Watch Tutorial is shown below.

Missing Javascript Stop Watch Tutorial

Missing Javascript Stop Watch Tutorial

Following on from yesterday’s Missing Javascript Primer Tutorial our second “cab off the rank” for “missing Javascript” ideas is a stop watch featuring just …

  1. HTML
  2. CSS

… again, setting up document.body load instigated

… which we needed to do to make multiple animations happen, but we used animation-delay:5s; to delay its start. The hands (second and minute, hence the two animations) are “overlay”

… feeling HTML horizontal rule elements that also feature linear gradients, to emphasise (in red) the “pointy end” of the “hand conversation” (good on walls with shadows … but we digress).

Feel free to let loose the stop watch that uses the HTML and CSS (but no Javascript) of stop_watch.html for today’s instructional information. Thanks to Clipart – stop watch for the great clip art used.


Previous relevant Missing Javascript Primer Tutorial is shown below.

Missing Javascript Primer Tutorial

Missing Javascript Primer Tutorial

If you were to ask me which programming component is most vital to web application development, I’d not be Robinson Crusoe in saying …

Without a doubt, Javascript

… and with that thought in mind we have a two pronged motive to see how far we go developing some web applications that “don’t use Javascript”, calling into play the …

  • meaning of “missing”, as in, our code is “missing” Javascript … as well as how I feel with the masochism of the exercise, calling into play the …
  • meaning of “missing”, as in, it’s hard work writing meaningful web applications without Javascript … but I guess we’ll learn a bit from the exercise of “see where we go”, allowing for the fact, not today, but down the track, that we will allow the use of server-side languages such as PHP

Okay, so, given that restriction, let’s see today’s challenge, to just use, in a web application …

  1. HTML
  2. CSS

… and here is where we have to point out that CSS3 introduced to us some functionality that improves the prospects for web application design “interest” without using Javascript (though it is hard to convince me even so, that I am not “missing” Javascript) here. CSS3 introduced to us …

… and we use all of these in our Festive Season themed web application today, you can try at this live run‘s calc_use.html (free of any Javascript (but “why” springs to mind … because it is NOT there, perhaps?)).

Here’s the other thing about today. Our long sought after “just make the body background be semi-transparent” but not its foreground parts, was solved, for us via the great advice of …

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, Event-Driven Programming, Tutorials, eLearning | Tagged , , , , , , , , , , , , , , , , , | Leave a comment

Just Javascript Webmail No Body Tutorial

Just Javascript Webmail No Body Tutorial

Just Javascript Webmail No Body Tutorial

Were you around and interested in our series of about three blog postings in the series on the theme of creating webpage functionality of some interest, involving no Javascript, when we presented Missing Javascript Audio on Unmute Tutorial? Well, today, it’s the turn of “just Javascript”, which is sort of like what Bookmarklets were about.

With today’s “just Javascript” we have to qualify that a little for our webmail emailing sender application with the architecture …

  • parent webpage with only document.head and apart from a document.title just a script Javascript tag of content (using Javascript prompt windows to ask for user information) …
  • sending (POSTing) data via …
    1. Ajax XMLHttpRequest object … as the conduit for …
    2. FormData object

    … to our changed

  • PHP communication emailing tool emailhtml.php … and out to …
  • the emailee (out there in the big wide woooorrrrrllllldddd)

Guess we find it interesting that you can do all this (sending of email to emailee recipients) with no document.body in sight.

So take a look at that parent webmail_nobody.html‘s live run link to see what we mean here, and/or watch the video below …

You can also see this play out at WordPress 4.1.1′s Just Javascript Webmail No Body Tutorial.


Previous relevant Missing Javascript Audio on Unmute Tutorial is shown below.

Missing Javascript Audio on Unmute Tutorial

Missing Javascript Audio on Unmute Tutorial

Our “third cab off the rank” following on from yesterday’s Missing Javascript Stop Watch Tutorial “missing Javascript” ideas is an HTML div nesting scenario using just …

  1. HTML
  2. CSS

… again, with some or all of the “usuals” below …

  • calc method to assist with defining width and height and size dimensions along with operator “+” and/or “-” offset calculation opportunities, and which we’d have used the Javascript window.getComputedStyle and/or [element].getBoundingClientRect methods to cover this (in a much more unwieldy way, as you would probably surmise)
  • CSS variables we started talking about here at CSS Variables Primer Tutorial
  • CSS3 @keyframes rules we first talked about at CSS3 @keyframes Rule Primer Tutorial that assist with animations that we can make work via …
  • CSS3 transitions for scheduled functionality (we’d have used Javascript setTimeout (and setInterval) methods to cover the same “territory”) we first talked about at CSS3 Transition Primer Tutorial … specified with CSS Criteria involving …
  • CSS Selectors :after and :before (and often, as for today’s work, with the content: CSS property) first talked about here with WordPress Bullet Point CSS Styling Primer Tutorial … and, today …
  • CSS3 transform property’s rotate (and translate and scale) settings (for the puppy dog body movements) … as well as the idea that …
  • On non mobile platforms you can set up the playing of “audio” data via the use of an HTML audio tag with the properties …
    1. controls
    2. autostart
    3. loop
    4. muted

    Stop Press

    Above is all fine and good for non-mobile but not so good for mobile, so to keep all happy with the one click, still, is to transfer HTML coding from …


    <audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="display:none;margin-left:-350px;opacity:0.1;" autostart muted loop controls src="Puppy-sounds.mp3" />

    … to …


    <!--audio id='myaudio' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="display:none;margin-left:-350px;opacity:0.1;" autostart muted loop controls src="Puppy-sounds.mp3" /-->
    <audio id='myaudiotwo' title='Got a sock in my mouth, so you might want to unmute me!' type='audio/mp3' style="margin-left:-350px;opacity:0.1;" autostart="0" loop controls src="Puppy-sounds.mp3" />

    … and a src= URL data source (as we thank this link for today), or data URI if preferred (which we do for today’s image data from this link, thanks (when we were researching animated GIF data URIs (which we may return to at a later date))

… that sets up the scenario that all the user has to do to hear the audio is to click the “muted” control button, without needing the usual Javascript play() methods … but not on mobile!

Feel free to let the puppy play, that uses the HTML and CSS (but no Javascript) of the_nested.html and based largely on the previous HTML Nested Centering via Multiple Select Tutorial so that these changes reflect how we got to the first draft of today’s work. Maybe some of the ideas are of interest. We hope so!


Previous relevant Missing Javascript Stop Watch Tutorial is shown below.

Missing Javascript Stop Watch Tutorial

Missing Javascript Stop Watch Tutorial

Following on from yesterday’s Missing Javascript Primer Tutorial our second “cab off the rank” for “missing Javascript” ideas is a stop watch featuring just …

  1. HTML
  2. CSS

… again, setting up document.body load instigated

… which we needed to do to make multiple animations happen, but we used animation-delay:5s; to delay its start. The hands (second and minute, hence the two animations) are “overlay”

… feeling HTML horizontal rule elements that also feature linear gradients, to emphasise (in red) the “pointy end” of the “hand conversation” (good on walls with shadows … but we digress).

Feel free to let loose the stop watch that uses the HTML and CSS (but no Javascript) of stop_watch.html for today’s instructional information. Thanks to Clipart – stop watch for the great clip art used.


Previous relevant Missing Javascript Primer Tutorial is shown below.

Missing Javascript Primer Tutorial

Missing Javascript Primer Tutorial

If you were to ask me which programming component is most vital to web application development, I’d not be Robinson Crusoe in saying …

Without a doubt, Javascript

… and with that thought in mind we have a two pronged motive to see how far we go developing some web applications that “don’t use Javascript”, calling into play the …

  • meaning of “missing”, as in, our code is “missing” Javascript … as well as how I feel with the masochism of the exercise, calling into play the …
  • meaning of “missing”, as in, it’s hard work writing meaningful web applications without Javascript … but I guess we’ll learn a bit from the exercise of “see where we go”, allowing for the fact, not today, but down the track, that we will allow the use of server-side languages such as PHP

Okay, so, given that restriction, let’s see today’s challenge, to just use, in a web application …

  1. HTML
  2. CSS

… and here is where we have to point out that CSS3 introduced to us some functionality that improves the prospects for web application design “interest” without using Javascript (though it is hard to convince me even so, that I am not “missing” Javascript) here. CSS3 introduced to us …

… and we use all of these in our Festive Season themed web application today, you can try at this live run‘s calc_use.html (free of any Javascript (but “why” springs to mind … because it is NOT there, perhaps?)).

Here’s the other thing about today. Our long sought after “just make the body background be semi-transparent” but not its foreground parts, was solved, for us via the great advice of …

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, Tutorials, eLearning | Tagged , , , , , , , , , , , | Leave a comment

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.

You can also see this play out at WordPress 4.1.1′s HTML CSV Report Validation via Client Input or Regular Expression Tutorial.


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 Event-Driven Programming, Tutorials, eLearning | 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.

You can also see this play out at WordPress 4.1.1′s HTML Worded Validation via Client Input or Regular Expression Tutorial.


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 Event-Driven Programming, Tutorials, Uncategorized, eLearning | 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.

You can also see this play out at WordPress 4.1.1′s HTML Validation via Client Input or Regular Expression Tutorial.


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 Event-Driven Programming, Tutorials, eLearning | 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.

You can also see this play out at WordPress 4.1.1′s Workplace Concepts Game Horizontal Rule Reveal Tutorial.


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 Games, Tutorials, eLearning | 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 …

You can also see this play out at WordPress 4.1.1′s PHP Cookies Navigation Primer Tutorial.

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 Tutorials, eLearning | 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 …

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.

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