{"id":27793,"date":"2017-01-26T03:01:16","date_gmt":"2017-01-25T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27793"},"modified":"2017-04-28T19:00:03","modified_gmt":"2017-04-28T09:00:03","slug":"do-it-yourself-html-textarea-editor-post-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-post-tutorial\/","title":{"rendered":"Do It Yourself HTML Textarea Editor Post Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Do It Yourself HTML Textarea Editor Post Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits_longcut.JPG\" title=\"Do It Yourself Textarea Editor Post Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Do It Yourself HTML Textarea Editor Post Tutorial<\/p><\/div>\n<p>We&#8217;re introducing a &#8220;duck paddling fast underwater&#8221; but &#8220;who says you have to be the duck&#8221; aspect to our &#8220;Do It Yourself HTML Editor&#8221; today, adding onto the (blog posting) thread we left off yesterday with <a title='Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial' href='#diyhtecpet'>Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial<\/a> as shown below.  The duck is paddling fast because &#8230; you guessed it &#8230; it&#8217;s a &#8220;dual&#8221; purpose duck, and it&#8217;s a <a target=_blank title='Great website, not expected' href='http:\/\/phpduck.com'>PHP duck<\/a>, with roles, helping out the HTML, of &#8230;<\/p>\n<ol>\n<li>processing long bits of HTML contained in the Textarea by having the HTML <a target=_blank title='POST to PHP from HTML form method=POST' href='http:\/\/php.net\/manual\/en\/reserved.variables.post.php'>&#8220;POST&#8221;<\/a> this large amount of data to the PHP for processing &#8230; via &#8230;\n<ul>\n<li>method=POST<\/li>\n<li>action=.\/do_away_with_the_boring_bits.php<\/li>\n<\/ul>\n<p> &#8230; and that can come into play because of a new HTML <a target=_blank title='HTML form element information from w3schools' href='http:\/\/www.w3schools.com\/html\/html_form_elements.asp\n'>form<\/a> element validation <a target=_blank title='HTML onsubmit event information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onsubmit.asp\n'><i>onsubmit<\/i><\/a> event added whereby the Textarea characteristics determine the approach to use to process that data<\/li>\n<li>a feature not really advertised, but catering for PHP code input from the user<\/li>\n<\/ol>\n<p>With that last role, we do not execute the PHP at our rjmprogramming.com.au website, but rather, give you some advice regarding that great local Apache\/PHP\/MySQL web server product called <a target=_blank title='MAMP' href='http:\/\/mamp.info'>MAMP<\/a> (now that we have it pretty steady on both Mac and Windows here) and direct the user to a link to <i>http:\/\/localhost:8888\/doityourself.php<\/i> which will be workable should the user follow through on the PHP (contained in PHP variable <i>$andintoitgoes<\/i> of code snippet below) we download to the user &#8230;<\/p>\n<p><code><br \/>\n    $file = 'doityourself.php';<br \/>\n    file_put_contents($file, urldecode($andintoitgoes));<br \/>\n    header('Content-Description: File Transfer');<br \/>\n    header('Content-Type: application\/octet-stream');<br \/>\n    header('Content-Disposition: attachment; filename=\"'.basename($file).'\"');<br \/>\n    header('Expires: 0');<br \/>\n    header('Cache-Control: must-revalidate');<br \/>\n    header('Pragma: public');<br \/>\n    header('Content-Length: ' . filesize($file));<br \/>\n    readfile($file);<br \/>\n    unlink($file);<br \/>\n    exit;<br \/>\n<\/code><\/p>\n<p> &#8230;  that they could copy from their &#8220;Downloads&#8221; folder to MAMP&#8217;s <i>htdocs<\/i> (Document Root ( is equivalent to http:\/\/localhost:8888\/ )) folder.  We got great help from &#8230;<\/p>\n<ul>\n<li><a target=_blank title='PHP readfile command advice regarding downloading' href='http:\/\/php.net\/manual\/en\/function.readfile.php'>here<\/a> regarding the PHP download advice hooking up to the PHP <a target=_blank title='PHP readfile command advice' href='http:\/\/php.net\/manual\/en\/function.readfile.php'>readfile<\/a> command<\/li>\n<li><a target=_blank title='Good advice regarding error ... The XSS Auditor refused to execute a script in http:\/\/localhost:8888\/weather\/do_away_with_the_boring_bits.php because its source code was found within the request. The auditor was enabled as the server sent neither an X-XSS-Protection nor Content-Security-Policy header.' href='http:\/\/stackoverflow.com\/questions\/17016960\/chromiums-xss-auditor-refused-to-execute-a-script'>here<\/a> regarding an error message we got with a very large amount of HTML POSTed to the PHP, in the context of using the Google Chrome web browser and getting the error &#8230;<br \/>\n<code><br \/>\nThe XSS Auditor refused to execute a script in <font size=1>http:\/\/localhost:8888\/weather\/do_away_with_the_boring_bits.php<\/font> because its source code was found within the request. The auditor was enabled as the server sent neither an 'X-XSS-Protection' nor 'Content-Security-Policy' header.<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; so, thanks.<\/p>\n<p>The former role dovetails with another change to add to the &#8220;dual&#8221; roles &#8230; <font size=1>wouldn&#8217;t you know it?<\/font> &#8230; regarding the use of Cookies in that &#8230;<\/p>\n<ul>\n<li>in the HTML &#8220;parent&#8221; we now have a mechanism whereby the user can flag that they do not want to use Cookies for a session of work by changing the default HTML bits that now go &#8230;<br \/>\n<code>To not use cookies put space between no and cookies in nocookies.<\/code>\n<\/li>\n<li>our PHP &#8220;child&#8221;, that is automatically called into play as a long HTML entry is detected by the HTML &#8220;parent&#8221;, currently does not access nor create any Cookie data<\/li>\n<\/ul>\n<p>And one last additional change, to add to the changes additional to the &#8220;dual&#8221; changes &#8230; <font size=1>perhaps this is &#8220;dual&#8221; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=MzYx0XHTOYc'>du<strike>e<\/strike>al<\/a>?<\/font> &#8230; is that &#8230;<\/p>\n<ul>\n<li>we now allow for HTML &lt;body&gt; code that is not &lt;body&gt; &#8230; eg. &lt;body onload=&#8217;dothisonloading();&#8217;&gt; &#8230; but please do not expect any Javascript defined here to be executed, but it will allow it through for you to see the &#8220;look&#8221;, at least, of such HTML<\/li>\n<\/ul>\n<p>Now the &#8220;parent&#8221; HTML and Javascript could be called <a target=_blank title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html----GETME'>do_away_with_the_boring_bits.html<\/a>, changed from yesterday, in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html----GETME'>this way<\/a>, now supervises a PHP &#8220;child&#8221; helper you could call <a target=_blank title='do_away_with_the_boring_bits.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.php_GETME'>do_away_with_the_boring_bits.php<\/a> that assists with long HTML data that is POSTed and with some Cookie related (usage) flexibility.<\/p>\n<p>As ever, we hope you get the context of all this by trying our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html'>live run<\/a> link.<\/p>\n<hr>\n<p id='diyhtecpet'>Previous relevant <a target=_blank title='Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-css-pseudo-element-tutorial\/'>Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pithy.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pithy.JPG\" title=\"Do It Yourself Textarea Editor CSS Pseudo Element Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Do It Yourself HTML Textarea Editor CSS Pseudo Element Tutorial<\/p><\/div>\n<p>There&#8217;s nothing like restrictive conditions to help you concentrate and not be lazy about what is, and in this case, what isn&#8217;t, available to you to make some programming code happen.   We haven&#8217;t further delved into why, with our &#8220;recent days&#8221; &#8220;Do It Yourself HTML Editor&#8221; project, the Javascript within the <i>head<\/i> section doesn&#8217;t work, yet the CSS within the <i>head<\/i> section does.  It could be a thing to do with timing, or security, at the web browser &#8230; <font size=1>whatevvvvverrrrrrrr<\/font>.  Anyway, the point is, this hones curiosity back onto CSS for us, and this is rare compared to our far greater interest in Javascript and <i>&#8220;the DOM&#8221;<\/i> &#8230; am sure, related to <a target=_blank title='?' Href='https:\/\/m.youtube.com\/watch?v=JQc9L2RbQkw'><font size=1>if I divulged I&#8217;d have to &#8230;<\/font><\/a>?<\/p>\n<p>But the other day I arrived at a webpage, which I&#8217;ve lost now &#8230; <font size=1>sorrrrrryyyy<\/font> &#8230; looking up the question &#8220;Can an HTML element be affected remotely to another just using CSS?&#8221;.  And this website reminded me of the CSS pseudo element  &#8220;adjacent to&#8221; (&#8220;+&#8221; syntax) we discussed (particularly in the Stop Press) at <a target=_blank title='WordPress Blog Complex Selectors Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-complex-selectors-tutorial\/'>WordPress Blog Complex Selectors Tutorial<\/a>.  This was a very important thing to remember, but it was not really what I was getting at with the question.  I was after something just in CSS (with no Javascript DOM) that could change the characteristics of a &#8220;completely removed&#8221; HTML element caused by the user actions on a completely separate element.   That &#8220;+&#8221; CSS syntax is for elements that follow each other, but then &#8230; <font size=1>doh!<\/font> &#8230; the penny dropped &#8230; that HTML element that follows can use (half of our usual CSS &#8220;<a target=_blank title='Overlay blog posting here' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overlay'>overlay<\/a> suspects&#8221;) &#8230;<\/p>\n<ul>\n<li>position:absolute; <\/li>\n<li>top:0;<\/li>\n<li>left:0;<\/li>\n<\/ul>\n<p> &#8230; in our case, for the last two &#8230; to position that adjacent element anywhere you like relative to the other as a position on the resultant webpage, different to their &#8220;deliberate adjacency&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;a class='dyk' href='#mypheading' style='cursor:pointer;text-decoration:underline;'&gt;The rain in Spain,<br \/>\nFalls mainly,<br \/>\nOn the plain&lt;\/a&gt;<br \/>\n&lt;p id='mypheading'>Did you like our pithy thought?&lt;\/p&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; you, the programmer, arrange, for these elements.  Then, CSS &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.dyk:link + * { background-color:red; }<br \/>\n.dyk:link + *::after { content: '   Yes?'; }<br \/>\n.dyk:hover + * { background-color:yellow; }<br \/>\n.dyk:hover + *::after { content: '  Purrrrrhaps?'; }<br \/>\n.dyk:active + * { background-color:lightgreen;  }<br \/>\n.dyk:active + *::after { content:'   Wow, thanks for visiting.';   }<br \/>\n#mypheading { position:absolute; top:0; left:0; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; takes on a webpage (functionality) look of Javascript DOM.<\/p>\n<p>But, <a target=_blank title='?' Href='https:\/\/m.youtube.com\/watch?v=iiATDMHU7gc'>there&#8217;s more<\/a>.  Do you remember our CSS (wonder at the) CSS pseudos <i>:after<\/i> (and, implicitly, the <i>::after<\/i> that we finally work out, today, how to &#8220;work&#8221; &#8230; ie. it&#8217;s the way to combine two pseudos onto the one definitional &#8220;thought&#8221;) <i>content<\/i> and :before (and ::before) <i>content<\/i> we first talked about <a target=_blank title='CSS Before and After Content Primer Tutorial' href=' https:\/\/www.rjmprogramming.com.au\/ITblog\/css-before-and-after-content-primer-tutorial\/'>CSS Before and After Content Primer Tutorial<\/a>?   Combine this with thoughts above, and you&#8217;ve got CSS doing very Javascript DOM&#8217;y things (to HTML elements far removed, perhaps, from where the webpage user is interacting).<\/p>\n<p>Given that it is awkward to work lots of Javascript DOM scripting in our &#8220;Do It Yourself HTML Editor&#8221; (at least for now) this is very interesting to us, so we have a dual purpose modus operandi &#8230;<\/p>\n<ul>\n<li>write our <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pithy.html'>proof of concept<\/a> HTML and CSS code you could call <a target=_blank title='pithy.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pithy.html_GETME'>pithy.html<\/a> &#8230; and to also &#8230;<\/li>\n<li>copy\/paste that HTML and CSS into our &#8220;Do It Yourself HTML Editor&#8221; as per &#8230; <font size=1>please be warned, that this may blow your Cookie size limits, as it is close to being too big for us &#8230; but get ready, if so, to clear Browsing History for the Last Hour at your web browser, if so<\/font> &#8230; <a target=_blank title='Do It Yourself HTML Editor execution of pithy.html logic' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html?htmlcontent=%3C%21doctype+html%3E%0D%0A%3Chtml%3E%0D%0A%3Chead%3E%0D%0A%3Cstyle%3E%0D%0A.dyk%3Alink+%2B+*+%7B+background-color%3Ared%3B+%7D%0D%0A.dyk%3Alink+%2B+*%3A%3Aafter+%7B+content%3A+%27+++Yes%3F%27%3B+%7D%0D%0A.dyk%3Ahover+%2B+*+%7B+background-color%3Ayellow%3B+%7D%0D%0A.dyk%3Ahover+%2B+*%3A%3Aafter+%7B+content%3A+%27++Purrrrrhaps%3F%27%3B+%7D%0D%0A.dyk%3Aactive+%2B+*+%7B+background-color%3Alightgreen%3B++%7D%0D%0A.dyk%3Aactive+%2B+*%3A%3Aafter+%7B+content%3A%27+++Wow%2C+thanks+for+visiting.%27%3B+++%7D%0D%0A%23mypheading+%7B+position%3Aabsolute%3B+top%3A0%3B+left%3A0%3B+%7D%0D%0A%3C%2Fstyle%3E%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%3E%0D%0A%3Cbr%3E%3Cbr%3E%3Ch1%3EThe+Art+of+Changing+HTML+Element+Characteristics+of+Different+Elements+to+One+You+are+Accessing+or+Changing+...+Just+via+CSS+...+Hover+and%2For+Click%2FTap+below+...%3C%2Fh1%3E%3Cbr%3E%3C%2Fbr%3E%0D%0A%3Ca+class%3D%27dyk%27+href%3D%27%23mypheading%27+style%3D%27cursor%3Apointer%3Btext-decoration%3Aunderline%3B%27%3EThe+rain+in+Spain%2C%0D%0AFalls+mainly%2C%0D%0AOn+the+plain%3C%2Fa%3E%0D%0A%3Cp+id%3D%27mypheading%27%3EDid+you+like+our+pithy+thought%3F%3C%2Fp%3E%3Cbr%3E%3Cbr%3E%0D%0A%3Cspan%3E+...+and+there%27s+more+where+that+came+from.%3C%2Fspan%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E&#038;shortcuts='>this link<\/a> &#8230; we last talked about at yesterday&#8217;s <a title='Do It Yourself HTML Textarea Editor Shortcut Key Tutorial' href='#diyhteskt'>Do It Yourself HTML Textarea Editor Shortcut Key Tutorial<\/a> as  shown below, and the HTML and Javascript could be called <a target=_blank title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html---GETME'>do_away_with_the_boring_bits.html<\/a> and changed, trivially, just to do with the &#8220;too small&#8221; blue bit height, from yesterday, in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html---GETME'>this way<\/a>\n<\/li>\n<\/ul>\n<p> &#8230; and &#8220;dual&#8221; being 2 probably means we have to show you a third HTML iframe view of it below (and say <i>adios<\/i>), separately, because there is no way on this Earth that I&#8217;m changing &#8220;dual&#8221; to being anything else &#8230; <\/p>\n<p><iframe src='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/pithy.html' style='width: 100%;height:650px;' title='pithy.html in an HTML iframe'><\/iframe><\/p>\n<hr>\n<p id='diyhteskt'>Previous relevant <a target=_blank title='Do It Yourself HTML Textarea Editor Shortcut Key Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-shortcut-key-tutorial\/'>Do It Yourself HTML Textarea Editor Shortcut Key Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Do It Yourself HTML Textarea Editor Shortcut Key Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits_shortcut.JPG\" title=\"Do It Yourself Textarea Editor Shortcut Key Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Do It Yourself HTML Textarea Editor Shortcut Key Tutorial<\/p><\/div>\n<p>If you are using a laptop and following our thread of &#8220;Do It Yourself HTML Editor&#8221; blog postings, you may benefit from today&#8217;s progress on our web application, that you can also see being played out at <a target=_blank title='Do It Yourself HTML Textarea Editor Shortcut Key Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-shortcut-key-tutorial\/'>Do It Yourself HTML Textarea Editor Shortcut Key Tutorial<\/a>.  We allow for the linking of yesterday&#8217;s Cursor Positioned HTML dropdown, introduced with <a href='#diyhtect'' title='Do It Yourself HTML Textarea Editor Cursor Tutorial'>Do It Yourself HTML Textarea Editor Cursor Tutorial<\/a> as shown below, to a keyboard shortcut in the order &#8230;<\/p>\n<ul>\n<li>Ctrl key (or Mac equivalent) (separated please) to the key letter starting that HTML element you are selecting via a dropdown eg. &lt;p&gt;&lt;\/p&gt; could have a shortcut key Ctrl_P &#8230; or if already used &#8230;<\/li>\n<li>Alt key (or Mac equivalent) (separated please) to the key letter starting that HTML element you are selecting via a dropdown eg. &lt;span&gt;&lt;\/span&gt; could have a shortcut key Alt_S<\/li>\n<\/ul>\n<p>A strong advantage using these (Cookie&#8217;able) shortcuts is that you might be able to swing it to have the cursor stay where you want it in the HTML textarea element more often.<\/p>\n<p>We would like to thank this <a target=_blank title='Wonderful webpage' href='http:\/\/stackoverflow.com\/questions\/2511388\/how-can-i-add-a-javascript-keyborad-shortcut-to-an-existing-javascript-function'>wonderful webpage<\/a> for some direction with this work, which was more involved than we thought it would be, and maybe too long in code changes to encapsulate here.  In which case, it would be better to examine  the HTML and Javascript could be called <a target=_blank title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html--GETME'>do_away_with_the_boring_bits.html<\/a> and changed from yesterday for shortcut key functionality in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html--GETME'>this way<\/a>, mainly regarding the organization of <i>document<\/i> <a target=_blank title='HTML onkeyup event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onkeyup.asp'><i>onkeyup<\/i><\/a> (keyboard) event logic.  And, as per usual, here is a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\">live run<\/a> link for you to try this yourself, we hope?!<\/p>\n<hr>\n<p id='diyhtect'>Previous relevant <a target=_blank title='Do It Yourself HTML Textarea Editor Cursor Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-cursor-tutorial\/'>Do It Yourself HTML Textarea Editor Cursor Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Do It Yourself HTML Textarea Editor Cursor Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/textarea_cursor.JPG\" title=\"Do It Yourself Textarea Editor Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Do It Yourself HTML Textarea Editor Cursor Tutorial<\/p><\/div>\n<p>If you do lots of text editing perhaps you take the <a target=_blank href='https:\/\/en.m.wikipedia.org\/wiki\/Cursor' title='Cursor information from Wikipedia'>&#8220;cursor&#8221;<\/a> for granted.  But just as the stylus on a vinyl record makes the music in relation to its position, the equivalent of our text editing &#8220;cursor&#8221; is that it defines where to place the next typed character.  It&#8217;s been around, as a concept, and survived, more to the point, for a long time now, as it has been around regarding much database SQL query design too.   But today, for us, we are giving it some attention, because we want to &#8230;<\/p>\n<ul>\n<li>read off the HTML textarea &#8220;editor&#8221; element&#8217;s data its cursor position &#8230; and also &#8230;<\/li>\n<li>set the cursor position of the HTML textarea &#8220;editor&#8221; element after modifying its contents<\/li>\n<\/ul>\n<p>That ability means that we now have the ability to offer the user of this HTML textarea &#8220;editor&#8221; the chance to use &#8220;helper&#8221; (like shortcut) HTML (select element) &#8220;dropdown&#8221; options to optionally speed up the creation of the HTML code.  We realise this &#8220;flies in the face&#8221; of a basic belief we have that it is good to hand code your HTML to learn it better, but the real fact is that the quicker your success, the more you&#8217;ll want to try out other HTML ideas, and that makes these ideas worthwhile.  These HTML drop downs are structured to mandatorily have the &#8230;<\/p>\n<ul>\n<li>HTML element type &#8230; as for &lt;p&gt;&lt;\/p&gt; &#8230; mandatory &#8230; and optional, for properties like &#8230;<\/li>\n<li>id<\/li>\n<li>class<\/li>\n<li>title<\/li>\n<li>style<\/li>\n<li>src<\/li>\n<li>href<\/li>\n<li>value<\/li>\n<\/ul>\n<p> &#8230; as well as several other property combinations, presented in combination with the HTML type whether that is apt, or not.    Now, we may fix this perhaps, but we also see that it can serve a purpose to teach the HTML with trial and error thoughts as well.  We see &#8220;trial and error&#8221; as an incredibly important idea here.  Hand coding HTML by trial and error, sometimes, particularly in combination with a web browser Web Inspector product, are a potent mix to finding out how the client side of web applications work.  Pretty obviously, looking at books and search engine information, as a conduit to websites like <a target=_blank title='W3schools' href='http:\/\/w3schools.com'>W3schools<\/a> helps a lot too.<\/p>\n<p>Speaking of useful websites, we&#8217;d like to thank this <a target=-blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/7745867\/how-do-you-get-the-cursor-position-in-a-textarea'>really useful link<\/a> is helping us with our code for getting the cursor position and setting the cursor position, respectively via &#8230;<\/p>\n<p><code><br \/>\nfunction wherearewe(ota) {  \/\/ thanks to http:\/\/stackoverflow.com\/questions\/2897155\/get-cursor-position-in-characters-within-a-text-input-field<br \/>\n\/\/ Initialize<br \/>\n  var ipos = 0;<br \/>\n  if (document.selection) {  \/\/ IE Support<br \/>\n    \/\/ Set focus on the element<br \/>\n    ota.focus();<br \/>\n    \/\/ To get cursor position, get empty selection range<br \/>\n    var oselis = document.selection.createRange();<br \/>\n    \/\/ Move selection start to 0 position<br \/>\n    oselis.moveStart('character', -ota.value.length);<br \/>\n    \/\/ The caret position is selection length<br \/>\n    ipos = oselis.text.length;<br \/>\n  } else if (ota.selectionStart || ota.selectionStart == '0') { \/\/ Firefox support<br \/>\n    ipos = ota.selectionStart;<br \/>\n  }<br \/>\n  \/\/ Return results<br \/>\n  \/\/alert(ipos);<br \/>\n  return ipos;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; and &#8230;<\/p>\n<p><code><br \/>\nfunction setwherearewe(ota, wota) {  \/\/ thanks to http:\/\/stackoverflow.com\/questions\/2897155\/get-cursor-position-in-characters-within-a-text-input-field<br \/>\n  if (ota.setSelectionRange) {<br \/>\n      ota.setSelectionRange(wota, wota);<br \/>\n  } else if (ota.createTextRange) {<br \/>\n      var range = ota.createTextRange();<br \/>\n      range.collapse(true);<br \/>\n      range.moveEnd('character', wota);<br \/>\n      range.moveStart('character', wota);<br \/>\n      range.select();<br \/>\n  }<br \/>\n  \/\/ Return cursor position<br \/>\n  ota.focus();<br \/>\n  \/\/document.title=ota.value.length + ' vs ' + wota;<br \/>\n  return wota;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Today&#8217;s HTML and Javascript code you could call <a target=_blank title='do-away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-GETME'>do_away_with_the_boring_bits.html<\/a> changed in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-GETME'>this way<\/a> regarding textarea cursor functionality and can be seen in live action <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html'>here<\/a>, as it can for WordPress 4.1.1&#8217;s <a target=_blank title='Do It Yourself HTML Textarea Editor Cursor Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-cursor-tutorial\/'>Do It Yourself HTML Textarea Editor Cursor Tutorial<\/a>.<\/p>\n<hr>\n<p id='diyhpt'>Previous relevant <a target=_blank title='Do It Yourself HTML Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-primer-tutorial\/'>Do It Yourself HTML Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Do It Yourself HTML Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.JPG\" title=\"Do It Yourself Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Do It Yourself HTML Primer Tutorial<\/p><\/div>\n<p>It is because of yesterday&#8217;s generic <a target=_blank title='Google search of HTTP cookies' href='https:\/\/www.google.com.au\/search?q=HTTP+cookies&#038;rlz=1C1AOHY_enAU717AU717&#038;oq=HTTP+cookies&#038;aqs=chrome..69i57j0l5.2997j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>HTTP Cookie<\/a>  thoughts we had when we presented <a title='Job Search Grid Game Cookie Tutorial' href='#jsggct'>Job Search Grid Game Cookie Tutorial<\/a>, as shown below, that makes us feel okay using &#8220;Do It Yourself&#8221; in the blog posting title &#8220;Do It Yourself HTML Primer Tutorial&#8221;.  Without the use of cookies what we do today is probably not worth the bother because we &#8230;<\/p>\n<ul>\n<li>want to get you programming in HTML and Javascript and CSS, if you are curious, and have never done it before, and want to taste that incredible feeling programmers get when they &#8220;see something working&#8221; &#8230; so &#8230;<\/li>\n<li>we get you to draft up some HTML and Javascript and CSS in an HTML textarea element &#8230; <font size=1>and we&#8217;ll talk more about the limitations here later on<\/font> &#8230; <\/li>\n<li>click or tap the &#8220;Try your HTML and Javascript and CSS Above&#8221; button &#8230; then &#8230;<\/li>\n<ol>\n<li>see the results of your work to the right in a light blue area &#8230; and &#8230;<\/li>\n<li>notice up the top middle a new (and\/or updated) HTML (select element) dropdown with some datetime flagged previous &#8220;HTML Edit&#8221; sessions you can recall &#8230; that&#8217;s HTTP Cookie functionality at work<\/li>\n<\/ol>\n<\/ul>\n<p>The thing is about hand coded HTML, and we think you learn more by hand coding your HTML, at least in the early days, you are going to need a few goes at things to get things going, and yet, like most programmers, you&#8217;ll be curious to know &#8220;does it work yet<font size=1>?<\/font>&#8221; (<font size=1>sound familiar to &#8220;are we there yet?&#8221; to you?<\/font>), so remember those &#8220;worthwhile coming back to&#8221; datetime stamps, is our advice &#8230; <font size=1>gratuitous, as always?!<\/font><\/p>\n<p>Now about those restrictions to use.  Alas, within the web page &#8220;head&#8221; section &#8230; between &lt;head&gt; and &lt;\/head&gt; &#8230; the &#8230;<\/p>\n<ul>\n<li>good news is that all the CSS styling &#8230; between &lt;style&gt; and &lt;\/style&gt; &#8230; seems to be fine, but, alas, the &#8230;<\/li>\n<li>bad news is that the Javascript scripting &#8230;  between &lt;script type=&#8217;text\/javascript&#8217;&gt; and &lt;\/script&gt; &#8230; does not work, as of this first draft &#8230; not with code between &lt;script type=&#8217;text\/javascript&#8217;&gt; and &lt;\/script&gt; between &lt;body&gt; and &lt;\/body&gt; &#8230; but event logic defined within &lt;body&gt; and &lt;\/body&gt; such as <i>onclick=<\/i> works (but no &#8220;body onload please&#8221;, nor &#8220;body anything else&#8221; either &#8230; just plain straight &#8220;body&#8221; please)<\/li>\n<\/ul>\n<p>Be that as it may, you can still see a lot happening with this arrangement, and be like us, perhaps, still in wonder at that feeling of &#8220;look at that, it works!&#8221;.<\/p>\n<p>So, that&#8217;s the go, and you can try it out via this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" title=\"Click picture\">live run<\/a> link and\/or peruse the code behind this (just HTML and CSS and Javascript) &#8220;Do It Yourself HTML Editor&#8221; you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html_GETME\" title=\"do_away_with_the_boring_bits.html\">do_away_with_the_boring_bits.html<\/a> <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=t8iTZm8-mbA'>yourself<\/a>.<\/p>\n<hr>\n<p id='jsggct'>Previous relevant <a target=_blank title='Job Search Grid Game Cookie Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-cookie-tutorial\/'>Job Search Grid Game Cookie Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Job Search Grid Game Cookie Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game_cookies.JPG\" title=\"Job Search Grid Game Cookie Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Job Search Grid Game Cookie Tutorial<\/p><\/div>\n<p>Yesterday we got to a point with a web project we were working on called the &#8220;Job Search Grid Game&#8221; (and thanks here to <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 for the inspiration) and we ended up with a game that could use <a target=_blank title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>Content Management System<\/a> ideas whereby the user could control the content of the game.  Guess you might categorize this functionality as &#8220;personalization&#8221;.<\/p>\n<p>That &#8220;personalization&#8221; only lasted as long as that web browser session lasted, and there was no recourse to recall any of that user &#8220;personalized&#8221; game data settings again, but today we&#8217;ve started, by using this project as the &#8220;guinea pig&#8221; project to start down the road of seeing whether the use of <a target=_blank title='Google search of HTTP cookies' href='https:\/\/www.google.com.au\/search?q=HTTP+cookies&#038;rlz=1C1AOHY_enAU717AU717&#038;oq=HTTP+cookies&#038;aqs=chrome..69i57j0l5.2997j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>HTTP cookies<\/a> might assist to extend functionality for &#8230; <\/p>\n<ul>\n<li>only users who tailor their game via that &#8220;Management&#8221; link down the bottom of the game &#8230; and who &#8230;<\/li>\n<li>use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.htm\">new live run<\/a> link (rather than the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html\">old live run<\/a> link) &#8230; because there are checks to see that &#8230;<\/li>\n<li>functionality occurs if the calling HTML has code such as &lt;div id=dcookies_okay&gt;&lt;input type=hidden id=cookies_okay value=&#8221;&gt;&lt;\/input&gt;&lt;\/div&gt;<\/li>\n<\/ul>\n<p>We&#8217;ve tried thoughts that are quite &#8220;generic&#8221; by nature here, but we have to better monitor web browser cookie usage limits, as we go further down the road, but we &#8230;<\/p>\n<ul>\n<li>in a web browser address bar URL such as http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/<b>job_search_grid_game.htm<\/b> that <b>bold<\/b> part is combined with a reworked date and timestamp to be the &#8220;name&#8221; of the cookie &#8230; and only if &#8230;<\/li>\n<li>the web browser address bar URL must contain a &#8220;&amp;&#8221; to attract any attention as a candidate for the creation of a new cookie &#8230; which, if never encountered before &#8230;<\/li>\n<li>placed on a dropdown &#8220;cookie&#8221; list of game configurations that indicate the date and timestamp for reference purposes &#8230; and, as for all web browser scenarios &#8230;<\/li>\n<li>cookie logic only works while the user has not cleared the Browser History at their web browser<\/li>\n<\/ul>\n<p> &#8230; and that HTML (select element) dropdown is placed, in &#8220;overlay&#8221; style &#8230;<\/p>\n<ul>\n<li>position:absolute; top:0px ; left: 300px;<\/li>\n<li>opacity: 0.7;<\/li>\n<li>zIndex: 56;\n<\/li>\n<p> &#8230; the Javascript logic for which has been placed into some external Javascript you could call <a target=_blank title='cookie_get.js' href='http:\/\/www.rjmprogramming.com.au\/cookie_get.js_GETME'>cookie_get.js<\/a> that we are going to place at http:\/\/www.rjmprogramming.com.au\/ (document root) for maximal access purposes, and which is called by the <a target=_blank title='job_search_grid_game.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html_GETME'>job_search_grid_game.htm<\/a> via &#8230;<\/p>\n<p><code>&lt;script type='text\/javascript' src='..\/..\/..\/..\/cookie_get.js'&gt;&lt;\/script&gt;<\/code><\/p>\n<p> &#8230; which is like saying any webpage out from document root to four subfolder hierarchy could all access this external Javascript with the same codeline between &lt;head&gt; and &lt;\/head&gt; as above, and that external Javascript uses a <i>setTimeout<\/i> function call to separate its logic from any clashes with <i>document.body<\/i> onload event logic, or any jQuery document ready logic.<\/p>\n<p>Now the HTML and Javascript could be called <a target=_blank title='job_search_grid_game.htm' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html-GETME'>job_search_grid_game.htm<\/a> and changed from yesterday for HTTP Cookie functionality in <a target=_blank title='Changes' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html-GETME'>this way<\/a>.<\/p>\n<p>We hope you get something out of these &#8220;early days&#8221; HTTP Cookie thoughts, that we may apply to some of our <a target=_blank title='Game tutorials' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game'>game<\/a> web applications.<\/p>\n<hr>\n<p id='jsggt'>Previous relevant <a target=_blank title='Job Search Grid Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/job-search-grid-game-tutorial\/'>Job Search Grid Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Job Search Grid Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.JPG\" title=\"Job Search Grid Game Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Job Search Grid Game Tutorial<\/p><\/div>\n<p>We are always on the lookout for a good quiz or game.   But what if that idea is &#8220;sort of&#8221; &#8230; both?  Well, we just had to give the dog a bone!  <font size=1>But we digress.<\/font><\/p>\n<p>This is where we have to thank <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1 profusely.  This book is full of wonderful brain games that combine puzzle feels with game feel and quiz feel.  We normally like to shape a game based on another we stumble across, and add our own content, but, alas, the content here for today&#8217;s game is so good, it makes my brain hurt thinking of another set to make it work.  And that is where we &#8220;value add&#8221;.  Not with the &#8220;default content&#8221; of the game, but to value add to the experience we CMS it.  So what does &#8220;CMS it&#8221; mean?  Well, &#8220;CMS&#8221; stands for <a target=_blank title='Content Management System information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Content_management_system'>&#8220;Content Management System&#8221;<\/a>, and we use the principles of CMS to encapsulate all the variable aspects we can think of about this game &#8230; <font size=1>within reason<\/font> and present that in an HTML form &#8230;<\/p>\n<ul>\n<li>method=GET<\/li>\n<li>action=.\/job_search_grid_game.html<\/li>\n<\/ul>\n<p> &#8230; our usual &#8220;suspects&#8221; for such goings on.  So should the information not be too long, this should allow the user to set their own content for the game &#8230; <font size=1>all you young and old Einsteins out there<\/font>.<\/p>\n<p>However, if you find today&#8217;s <a target=_blank title='Live run' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html'>game<\/a> interesting and\/or stimulating, rest assured Helene Hovanec has filled a book full of puzzles and quizzes and challenges like this, and so we would recommend you get out there and buy <a target=_blank title='Science Puzzles for Young Einsteins by Helene Hovanec ISBN 0-8069-3542-1' href='https:\/\/books.google.com.au\/books?isbn=0806958499'>Science Puzzles for Young Einsteins<\/a> by Helene Hovanec ISBN 0-8069-3542-1.<\/p>\n<p>Within the HTML and Javascript <a target=_blank title='job_search_grid_game.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/job_search_grid_game.html_GETME'>job_search_grid_game.html<\/a> code you will find lots of calls to Javascript&#8217;s <a target=_blank title='Javascript eval information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/jsref_eval.asp'>eval<\/a> method to get a CMS job done, but not involve a serverside language &#8230; <font size=1>does not compute<\/font> &#8230; <font size=1>whatttevvvvvvvver<\/font>.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27663' onclick='var dv=document.getElementById(\"d27663\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27663' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27676' onclick='var dv=document.getElementById(\"d27676\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cookie\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27676' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27693' onclick='var dv=document.getElementById(\"d27693\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/editor\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27693' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27708' onclick='var dv=document.getElementById(\"d27708\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/editor\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27708' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27732' onclick='var dv=document.getElementById(\"d27732\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/shortcut\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27732' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27770' onclick='var dv=document.getElementById(\"d27770\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/css\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27770' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d27793' onclick='var dv=document.getElementById(\"d27793\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/php\/\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27793' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re introducing a &#8220;duck paddling fast underwater&#8221; but &#8220;who says you have to be the duck&#8221; aspect to our &#8220;Do It Yourself HTML Editor&#8221; today, adding onto the (blog posting) thread we left off yesterday with Do It Yourself HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/do-it-yourself-html-textarea-editor-post-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[216,1860,264,281,2127,344,360,367,1822,400,452,513,520,576,652,672,673,744,1812,1712,932,970,997,2128,1953,1141,1262,1319,1358,1404],"class_list":["post-27793","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-cms","tag-cookie","tag-cookies","tag-css","tag-cursor","tag-diy","tag-download","tag-dropdown","tag-editor","tag-event","tag-form","tag-google","tag-google-chrome","tag-html","tag-javascript","tag-key","tag-keyboard","tag-mamp","tag-onkeyup","tag-onsubmit","tag-php","tag-post","tag-programming","tag-pseudo-element","tag-selector","tag-shortcut","tag-textarea","tag-tutorial","tag-validation","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27793"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=27793"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27793\/revisions"}],"predecessor-version":[{"id":29879,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27793\/revisions\/29879"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}