{"id":49511,"date":"2020-06-30T03:01:15","date_gmt":"2020-06-29T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49511"},"modified":"2020-06-30T17:02:54","modified_gmt":"2020-06-30T07:02:54","slug":"inhouse-css-pseudo-element-co-ordinate-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-tutorial\/","title":{"rendered":"Inhouse CSS Pseudo Element Co-ordinate Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Inhouse CSS Pseudo Element Co-ordinate Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.jpg\" title=\"Inhouse CSS Pseudo Element Co-ordinate Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Inhouse CSS Pseudo Element Co-ordinate Tutorial<\/p><\/div>\n<p>We&#8217;re looking further into the &#8230;<\/p>\n<p><code><br \/>\nInhouse CSS Pseudo Element (:andbelow ... and today adding :andleft :andabove :andright) co-ordinate styling<br \/>\n<\/code> <\/p>\n<p> &#8230; ideas we started with yesterday&#8217;s <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/haiku-animated-gif-creator-tutorial\/' title='Haiku Animated Gif Creator Tutorial'>Haiku Animated Gif Creator Tutorial<\/a>.<\/p>\n<p>Going into more practicalities here we found that if we involved inherited (ie. created HTML elements due to the clicking of these inhouse CSS pseudo-element element(s)) elements it started getting too complex to allow any one element have its &#8220;onclick&#8221; logic happen more than the once.  Otherwise, we wrote a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.htm\" title=\"Click picture\">web application<\/a> whereby you can click HTML div elements labelled with one of those &#8230;<\/p>\n<ul>\n<li>:andbelow<\/li>\n<li>:andleft<\/li>\n<li>:andabove<\/li>\n<li>:andright<\/li>\n<\/ul>\n<p> &#8230; and it will change the colour (via an HTML div overlay) of the relevant adjacent part of the webpage styling, as clicked.<\/p>\n<p>As we said yesterday &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/haiku-animated-gif-creator-tutorial\/'><p>\n &#8230; for our new &#8220;inhouse&#8221; CSS pseudo-element &#8220;:andbelow&#8221; to introduce a co-ordinate based CSS usage into play, combining CSS <font color=green><a target=_blank title='CSS calc' href='https:\/\/www.htmlgoodies.com\/html5\/css\/using-the-css3-calc-function.html' style='color:green;'>calc<\/a><\/font> and Javascript <font color=purple><a target=_blank title='Javascript getBoundingClientRect method information from Mozilla' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/getBoundingClientRect' style='color:purple;'>getBoundingClientRect<\/a><\/font>, in order to be able to place a colour (HTML div element) overlay below a &#8220;line&#8221;, that being an HTML hr element (as our way to differentiate user interactive input above from the resultant animated GIF created below), in our case today.\n<\/p><\/blockquote>\n<p> &#8230; the hybrid CSS calc and Javascript getBoundingClientRect combination can introduce new positional (or co-ordinate) based CSS styling functionality.  Its generic feeling had us creating &#8230;<\/p>\n<ul>\n<li>an external Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.js_GETME\" title=\"inhouse_pseudo_elements.js\">inhouse_pseudo_elements.js<\/a> used by &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.html-GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.html-GETME\" title=\"inhouse_pseudo_elements.htm\">inhouse_pseudo_elements.htm<\/a> &#8230; in that final &#8230;<\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.html\" title=\"Click picture\">(onclick only) web application<\/a> &#8230;<br \/>\n<iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.html\" title=\"Click picture\"><\/iframe>\n<\/li>\n<\/ul>\n<p> &#8230; we&#8217;d like you to consider trying out, and feel free to send us feedback regarding.<\/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='#d49511' onclick='var dv=document.getElementById(\"d49511\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/pseudo-element\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49511' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re looking further into the &#8230; Inhouse CSS Pseudo Element (:andbelow &#8230; and today adding :andleft :andabove :andright) co-ordinate styling &#8230; ideas we started with yesterday&#8217;s Haiku Animated Gif Creator Tutorial. Going into more practicalities here we found that if &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-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":[2149,3346,211,1707,281,576,652,3272,861,2134,997,1986,2128,3347,1209,1212,1319],"class_list":["post-49511","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-above","tag-below","tag-click","tag-co-ordinates","tag-css","tag-html","tag-javascript","tag-left","tag-onclick","tag-place","tag-programming","tag-proof-of-concept","tag-pseudo-element","tag-right","tag-style","tag-styling","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49511"}],"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=49511"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49511\/revisions"}],"predecessor-version":[{"id":49518,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49511\/revisions\/49518"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}