{"id":35859,"date":"2018-02-10T03:01:08","date_gmt":"2018-02-09T17:01:08","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35859"},"modified":"2018-03-16T18:01:56","modified_gmt":"2018-03-16T08:01:56","slug":"column-intelligence-editing-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-editing-tutorial\/","title":{"rendered":"Column Intelligence Editing Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backgroundattachment.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Column Intelligence Editing Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/backgroundattachment.jpg\" title=\"Column Intelligence Editing Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Column Intelligence Editing Tutorial<\/p><\/div>\n<p>Lately we&#8217;ve been excited about various ways to use the <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 to turn HTML &#8220;display&#8221; elements into &#8220;that and more&#8221;, in other words &#8220;display and edit&#8221; elements.  Fast forward to a couple of days back with <a title='Column Intelligence Float Tutorial' href='#cift'>Column Intelligence Float Tutorial<\/a> and we find ourselves at a point where we&#8217;d like the user to be able to edit the content of their &#8220;online newspaper <i>that scrolls and floats<\/i>&#8221; we, naturally, were pretty keen to involve that <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; idea, but it is a salutary lesson that all things new are not always the apt solution.  Reread <a target=_blank title='HTML Div Overlay Jigsaw Talents Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-overlay-jigsaw-talents-primer-tutorial\/'>HTML Div Overlay Jigsaw Talents Primer Tutorial<\/a> and you&#8217;ll see where we started out on our journey down the analysis and comparison of HTML &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'><b>textarea<\/b><\/a><\/li>\n<\/ul>\n<p> &#8230; elements, and it just so happens that the concept 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 muddies the water a little (but not entirely), allowing for the HTML div elements be &#8220;editors&#8221;, as we did with <a target=_blank title='HTML div Versus hr Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-contenteditable-tutorial\/'>HTML div Versus hr Contenteditable Tutorial<\/a>, but the facts remain, on analyzing the scenario for the case at hand it was better not to turn the HTML div elements of the newspaper into editable elements, because they are there as display elements, and we need to add in more elements (as we did with <a target=_blank title='HTML div Versus hr Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-div-versus-hr-contenteditable-tutorial\/'>HTML div Versus hr Contenteditable Tutorial<\/a>&#8216;s table&#8217;s extra row&#8217;s set of two new cells (td element)), and those new elements may as well be <a target=_blank title='HTML textarea information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_textarea.asp'><b>textarea<\/b><\/a> elements that remain uniquely &#8220;talented&#8221; to allow &lt; and &gt; in their content.  On the other hand, if some colour coding was required we might consider using HTML div and map the &lt; and &gt; of the content to &amp;lt; and &amp;gt; for content editing purposes.<\/p>\n<p>To add this new functionality today, we involve &#8230;<\/p>\n<ul>\n<li>hashtag navigation (within the same web page) &#8230; and &#8230;<\/li>\n<li>new emojis (which we hope are self explanatory themselves as to what functionality they point at)<\/li>\n<\/ul>\n<p>Which brings us to today&#8217;s HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.htm\" title=\"Click picture\">live run<\/a> link that has underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html--GETME\" title=\"backgroundattachment.html\">backgroundattachment.html<\/a> changed from yesterday&#8217;s work in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html--GETME\" title=\"backgroundattachment.html\">this way<\/a>.  We hope you try editing your online newspaper yourself.<\/p>\n<hr>\n<p id='cift'>Previous relevant <a target=_blank title='Column Intelligence Float Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-float-tutorial\/'>Column Intelligence Float 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\/background_attachment.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Column Intelligence Float Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.png\" title=\"Column Intelligence Float Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Column Intelligence Float Tutorial<\/p><\/div>\n<p>If yesterday&#8217;s <a title='Column Intelligence Primer Tutorial' href='#cipt'>Column Intelligence Primer Tutorial<\/a> started us out on a project for online newspaper looking web page, it got the concept of &#8220;columns&#8221; look started, but lacked that &#8220;real world&#8221; newspaper &#8220;column look&#8221; where columns don&#8217;t just have uninterrupted textual data in paragraphs, they have &#8230;<\/p>\n<ul>\n<li>image data &#8230; and ala <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=xaBEFqFVSE8'>Harry Potter<\/a> &#8230; because we are online &#8230; we add &#8230;<\/li>\n<li>animated or video data &#8230; in an HTML iframe element<\/li>\n<\/ul>\n<p> &#8230; and the main &#8220;word&#8221; to describe the methodology behind this is &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='CSS float property information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_float.asp'>float<\/a>:[none]\/left\/right\/both\/inherit<br \/>\n<\/code><\/p>\n<p>That&#8217;s an oversimplification, of course, but it is a good word to have in mind researching on the search engines.  We came across a couple of really great online resources for the research on this topic, namely &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/19179424\/how-to-wrap-text-around-an-image-using-html-css'>How to wrap text around an image using HTML\/CSS &#8211; Stack Overflow<\/a><\/li>\n<li><a target=_blank title='Another useful link, thanks' href='https:\/\/drafts.csswg.org\/css-shapes\/'>CSS Shapes Module Level 1<\/a><\/li>\n<\/ul>\n<p> &#8230; both of which helped get to some new CSS styling to use getting text to wrap around images and animations &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.oval {<br \/>\n  width: 100px;<br \/>\n  height: 62px;<br \/>\n  color: #111;<br \/>\n  border-radius: 50%;<br \/>\n  text-align: center;<br \/>\n  font-size: 20px;<br \/>\n  float: left;<br \/>\n  shape-outside: ellipse();<br \/>\n  padding: 10px;<br \/>\n  background-color: MediumPurple;<br \/>\n  background-clip: content-box;<br \/>\n}<br \/>\n<br \/>\n.circle {<br \/>\n  width: 100px;<br \/>\n  height: 62px;<br \/>\n  color: #111;<br \/>\n  border-radius: 50%;<br \/>\n  text-align: center;<br \/>\n  font-size: 20px;<br \/>\n  float: right;<br \/>\n  shape-outside: circle();<br \/>\n  padding: 10px;<br \/>\n  background-color: MediumPurple;<br \/>\n  background-clip: content-box;<br \/>\n}<br \/>\n<br \/>\n.polygon {<br \/>\n  width: 100px;<br \/>\n  height: 62px;<br \/>\n  color: #111;<br \/>\n  border-radius: 50%;<br \/>\n  text-align: center;<br \/>\n  font-size: 20px;<br \/>\n  float: right;<br \/>\n  shape-outside: polygon(0 0, 100% 100%, 0 100%);<br \/>\n  padding: 10px;<br \/>\n  background-color: MediumPurple;<br \/>\n  background-clip: content-box;<br \/>\n}<br \/>\n<br \/>\nspan {<br \/>\n  padding-top: 12px;<br \/>\n  display: inline-block;<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; used in the new HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.htm\" title=\"Click picture\">live run<\/a> link that has underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html-GETME\" title=\"background_attachment.htm\">background_attachment.htm<\/a> changed from yesterday&#8217;s work in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html-GETME\" title=\"background_attachment.htm\">this way<\/a>.  We hope you try it out for yourself.<\/p>\n<hr>\n<p id='cipt'>Previous relevant <a target=_blank title='Column Intelligence Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-primer-tutorial\/'>Column Intelligence 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\/background_attachment.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Interesting Places Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.jpg\" title=\"Column Intelligence Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Column Intelligence Primer Tutorial<\/p><\/div>\n<p>Newspapers work as a media source largely because of their column format.  It is no coincidence newspapers got this format, if you research <a target=_blank title='Typesetting information from Wikipedia, thanks' href='https:\/\/graphicdesign.stackexchange.com\/questions\/3553\/why-do-newspapers-use-multiple-columns'>typesetting<\/a>.<\/p>\n<p>In the online world, presentation formats have more possibilities and varieties than newspapers presented, but that doesn&#8217;t mean &#8220;newspaper column&#8221; or &#8220;newspaper column <i>with intelligence<\/i>&#8221; can&#8217;t be options for the design of online web pages.   Today, we tip our toes in the waters of this topic by creating an HTML and CSS and Javascript web application with &#8230;<\/p>\n<ul>\n<li>an HTML div element nesting &#8230;<\/li>\n<li>three HTML div elements placed to the left, in the middle, and to the right &#8230; our 3 (newspaper) columns &#8230; except that &#8230;<\/li>\n<\/ul>\n<p> &#8230; intelligence to scroll the (newspaper) column content made up of <\/p>\n<ol>\n<li>text &#8230; and &#8230;<\/li>\n<li>background image<\/li>\n<\/ol>\n<p> &#8230; is scrollable, relative to each other, in three different ways, namely &#8230;<\/p>\n<ul>\n<li>style=&#8221; <a target=_blank title='CSS background-attachment property information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-attachment.asp'>background-attachment<\/a>: fixed; &#8221; &#8230; text, only, moves as you scroll, and the (first of the) background imagery&#8217;s top\/left is the web page&#8217;s top\/left<\/li>\n<li>style=&#8221; background-attachment: local; &#8221; &#8230; both, above, move together as you scroll &#8230; new with CSS3<\/li>\n<li>style=&#8221; background-attachment: scroll; &#8221; &#8230; text, only, moves as you scroll, and the (first of the) background imagery&#8217;s top\/left is the styled element&#8217;s top\/left<\/li>\n<\/ul>\n<p>You can try this out with our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html\" title=\"Click picture\">live run<\/a> link that has underlying HTML and CSS and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/background_attachment.html_GETME\" title=\"background_attachment.html\">background_attachment.html<\/a>.<\/p>\n<p><b><i>Did You Know?<\/i><\/b><\/p>\n<p>We&#8217;re having a purple patch regarding &#8220;old chestnut&#8221; cracking!  Today&#8217;s is that wish to apply opacity <i>just<\/i> to background image, but not the corresponding textual data (or other types) that is the primary content of that HTML element.   How to do?  Well, we were lucky enough to stumble upon the wonderful <b>additional styling<\/b> advice from this <a target=_blank title='Great link' href='https:\/\/stackoverflow.com\/questions\/7241341\/can-i-set-an-opacity-only-to-the-background-image-of-a-div'>stupendous webpage<\/a>, thanks, regarding the CSS styling (example) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n#left { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: fixed; }<\/p>\n<p>#middle { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: local; }<\/p>\n<p>#right { \/\/ background-color: #661715;<br \/>\n       background-image: <b>linear-gradient(rgba(255,255,255,0.4),rgba(255,255,255,0.4)),<\/b> url('http:\/\/www.rjmprogramming.com.au\/Welcome_files\/shapeimage_1a.png');<br \/>\n       background-repeat: repeat;<br \/>\n       background-position: top left;<br \/>\n       background-attachment: scroll; }<br \/>\np { opacity: 1.0; }<br \/>\nh3 { opacity: 1.0; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/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='#d35811' onclick='var dv=document.getElementById(\"d35811\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/scrolling\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35811' 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='#d35832' onclick='var dv=document.getElementById(\"d35832\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/float\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35832' 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='#d35859' onclick='var dv=document.getElementById(\"d35859\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/editing\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d35859' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Lately we&#8217;ve been excited about various ways to use the contenteditable=&#8221;true&#8221; global HTML attribute to turn HTML &#8220;display&#8221; elements into &#8220;that and more&#8221;, in other words &#8220;display and edit&#8221; elements. Fast forward to a couple of days back with Column &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-editing-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,37],"tags":[126,127,230,2442,281,327,342,2457,446,2456,576,652,2020,2300,876,997,1917,1262,1319,2454],"class_list":["post-35859","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-column","tag-contenteditable","tag-css","tag-did-you-know","tag-div","tag-editing","tag-float","tag-harry-potter","tag-html","tag-javascript","tag-linear-gradient","tag-newspaper","tag-opacity","tag-programming","tag-scroll","tag-textarea","tag-tutorial","tag-typesetting"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35859"}],"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=35859"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35859\/revisions"}],"predecessor-version":[{"id":36868,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35859\/revisions\/36868"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}