{"id":49519,"date":"2020-07-01T03:01:59","date_gmt":"2020-06-30T17:01:59","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49519"},"modified":"2020-06-30T19:38:47","modified_gmt":"2020-06-30T09:38:47","slug":"inhouse-css-pseudo-element-co-ordinate-hover-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-hover-tutorial\/","title":{"rendered":"Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements_long_hover.jpg\" title=\"Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial<\/p><\/div>\n<p>Today&#8217;s progress on top of yesterday&#8217;s <a title='Inhouse CSS Pseudo Element Co-ordinate Tutorial' href='#icsspec-t'>Inhouse CSS Pseudo Element Co-ordinate Tutorial<\/a> &#8220;proof of concept&#8221; feeling work is to allow non-mobile platforms respond to &#8220;the hover&#8221; (ie. Javascript) onmouseover event.<\/p>\n<p>We decide to allow a brief &#8220;preview&#8221; of what a click might do, as the new functionality that an onmouseover event might bring about.<\/p>\n<p>This doesn&#8217;t sound like a &#8220;too involved&#8221; change, but it does when you overreach with ambition, because the recursive possibilities (if too open with the allowances in the code) just have &#8220;overreach&#8221; written all over them.  But &#8230;<\/p>\n<ul>\n<li>set that Javascript var<font size=1>iable<\/font> theone to only be <i>true<\/i> (and so only think about the element clicked or hovered over, only) &#8230; and &#8230;<\/li>\n<li>bring in the non-mobile &#8220;onmouseout&#8221; event (logic) &#8230;<br \/>\n<code><br \/>\n function lookformout(divo, theone) {<br \/>\n   if (myh3) {<br \/>\n       myh3.innerHTML=myh3ih + '';<br \/>\n   }<br \/>\n   if (!theone) {<br \/>\n   if (moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', false, false)\") != -1) {<br \/>\n   moarr[moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', false, false)\")]=moarr[moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', false, false)\")].replace(', false)',', true)');<br \/>\n   } else if (moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', true, false)\") != -1) {<br \/>\n   moarr[moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', true, false)\")]=moarr[moarr.indexOf(\"lookforinhousestyle('\" + divo.id + \"', true, false)\")].replace(', false)',', true)');<br \/>\n   } else {<br \/>\n   document.title=\"?\";<br \/>\n   }<br \/>\n   }<br \/>\n }<br \/>\n<\/code><br \/>\n &#8230; to knock out the previous &#8220;onmouseover&#8221; event (&#8220;long hover&#8221; logic) &#8230;<br \/>\n<code><br \/>\n function lookformo(divo, theone) {<br \/>\n   if (myh3) {<br \/>\n       myh3.innerHTML=myh3ih + ' ... long hover';<br \/>\n   }<br \/>\n   if (!theone) {<br \/>\n   moarr.push(\"lookforinhousestyle('\" + divo.id + \"', false, false)\");<br \/>\n   setTimeout(\"lookforinhousestyle('\" + divo.id + \"', false, false)\",2000);<br \/>\n   } else {<br \/>\n   moarr.push(\"lookforinhousestyle('\" + divo.id + \"', true, false)\");<br \/>\n   setTimeout(\"lookforinhousestyle('\" + divo.id + \"', true, false)\",2000);<br \/>\n   }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; and you have, in our opinion, a more manageable (albeit less ambitious) inhouse CSS pseudo element (:andbelow or :andabove or :andleft or :andright) set of functionalities (for you) to try.<\/p>\n<p>The changed scenario involves &#8230;<\/p>\n<ul>\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.js-GETME\" title=\"inhouse_pseudo_elements.js\">a changed<\/a> 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.htm\" title=\"Click picture\">web application<\/a> &#8230;<br \/>\n<iframe style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/inhouse_pseudo_elements.htm\" title=\"Click picture\"><\/iframe>\n<\/li>\n<\/ul>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-hover-tutorial\/'>Inhouse CSS Pseudo Element Co-ordinate Hover Tutorial<\/a>.<\/p-->\n<hr>\n<p id='icsspec-t'>Previous relevant <a target=_blank title='Inhouse CSS Pseudo Element Co-ordinate Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-tutorial\/'>Inhouse CSS Pseudo Element Co-ordinate 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\/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<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='#d49519' onclick='var dv=document.getElementById(\"d49519\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onmouseover\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49519' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today&#8217;s progress on top of yesterday&#8217;s Inhouse CSS Pseudo Element Co-ordinate Tutorial &#8220;proof of concept&#8221; feeling work is to allow non-mobile platforms respond to &#8220;the hover&#8221; (ie. Javascript) onmouseover event. We decide to allow a brief &#8220;preview&#8221; of what a &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/inhouse-css-pseudo-element-co-ordinate-hover-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,1608,576,652,3272,3000,861,1661,871,2134,997,1986,2128,3347,1209,1212,1319],"class_list":["post-49519","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-hover","tag-html","tag-javascript","tag-left","tag-long-hover","tag-onclick","tag-onmouseout","tag-onmouseover","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\/49519"}],"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=49519"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49519\/revisions"}],"predecessor-version":[{"id":49533,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49519\/revisions\/49533"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49519"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49519"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}