{"id":35811,"date":"2018-01-31T03:01:31","date_gmt":"2018-01-30T17:01:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=35811"},"modified":"2018-01-30T18:44:10","modified_gmt":"2018-01-30T08:44:10","slug":"column-intelligence-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-primer-tutorial\/","title":{"rendered":"Column Intelligence Primer Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>Newspapers work as a media source largely because of their column format. It is no coincidence newspapers got this format, if you research typesetting. In the online world, presentation formats have more possibilities and varieties than newspapers presented, but that &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-primer-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,281,327,576,652,2020,2300,876,997,1917,1319,2453],"class_list":["post-35811","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-background","tag-background-image","tag-column","tag-css","tag-did-you-know","tag-html","tag-javascript","tag-linear-gradient","tag-newspaper","tag-opacity","tag-programming","tag-scroll","tag-tutorial","tag-typesetiing"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35811"}],"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=35811"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35811\/revisions"}],"predecessor-version":[{"id":35816,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/35811\/revisions\/35816"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=35811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=35811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=35811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}