{"id":56354,"date":"2022-07-15T03:01:34","date_gmt":"2022-07-14T17:01:34","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56354"},"modified":"2022-07-14T20:56:14","modified_gmt":"2022-07-14T10:56:14","slug":"select-element-onmouseout-focus-control-to-nowhere-annoyance-solution-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/select-element-onmouseout-focus-control-to-nowhere-annoyance-solution-tutorial\/","title":{"rendered":"Select Element Onmouseout Focus Control to Nowhere Annoyance Solution Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Select Element Onmouseout Focus Control to Nowhere Annoyance Solution Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/select_element_onmouseout_focus_control_to_nowhere_annoyance_solution.gif\" title=\"WordPress Custom Fields Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Select Element Onmouseout Focus Control to Nowhere Annoyance Solution Tutorial<\/p><\/div>\n<p>We could so easily have called today&#8217;s tutorial &#8230;<\/p>\n<ul>\n<li>WordPress Custom Fields Focus Issue Tutorial &#8230; or &#8230;<\/li>\n<li>Select Element Focus to Nowhere Primer Tutorial &#8230; or &#8230;<\/li>\n<li>Non-mobile Focus Control Primer Tutorial &#8230; or &#8230;<\/li>\n<li>Non-mobile Onmouseout versus Onlosefocus Event Tutorial &#8230; but eventually settled on &#8230;<\/li>\n<li>Select Element Onmouseout Focus Control to Nowhere Annoyance Solution Tutorial<\/li>\n<\/ul>\n<p> &#8230; because the &#8220;very specialized&#8221; annoyance left by <a title='WordPress Custom Fields Primer Tutorial' href='#wpcfpt'>WordPress Custom Fields Primer Tutorial<\/a> code we have finally addressed, today, the symptoms being &#8230;<\/p>\n<ul>\n<li>a user clicks the select (size=1) Custom Fields inspired &#8220;glowing&#8221; dropdown &#8230; and &#8230;<\/li>\n<li>it &#8220;expands&#8221; to reveal extra webpages that can be visited in a new webpage &#8230; but you &#8230;<\/li>\n<li>the user decides not to navigate to any of these dropdown offerings and so you click elsewhere in the webpage (not in the search textbox, though you can if you prefer, but the issue is not with this action) &#8230; we think &#8230;<\/li>\n<li>the user should be immediately able to scroll up or down the webpage, but, before these changes, they got stuck not being able to do this, instead needing to first use the keyboard to tab out of a textbox, before being able to scroll<\/li>\n<\/ul>\n<p> &#8230; obviously deserves a very long and convoluted blog posting title<font size=1>, now doesn&#8217;t it?<\/font><\/p>\n<p>Annoying, not bad, but, annoying.  What we do here is often to put off such minor annoyances, but as we have noted before, it is often these mildly annoying scenarios, taken seriously, and taken through to their conclusion (or closer to their conclusion), that can teach us quite a bit about Javascript event workings.<\/p>\n<p>We&#8217;ve jotted down stand out points from today&#8217;s resolution to this &#8230;<\/p>\n<blockquote><p>\n     Focus is hard to control with mobile (so, by and large, think less about trying to control it) &#8230; but for non-mobile &#8230;<br \/>\n     Focus annoyances are sometimes to do with onmouseout not onlosefocus (eg. select element (size=1) that we just open but do not select from)<br \/>\n     Focus setting to a hidden textbox (as if &#8220;focus to nothing&#8221;) can be the thing to do rather than a visible textbox to open the door to uninterrupted scrolling possibilities to follow (ie. tdto rather than s)<br \/>\n     (Note to myself) Not always header.php but sometimes others (eg. single.php) &#8230; ie. look up <a title='WordPress Custom Fields Primer Tutorial' href='#wpcfpt'>our own blurb<\/a><br \/>\n     Garden paths, though frustrating, can teach lots, if in moderation (hence <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/select_element_onmouseout_focus_control_to_nowhere_annoyance_solution.gif\" title=\"Tutorial picture\">the long animated GIF<\/a> containing interim &#8220;garden paths&#8221;!)<br \/>\n     Check that a selection in select element still works &#8230; check!\n<\/p><\/blockquote>\n<p>What helped end up with &#8230;<\/p>\n<ul>\n<li>a user clicks the select (size=1) Custom Fields inspired &#8220;glowing&#8221; dropdown &#8230; and &#8230;<\/li>\n<li>it &#8220;expands&#8221; to reveal extra webpages that can be visited in a new webpage &#8230; but you &#8230;<\/li>\n<li>the user decides not to navigate to any of these dropdown offerings and so you click elsewhere in the webpage (not in the search textbox, though you can if you prefer, but the issue is not with this action) &#8230; we think &#8230;<\/li>\n<li>the user <strike color=red>should be<\/strike> <font color=blue>is<\/font> immediately able to scroll up or down the webpage, but, before these changes, they got stuck not being able to do this, instead needing to first use the keyboard to tab out of a textbox, before being able to scroll<\/li>\n<\/ul>\n<p> &#8230; just involved in this WordPress blog&#8217;s TwentyTen theme&#8217;s <strike color=red>good ol&#8217; header.php<\/strike> <font color=blue>single.php<\/font> <font color=blue>simple change<\/font> to <a title='WordPress Custom Fields Primer Tutorial' href='#wpcfpt'>WordPress Custom Fields Primer Tutorial<\/a>&#8216;s changes (shown below) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  if ($encsuffix == \"\") { $encsuffix=\"&lt;select id='linkhints' class='linkhints'<font color=blue> onmouseout=\"document.getElementById('tdto').focus();\"<\/font> title='Our link hints for this blog posting' style='margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\\\"if (this.value.length &gt; 0) { window.open(this.value,'_blank'); }\\\"&gt;&lt;option value=''&gt;&amp;#128161;&lt;\/option&gt;&lt;\/select&gt;\"; }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\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\/select-element-onmouseout-focus-control-to-nowhere-annoyance-solution-tutorial\/'>Select Element Onmouseout Focus Control to Nowhere Annoyance Solution Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wpcfpt'>Previous relevant <a target=_blank title='WordPress Custom Fields Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-custom-fields-primer-tutorial\/'>WordPress Custom Fields Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-custom-fields-primer-tutorial\/#linkhints\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"WordPress Custom Fields Primer Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp_cf.jpg\" title=\"WordPress Custom Fields Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">WordPress Custom Fields Primer Tutorial<\/p><\/div>\n<blockquote><p>\nI spy with my little eye something beginning with &#8230; <span class=linkhints>&#128161;<\/span><br \/>\nYes, <span class=linkhints>&#128161;<\/span><br \/>\nUp above, <span class=linkhints>&#128161;<\/span>\n<\/p><\/blockquote>\n<p><code><br \/>\nAw ... what a bright idea?!  How come I click on the light bulb (<span class=linkhints>&#128161;<\/span>) and it has dropdown options unique to this blog post?<br \/>\n<\/code><\/p>\n<blockquote><p>\nGlad you asked.  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uQeS8S80Lps'>And all because &#8230;<\/a>\n<\/p><\/blockquote>\n<p>Let&#8217;s talk about WordPress blog <a target=_blank title='WordPress Custom Fields' href='https:\/\/wordpress.org\/support\/article\/custom-fields\/'>Custom Fields<\/a>, and an associated <a target=_blank title='Great link' href='https:\/\/www.wpbeginner.com\/wp-tutorials\/wordpress-custom-fields-101-tips-tricks-and-hacks\/'>great link we stumbled upon<\/a>.  We followed its advice to change Theme code &#8230; yay!!!!  Except this time, it wasn&#8217;t (good ol&#8217;) header.php that changed for our Custom Field foray (<font size=2>we&#8217;ve codenamed &#8220;Operation 4A&#8221;<\/font> <font size=1>&#8230; tee hee<\/font>).<\/p>\n<p>Working to a plan like this, often the first question is (especially with event-driven programming code) &#8220;Where is the intervention point?&#8221;.<\/p>\n<blockquote cite='https:\/\/www.wpbeginner.com\/wp-tutorials\/wordpress-custom-fields-101-tips-tricks-and-hacks\/'><p>\nYou will need to enter your custom fields code inside the WordPress loop.<br \/>\nLook for the line that looks like this:<br \/>\n<br \/>\n&lt;?php while ( have_posts() ) : the_post(); ?&gt;<br \/>\nYou want to make sure that you add your code before the following line:<br \/>\n<br \/>\n&lt;?php endwhile; \/\/ end of the loop. ?&gt;\n<\/p><\/blockquote>\n<p> &#8230; good advice, and looking in the themes &#8220;twentyten&#8221; folder several PHP files had these two.  But trial and error (just placing &lt;?php echo &#8216;yoo hoo!&#8217;; ?&gt;) we found that &#8220;single.php&#8221; could be tweaked to change the WordPress blog webpage here, and intervene.  Place the intervention near &#8220;endwhile&#8221; and it goes down the bottom of the post&#8217;s content, and near &#8220;while ( have_posts() ) : the_post();&#8221; you get it up near the top of the post&#8217;s content (the placement we opted for).<\/p>\n<p>Working to a plan like this, often the next question is &#8220;What do you want to do now that you know where to intervene?&#8221; and here we decided we wanted a dropdown way to navigate to links that are related to the content in one of 5 ways &#8230;<\/p>\n<ul>\n<li>a number corresponds to a posting number webpage at the WordPress (TwentyTen themed) blog here<\/li>\n<li>a &#8220;-&#8221; (no spaces) delimited single &#8220;slug&#8221; word corresponds to this WordPress blog permalink<\/li>\n<li>&#8220;tag\/[tag-words]&#8221; corresponds to this WordPress [tag-words] tag lookup<\/li>\n<li>&#8220;category\/[category-words]&#8221; corresponds to this WordPress [category-words] category lookup<\/li>\n<li>absolute URL will add to dropdown and try to navigate there<\/li>\n<\/ul>\n<p> &#8230; to allow the user to &#8220;read up&#8221; on the posting to follow, perhaps.<\/p>\n<p>And so &#8230; &#8220;How come I click on the light bulb and it has dropdown options unique to this blog post?&#8221;<\/p>\n<p>The intervention code in &#8220;single.php&#8221; directly under &#8220;&lt;?php while ( have_posts() ) : the_post(); ?&gt;&#8221; &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n$encsuffix='';<br \/>\n$enclosurev = get_post_meta($post-&gt;ID, 'linksofuse', true);<br \/>\n<br \/>\nif ($enclosurev) {<br \/>\nif (strpos($enclosurev, \"-\") !== false || strpos($enclosurev, \",\") !== false || strpos($enclosurev, \"\/\/\") !== false) {<br \/>\n$encs=explode(\",\", $enclosurev);<br \/>\nfor ($iqs=0; $iqs&lt;sizeof($encs); $iqs++) {<br \/>\n  if ($encsuffix == \"\") { $encsuffix=\"&lt;select id='linkhints' class='linkhints' title='Our link hints for this blog posting' style='margin-right:20px;float:right;display:inline-block;width:60px;' onchange=\\\"if (this.value.length &gt; 0) { window.open(this.value,'_blank'); }\\\"&gt;&lt;option value=''&gt;&amp;#128161;&lt;\/option&gt;&lt;\/select&gt;\"; }<br \/>\n  if (strpos($encs[$iqs], \"\/\/\") !== false) {<br \/>\n   $enctitle=\"URL \" . $encs[$iqs];<br \/>\n   $enccont=@file_get_contents(\"http:\/\/\" . explode(\"\/\/\", $encs[$iqs])[1]);<br \/>\n   if (strpos($enccont, \"&lt;\/title&gt;\") !== false) {<br \/>\n     $enctitle=explode(\"&gt;\", explode(\"&lt;\/title&gt;\", $enccont)[0])[-1 + sizeof(explode(\"&gt;\", explode(\"&lt;\/title&gt;\", $enccont)[0]))];<br \/>\n   }<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n  } else if (strpos($encs[$iqs], \"-\") !== false) {<br \/>\n   $encsm=explode(\"-\", $encs[$iqs]);<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\/\/www.rjmprogramming.com.au\/ITblog\/\" . $encs[$iqs] . \"'&gt;&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n   $enctitle=strtoupper(substr($encsm[0],0,1)) . strtolower(substr($encsm[0],1));<br \/>\n   for ($jqs=1; $jqs&lt;sizeof($encsm); $jqs++) {<br \/>\n     $enctitle.=\" \" . strtoupper(substr($encsm[$jqs],0,1)) . strtolower(substr($encsm[$jqs],1));<br \/>\n   }<br \/>\n   $encsuffix=str_replace(\"&gt;&lt;\/option&gt;&lt;\/select&gt;\", \"&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n  } else {<br \/>\n   if (substr($encs[$iqs],0,1) &gt;= '0' && substr($encs[$iqs],0,1) &lt;= '9') {<br \/>\n   $enctitle=\"Blog Posting \" . $encs[$iqs];<br \/>\n   $enccont=@file_get_contents(\"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=\" . $encs[$iqs]);<br \/>\n   if (strpos($enccont, \"&lt;\/title&gt;\") !== false) {<br \/>\n     $enctitle=explode(\"&gt;\", explode(\"&lt;\/title&gt;\", $enccont)[0])[-1 + sizeof(explode(\"&gt;\", explode(\"&lt;\/title&gt;\", $enccont)[0]))];<br \/>\n   }<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . \"\/\/www.rjmprogramming.com.au\/ITblog\/?p=\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n   } else if (strpos($encs[$iqs], \"\/tag\/\") !== false) {<br \/>\n   $enctitle=\"Blog Tag \" . str_replace(\"-\",\" \",str_replace(\"\/tag\/\",\"\",$encs[$iqs]));<br \/>\n   $enccont=@file_get_contents(\"https:\/\/www.rjmprogramming.com.au\/ITblog\" . $encs[$iqs]);<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . \"\/\/www.rjmprogramming.com.au\/ITblog\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n   } else if (strpos($encs[$iqs], \"\/category\/\") !== false) {<br \/>\n   $enctitle=\"Blog Category \" . str_replace(\"-\",\" \",str_replace(\"\/category\/\",\"\",$encs[$iqs]));<br \/>\n   $enccont=@file_get_contents(\"https:\/\/www.rjmprogramming.com.au\/ITblog\" . $encs[$iqs]);<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . \"\/\/www.rjmprogramming.com.au\/ITblog\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n   } else if (strpos($encs[$iqs], \"tag\/\") !== false) {<br \/>\n   $enctitle=\"Blog Tag \" . str_replace(\"-\",\" \",str_replace(\"tag\/\",\"\",$encs[$iqs]));<br \/>\n   $enccont=@file_get_contents(\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\" . $encs[$iqs]);<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . \"\/\/www.rjmprogramming.com.au\/ITblog\/\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n   } else if (strpos($encs[$iqs], \"category\/\") !== false) {<br \/>\n   $enctitle=\"Blog Category \" . str_replace(\"-\",\" \",str_replace(\"category\/\",\"\",$encs[$iqs]));<br \/>\n   $enccont=@file_get_contents(\"https:\/\/www.rjmprogramming.com.au\/ITblog\/\" . $encs[$iqs]);<br \/>\n   $encsuffix=str_replace(\"&lt;\/select&gt;\", \"&lt;option value='\" . \"\/\/www.rjmprogramming.com.au\/ITblog\/\" . $encs[$iqs] . \"'&gt;\" . $enctitle . \"&lt;\/option&gt;&lt;\/select&gt;\", $encsuffix);<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n}<br \/>\n}<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; looks for an optionally filled in blog posting Custom Field called &#8220;linksofuse&#8221; for a comma separated list of links as per the 5 types of definitions above, and shows these as dropdown option values under that light bulb (<span class=linkhints>&#128161;<\/span>) under the blog posting title before the blog posting content (that includes the blog posting image we always have).<\/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='#d46604' onclick='var dv=document.getElementById(\"d46604\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/intervention\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46604' 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='#d56354' onclick='var dv=document.getElementById(\"d56354\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/focus\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d56354' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We could so easily have called today&#8217;s tutorial &#8230; WordPress Custom Fields Focus Issue Tutorial &#8230; or &#8230; Select Element Focus to Nowhere Primer Tutorial &#8230; or &#8230; Non-mobile Focus Control Primer Tutorial &#8230; or &#8230; Non-mobile Onmouseout versus Onlosefocus &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/select-element-onmouseout-focus-control-to-nowhere-annoyance-solution-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":[151,211,367,400,448,652,3180,4025,1661,932,997,1866,1675,1319,1324,1325,1456],"class_list":["post-56354","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-click","tag-dropdown","tag-event","tag-focus","tag-javascript","tag-non-mobile","tag-onlosefocus","tag-onmouseout","tag-php","tag-programming","tag-select","tag-textbox","tag-tutorial","tag-twentyten","tag-twentyten-theme","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56354"}],"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=56354"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56354\/revisions"}],"predecessor-version":[{"id":56360,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/56354\/revisions\/56360"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=56354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=56354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=56354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}