{"id":35727,"date":"2018-01-27T03:01:23","date_gmt":"2018-01-26T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35727"},"modified":"2018-01-26T12:06:28","modified_gmt":"2018-01-26T02:06:28","slug":"html-div-versus-hr-contenteditable-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-contenteditable-tutorial\/","title":{"rendered":"HTML div Versus hr Contenteditable Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Versus hr Contenteditable Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr_contenteditable.jpg\" title=\"HTML div Versus hr Contenteditable Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Versus hr Contenteditable Tutorial<\/p><\/div>\n<p>Sometimes, just because the look of a web application changes very little, doesn&#8217;t mean there aren&#8217;t quite big rearrangements underneath to allow for a new piece of functionality.  Sometimes, with web applications, we like &#8220;seamlessness&#8221;, or the more cruel might say &#8220;nga nga, nga nga, nga &#8230; you forgot that detail didn&#8217;t you&#8221;?!   Well, both have credence today, but, anyway, we like the end result better, and that is the main thing.<\/p>\n<p>Remember, recently (with blog postings in post thread of <a target=_blank title='HTML Editing via Textarea and Div Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-editing-via-textarea-and-div-primer-tutorial\/'>HTML Editing via Textarea and Div Primer Tutorial<\/a>), we talked for the first time about the great <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute that can turn an HTML div element, that was &#8220;just there for reporting&#8221; into an HTML div element <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=E3rB_qx0wRM'>that is so much more<\/a>.  Might be hard to imagine if you&#8217;ve never tried that in action, but &#8230;<\/p>\n<ul>\n<li>a &#8220;flat&#8221; display only HTML element (that when you click on, allows for copy\/paste of textual data) &#8230; dynamically can still be capable of that, but can also &#8230;<\/li>\n<li>be an HTML textual element that shows a cursor when you click in it (like a textarea or input type=text element) and that you can change the contents of, and so becomes an element where the <a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'><i>onfocus<\/i><\/a> and <a target=_blank title='Event onblur information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onblur.asp'><i>onblur<\/i><\/a> and <a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'><i>onchange<\/i><\/a> events can dynamically become relevant &#8230; all under the auspices of the use of <a target=_blank title='HTML Global attribute contenteditable information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=&#8221;true&#8221; global HTML attribute &#8230; set via Javascript code such as &#8230;<br \/>\n<code><br \/>\ndocument.getElementById('eId').<a target=_blank title='Javascript setAttribute method information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/met_element_setattribute.asp'>setAttribute<\/a>('contenteditable','true');<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; so that yesterday&#8217;s <a title='HTML div Versus hr Primer Tutorial' href='#htmlvpt'>HTML div Versus hr Primer Tutorial<\/a> look is very much still the go, barring some cosmetic &#8220;flagging&#8221; nuances, with the look of our changed &#8220;No Content Bordered DIV versus HR CSS Border Tool&#8221; web application.  Underneath, though, there are heaps more possibilities for those more adventurous users to change the (now editable) <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property in those two (now clickable) &lt;-HTML-&gt; (becomes &lt;=HTML=&gt;) &#8220;flagged&#8221; table cells.  You could even add your own dynamic event logic (eg. <i> onclick=&#8221;alert(&#8216;Act now!&#8217;);&#8221; <\/i> types of changes) to those two &lt;-Visual-&gt; HTML div and hr elements.<\/p>\n<p>Why not retry this tool yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and bits of CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html-GETME\">nocontent_bordered_div_vs_hr.html<\/a> that got changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html-GETME\">this way<\/a> for &#8220;contenteditable&#8221; functionality?<\/p>\n<hr>\n<p id='htmlvpt'>Previous relevant <a target=_blank title='HTML div Versus hr Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-primer-tutorial\/'>HTML div Versus hr 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\/nocontent_bordered_div_vs_hr.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML div Versus hr Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.jpg\" title=\"HTML div Versus hr Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML div Versus hr Primer Tutorial<\/p><\/div>\n<p>Today&#8217;s new web application is a CSS styling &#8220;tool&#8221; (at least we&#8217;d like to think) but written predominantly via HTML and Javascript &#8230; go figure &#8230; but yes, it makes sense a bit, that to show CSS &#8220;in action&#8221; so to speak, you&#8217;d want an &#8220;actor&#8221; like Javascript, DOM in particular, is.<\/p>\n<p>As a matter of fact (and you may want to pre-read <a target=_blank title='Weather API via Iframe jQuery Ajax Map Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/weather-api-via-iframe-jquery-ajax-map-tutorial\/'>Weather API via Iframe jQuery Ajax Map Tutorial<\/a>, for the &#8220;-&#8221; sign goes to &#8220;capital letter&#8221; (ditty) thinking that gets used around here, if all this interests you), there are only a few things to do with &#8230;<\/p>\n<ul>\n<li>CSS styling &#8230; that &#8230;<\/li>\n<li>Javascript DOM &#8230; can&#8217;t simulate<\/li>\n<\/ul>\n<p> &#8230; and the &#8220;venn diagram&#8221; look of that non-intersecting part is eaten into further if you include jQuery syntaxes like &#8230;<\/p>\n<ul>\n<li>$(&#8220;#[html-element-id]&#8221;).<a target=_blank title='jQuery css method information from w3schools' href='https:\/\/www.w3schools.com\/jquery\/jquery_css.asp'>css<\/a>(&#8220;[attribute]&#8221;, &#8220;[value]&#8221;); \/\/ as talked about at <a target=_blank title='Javascript Zoom and Translate Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-zoom-and-translate-primer-tutorial'>Javascript Zoom and Translate Primer Tutorial<\/a><\/li>\n<li>$(&#8216;#messages li:nth-child(odd)&#8217;).css(&#8216;background-color&#8217;, $(&#8216;#imyc&#8217;).val()); \/\/ as talked about at <a target=_blank title='Socket.IO Node.js Chat Application Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/socket-io-node-js-chat-application-primer-tutorial\/'>Socket.IO Node.js Chat Application Primer Tutorial<\/a><\/li>\n<\/ul>\n<p>The reason we are here now discussing this is that yesterday&#8217;s <a target=_blank title='PHP Sun Information Software Integration Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-sun-information-software-integration-tutorial\/'>PHP Sun Information Software Integration Tutorial<\/a> &#8220;shenanigans&#8221; (making the sun diagram get a white background rather than a pink one <font size=1>&#8230; as you would now, possums &#8230;<\/font>) got me stumbling (<font size=1>though &#8220;stumbelling&#8221; sounds better<\/font>) onto an accident (<font size=1>just waiting to happen<\/font>) &#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/>&#8230;<br \/> &#8230; with me changing a &#8220;pink&#8221; background colour for a pink border colour (<font size=1>&#8230; as you would now, <strike>possums<\/strike>squirrels &#8230;<\/font>) in a &#8230;. (<font size=1>da da da da<\/font>) &#8230; HTML div element, and it came out looking like a pink line, and there &#8230;. (<font size=1>in the &#8230; but we digress<\/font>) &#8230; it occurred to us that &#8230; (<font size=1>do be do be do<\/font>) &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content &#8230; can be a lot like &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p>So we wrote an HTML and Javascript (and bits of CSS) &#8220;tool&#8221; to show that, and we realized that &#8230;<\/p>\n<ul>\n<li>presenting the Javascript DOM HTML element property <a target=_blank title='HTML outerHTML property information' href='http:\/\/help.dottoro.com\/ljloliex.php'><i>outerHTML<\/i><\/a> property of those &#8220;div&#8221; and &#8220;hr&#8221; elements could be quite constructive &#8230; as the &lt;-HTML-&gt; &#8220;partner&#8221; to &#8230;<\/li>\n<li>presenting the &#8220;div&#8221; and &#8220;hr&#8221; elements themselves, the look of which is controlled by you, the user <font size=1>&#8230; yes, you &#8230;<\/font> &#8230; as the &lt;-Visual-&gt; &#8220;partner&#8221;<\/li>\n<\/ul>\n<p> &#8230; those two &#8220;partners&#8221; being a very familiar sight to bloggers and users of many a <a target=_blank title='Content Management System' href='http:\/\/en.wikipedia.org\/wiki\/Content_management_system'>CMS<\/a> (Content Management System).<\/p>\n<p>Some of the CSS <a target=_blank href='https:\/\/www.w3schools.com\/cssref\/pr_border-style.asp' title='CSS border-style property information from w3schools'>border-style<\/a> properties are really snazzy, and somehow being able to compare the &#8230;<\/p>\n<ul>\n<li>HTML div elements with a border and no content initially, but you <font size=1>&#8230; yes, you &#8230;<\/font> can add content dynamically (via an HTML textarea element) &#8230; compared to (or perhaps matching the look of via the &#8220;generic&#8221; user controls further up the HTML element editing &#8220;table&#8221; of this web application) &#8230; to the &#8230;<\/li>\n<li>HTML hr (horizontal rule) element<\/li>\n<\/ul>\n<p> &#8230; got our styling creative juices going <font size=1>&#8230; damn! &#8230; orange juice again!<\/font><\/p>\n<p>Why not try this tool yourself with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html\" title=\"Click picture\">live run<\/a> link with underlying HTML and Javascript and bits of CSS as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/nocontent_bordered_div_vs_hr.html_GETME\">nocontent_bordered_div_vs_hr.html<\/a> that is downloadable as usual?<\/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='#d35700' onclick='var dv=document.getElementById(\"d35700\"); 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='d35700' 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='#d35727' onclick='var dv=document.getElementById(\"d35727\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/contenteditable\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35727' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes, just because the look of a web application changes very little, doesn&#8217;t mean there aren&#8217;t quite big rearrangements underneath to allow for a new piece of functionality. Sometimes, with web applications, we like &#8220;seamlessness&#8221;, or the more cruel might &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-contenteditable-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":[161,2442,281,342,354,576,652,860,1631,2077,1861,997,1212,1238,2005,1319,1891],"class_list":["post-35727","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-border","tag-contenteditable","tag-css","tag-div","tag-dom","tag-html","tag-javascript","tag-onblur","tag-onchange","tag-onfocus","tag-outerhtml","tag-programming","tag-styling","tag-table","tag-tool","tag-tutorial","tag-user"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35727"}],"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=35727"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35727\/revisions"}],"predecessor-version":[{"id":35738,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35727\/revisions\/35738"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}