{"id":25696,"date":"2016-10-15T03:01:09","date_gmt":"2016-10-14T17:01:09","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=25696"},"modified":"2016-10-15T06:14:17","modified_gmt":"2016-10-14T20:14:17","slug":"html-select-element-selection-mode-wordpress-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-selection-mode-wordpress-tutorial\/","title":{"rendered":"HTML Select Element Selection Mode WordPress Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Select Element Selection Mode Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_ms_wordpress.jpg\" title=\"HTML Select Element Selection Mode WordPress Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Select Element Selection Mode WordPress Tutorial<\/p><\/div>\n<p>We&#8217;re continuing on our quest today regarding HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) elements, extending yesterday&#8217;s <a title='HTML Select Element Selection Mode Primer Tutorial' href='#hsesmpt'>HTML Select Element Selection Mode Primer Tutorial<\/a> as shown below.  Our work today revolves around interfacing this functionality, that we believe can become a generic piece of Javascript external code, to our WordPress blog, and concerns the difference in event behaviour between &#8230;<\/p>\n<ul>\n<li>(the default) single selection mode of use &#8230; and &#8230;<\/li>\n<li>the multiple selection mode of use<\/li>\n<\/ul>\n<p> &#8230; where, if you are familiar with this issue, you&#8217;ll probably have used an accompanying HTML button of some sort, to help you out with the event management of that second &#8220;multiple selection&#8221; mode of use, but we don&#8217;t want to use this way in our WordPress Blog &#8220;is mentioned by&#8221; functionality, but instead, as we outlined yesterday &#8230;<\/p>\n<blockquote><p>\nOur work &#8230; thinks about using a <i>timeout<\/i>, so that that second &#8220;multiple selection&#8221; mode of use no longer needs that extra HTML button (like) element.\n<\/p><\/blockquote>\n<p>And so we&#8217;ve worked on a small proof of concept web application that uses Javascript DOM techniques to change &#8220;single selection&#8221; dropdowns, that suit, to be able to have a <i>timeout<\/i> control their behaviour, in our WordPress Blog&#8217;s &#8220;is mentioned by&#8221; &#8220;is part of a thread&#8221; dropdown functionality, effectively allowing the one dropdown to access either mode of use.<\/p>\n<p>So there were two avenues of inspiration to this new &#8220;proof of concept&#8221; work, namely &#8230;<\/p>\n<ul>\n<li>yesterday&#8217;s &#8220;proof of concept&#8221; with that States of Australia dropdown provided the first draft of totally new Javascript in the header &#8230; and &#8230;<\/li>\n<li>the interface to MySql WordPress database and PHP started with the proof of concept parent HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.html_GETME\" title=\"is_mentioned_by.html_GETME\">is_mentioned_by.html<\/a> talked about in <a target=_blank title='WordPress Is Mentioned By Posting Thread Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-is-mentioned-by-posting-thread-tutorial\/'>WordPress Is Mentioned By Posting Thread Tutorial<\/a><\/li>\n<\/ul>\n<p>If you build a good &#8220;proof of concept&#8221; for a particular issue, don&#8217;t be surprised that that same &#8220;proof of concept&#8221; becomes a good starting point to build another.  Certainly that is the case for us today regarding the second &#8220;inspiration&#8221; above, and we feel is also a lesson in &#8220;k.i.s.s.&#8221; &#8230; <i>keep it simple softwareite<\/i>.<\/p>\n<p>Here is that new &#8220;proof of concept&#8221; HTML and Javascript code for your perusal that you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.html-GETME\" title=\"is_mentioned_by.html-GETME\">is_mentioned_by.html<\/a> with its four second timeout <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.html\" title=\"is_mentioned_by.html\">live run<\/a> for you to try, to see what we are getting at here, in its WordPress context.  The way we got there was as per <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.html-GETME\" title=\"is_mentioned_by.html-GETME\">this link<\/a>, or by looking for the &#9758; buttons on this blog.  These changes basically match those applied to the WordPress Blog TwentyTen theme&#8217;s header.php &#8230; our usual suspect.  And the PHP interface to the WordPress database regarding &#8220;is mentioned by&#8221; logic  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.php----GETME\" title=\"is_mentioned_by.php\">is_mentioned_by.php<\/a> changed <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/is_mentioned_by.php----GETME\" title=\"is_mentioned_by.php\">this way<\/a>.<\/p>\n<hr>\n<p id='hsesmpt'>Previous relevant <a target=_blank title='HTML Select Element Selection Mode Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-selection-mode-primer-tutorial\/'>HTML Select Element Selection Mode 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\/dropdown_ms.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML Select Element Selection Mode Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.jpg\" title=\"HTML Select Element Selection Mode Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML Select Element Selection Mode Primer Tutorial<\/p><\/div>\n<p>We&#8217;re starting on a quest today regarding HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> (dropdown) elements.  Our work concerns the difference in event behaviour between &#8230;<\/p>\n<ul>\n<li>(the default) single selection mode of use &#8230; and &#8230;<\/li>\n<li>the multiple selection mode of use<\/li>\n<\/ul>\n<p> &#8230; where, if you are familiar with this issue, you&#8217;ll probably have used an accompanying HTML button of some sort, to help you out with the event management of that second &#8220;multiple selection&#8221; mode of use.<\/p>\n<p>Our work, today, though, thinks about using a <i>timeout<\/i>, so that that second &#8220;multiple selection&#8221; mode of use no longer needs that extra HTML button (like) element.<\/p>\n<p>And so we&#8217;ve started out on this quest with a small proof of concept web application that uses Javascript DOM techniques to change &#8220;single selection&#8221; dropdowns, that suit, to be able to have a <i>timeout<\/i> control their behaviour, effectively allowing the one dropdown to access either mode of use.  For the moment, we just flag a &#8220;multiple seection&#8221; scenario with an alert box, as a comma separated list of values selected, as the handling of the actions of the underlying event require more thought regarding what to do here.<\/p>\n<p>Here is the HTML and Javascript code for your perusal that you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html_GETME\" title=\"dropdown_ms.html\">dropdown_ms.html<\/a> with its four second timeout <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html\" title=\"Click picture\">live run<\/a> for you to try, to see what we are getting at here.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Meanwhile, back at the mobile device ranch &#8230; yep &#8230; you guessed it &#8230; just about any event logic on the HTML option tag can be thought to no longer be relevant, and so we turned our attention to the idea of rewriting the HTML select event onchange event by &#8230;<\/p>\n<ul>\n<li>reading it and noting down its characteristics &#8230; hoping it is just the one function call &#8230; don&#8217;t mind up to nine arguments &#8230; but return values, am not sure yet what to do here &#8230; then &#8230;<\/li>\n<li>nullifying that onchange event &#8230; sorry, Javascript eval used &#8230;<\/li>\n<li>rewrite that onchange event encased in a setTimeout &#8220;shell&#8221; &#8230; sorry, Javascript eval used<\/li>\n<\/ul>\n<p> &#8230; and added a textarea to show you the order of stuff.<\/p>\n<p>Here is the new HTML and Javascript code for your perusal that you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html-GETME\" title=\"dropdown_ms.html\">dropdown_ms.html<\/a>, changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html-GETME\" title=\"dropdown_ms.html\">this way<\/a>, with its four second timeout <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/dropdown_ms.html\" title=\"Click picture\">live run<\/a> for you to try, to see what we are getting at here.<\/p>\n<p>Wonder if there&#8217;s a timeout going on when you ring a phone number &#8230; <font size=1>pre-emptive <\/font><font size=2>doh<\/font>?<\/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='#d25680' onclick='var dv=document.getElementById(\"d25680\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25680' 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='#d25696' onclick='var dv=document.getElementById(\"d25696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25696' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re continuing on our quest today regarding HTML select (dropdown) elements, extending yesterday&#8217;s HTML Select Element Selection Mode Primer Tutorial as shown below. Our work today revolves around interfacing this functionality, that we believe can become a generic piece of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-selection-mode-wordpress-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,299,367,400,576,2026,827,932,997,1866,1186,1200,2027,1319,1456],"class_list":["post-25696","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-blog","tag-database-2","tag-dropdown","tag-event","tag-html","tag-javascript-dom","tag-mysql","tag-php","tag-programming","tag-select","tag-sql","tag-stop-press","tag-timeout","tag-tutorial","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25696"}],"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=25696"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25696\/revisions"}],"predecessor-version":[{"id":25709,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/25696\/revisions\/25709"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=25696"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=25696"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=25696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}