{"id":27139,"date":"2016-12-28T03:01:26","date_gmt":"2016-12-27T17:01:26","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=27139"},"modified":"2016-12-28T08:05:42","modified_gmt":"2016-12-27T22:05:42","slug":"html-select-element-dynamic-multiple-attribute-mobile-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-mobile-tutorial\/","title":{"rendered":"HTML Select Element Dynamic Multiple Attribute Mobile Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count_accountability.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Mobile Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Mobile Tutorial<\/p><\/div>\n<p>There&#8217;s no <strike>three<\/strike>two ways about it, mobile platforms do not like HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element in <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use.  I waited a whole day to see if the &#8220;big guns&#8221; would change their mind, and here we are, and they haven&#8217;t &#8230; and &#8230; <font size=1>just between you and me<\/font> &#8230; we have a feeling in our water they&#8217;re not going to change their mind.<\/p>\n<p>So what&#8217;s an alternative?  Well, given that mobile platforms are still okay writing to (an HTML select element called &#8220;selo&#8221;) <i>selo.options[0].text<\/i> that comma separated &#8220;tallying&#8221; we do, we think, for mobile platforms, as an alternative approach we&#8217;ll combine &#8230;<\/p>\n<ul>\n<li><i>selo.options[0].text<\/i> as that one <i>option<\/i> element &#8220;tallying&#8221; dropdown part (as is) &#8230; with &#8230;<\/li>\n<li>other HTML input type=button replacements for all the other HTML select element option elements (we&#8217;ll still use for non-mobile platforms)<\/li>\n<\/ul>\n<p>And while we&#8217;re at this discusion, building on yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='#hsedmast'>HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/a>, how do we &#8230; yes, us &#8230; distinguish a mobile platform from a non-mobile one?  We&#8217;re doing it in Javascript DOM via code like &#8230;<\/p>\n<p><code><br \/>\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n    \/\/ do mobile specific code<br \/>\n } else {<br \/>\n    \/\/ do non-mobile specific code<br \/>\n }<br \/>\n<\/code><\/p>\n<p>Now, moving on from this, we&#8217;ve done a few other things, namely &#8230;<\/p>\n<ul>\n<li>made the date data sortable in both an alphabetic and\/or numerical way by using YYYY_mm_dd_HH24_mi_ss type of date\/time formatting &#8230; which comes in handy when we come to &#8230;<\/li>\n<li>our first &#8220;accountability&#8221; steps in this project to be able to save a snapshot and recall it via get parameter URL construction<\/li>\n<li>allowed for keyboard &#8220;tallying&#8221; via a new separate &#8220;tallying&#8221; field option, because this allows the user to not have to be accurate with a mouse press of some sort, when they are rushed just trying to record lots of data items, and it could even be that several people can each be responsible for a particular (keyboard) keystroke all recording on the one device (but imagine this would be quite a <i>squeezy<\/i> prospect), and might allow for the screen not to distract from the data recording<\/li>\n<\/ul>\n<p>With this last one, on mobile platforms, have you noticed with web applications on some mobile platforms, how a &#8230;<\/p>\n<p><code><br \/>\ndocument.getElementById(\"myInputTypeIsTextElement\").focus();<br \/>\n<\/code><\/p>\n<p> &#8230; attempt to focus to a &#8220;keyboard&#8221; keystroke element, on entering the web application the first time, is discouraged, or outright ignored?  Am sure there is a reason, but even this is not a big concern here, because subsequent &#8220;document.getElementById(&#8220;myInputTypeIsTextElement&#8221;).focus();&#8221; are granted, and that just means that, perhaps quite rightly, a mobile user initially decides on their focus as to whether they will &#8230;<\/p>\n<ul>\n<li>tap buttons with a mouse &#8230;<\/li>\n<li>tap (keyboard) keystroke buttons<\/li>\n<\/ul>\n<p> &#8230; which, when you think about it, is much of a muchness, unless you have one of those bluetooth keypads we talked about with <a target=_blank title='Tablet Run Web Server Blog PHP Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tablet-run-web-server-blog-php-tutorial\/'>Tablet Run Web Server Blog PHP Tutorial<\/a> when the &#8220;keyboard&#8221; approach could have many advantages for &#8220;tallying&#8221; concentration, when it is very busy.<\/p>\n<p>So we&#8217;re still going, but today&#8217;s work leaves us with this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a> and with this HTML and Javascript underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-GETME\">timed_count.html<\/a> code, which changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html-GETME\">this way<\/a> regarding the information above.  We hope you try it out yourself.<\/p>\n<hr>\n<p id='hsedmast'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-survey-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Survey 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\/timed_count.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Survey Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Survey Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/p><\/div>\n<p>It&#8217;s good with web programming where you do an application with realtime use, and we hope we are getting closer today (as with WordPress 4.1.1&#8217;s <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Survey Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-survey-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Survey Tutorial<\/a>) with a &#8220;Timed Count&#8221; web application where the words that spring to mind regarding how it works, at least to us, are &#8230;<\/p>\n<ul>\n<li>survey<\/li>\n<li>tally<\/li>\n<\/ul>\n<p>Think the teacher counting students who uses a counter system to &#8220;tally&#8221; the counter with what was expected at the end, or those people doing traffic &#8220;surveys&#8221; &#8220;tallying&#8221; up what they observe, presumably in relation to a time of day as well.  Well, today, with our web application, we default its usage to that latter case, but it is flexible enough, even at this early stage to cater for other scenarios.<\/p>\n<p>In a &#8220;survey&#8221; project of this type, the &#8220;tallying&#8221; is just one aspect of the job, and we&#8217;ll be talking about &#8220;accountability&#8221; and &#8220;reporting&#8221;, from where we see it, in tutorials to come, but just for now, we&#8217;re happy to be &#8230;<\/p>\n<ul>\n<li>Asking (as needed) and recording, &#8220;for internal use only&#8221;, the &#8220;survey&#8221; title<\/li>\n<li>Asking (as required) for a Starting (Time Elapsed) Period of interest<\/li>\n<li>In realtime (ie. dynamically) record, via an HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element in <a target=_blank title='HTML select element multiple attribute information from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use (as yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Game Tutorial' href='#hsedmagt'>HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/a> got us more and more into, <strike>man<\/strike>person), the &#8220;survey&#8221; &#8220;tallying&#8221; (or measurements, or findings) for that relevant time period &#8230; and &#8230;<\/li>\n<li>At the break of a time period summarize previous, &#8220;for internal use only&#8221;, and ready the user for a clean slate where the counts are zeroed<\/li>\n<\/ul>\n<p>Pretty simple concept, huh?  But am sure you can see what use this could be, particularly with some more bells and whistles?!  And if so &#8230; or even if not &#8230; why not try our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html\">live run<\/a> with its HTML and Javascript underlying <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/timed_count.html_GETME\">timed_count.html<\/a> code.<\/p>\n<hr \/>\n<p id='hsedmagt'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Game Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-game-tutorial\/'>HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/a> is shown below.<\/p>\n<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Game Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Game Tutorial<\/p><\/div>\n<p>Today, we have a new game that makes use of HTML <a target=_blank title='HTML select tag information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_select.asp'>select<\/a> element <a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>multiple<\/a> attribute mode use during the workings of the game.<\/p>\n<p>This is on the way to a mathematics statistics application and also looking back at yesterday&#8217;s <a title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='#hsedmat'>HTML Select Element Dynamic Multiple Attribute Tutorial<\/a>&#8216;s first <i>HTML select element multiple attribute mode<\/i> blog posting here at this blog.<\/p>\n<p>For this game, unlike yesterday&#8217;s &#8230;<\/p>\n<blockquote>\n<p>\nShould it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter\n<\/p>\n<\/blockquote>\n<p> &#8230; we have &#8220;the full circle&#8221; applying today, where the user is &#8230;<\/p>\n<ul>\n<li>shown the game status in Single attribute mode &#8230; and &#8230;<\/li>\n<li>waiting for user interaction in Multiple attribute mode<\/li>\n<\/ul>\n<p> &#8230; and we need all of &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Javascript onclick event information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/event_onclick.asp'>onclick<\/a> (select) and onclick (option)<\/li>\n<li><a target=_blank title='Event onfocus information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onfocus.asp'>onfocus<\/a> (select) and onfocus (option)<\/li>\n<\/ul>\n<p> &#8230; but curiously, not the usual <i><a target=_blank title='Event onchange information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ev_onchange.asp'>onchange<\/a> (select)<\/i> event &#8230; to work the functionality for the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html\" title='Click picture'>Random Counting Numbers Game<\/a> whose HTML and Javascript code you can examine at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/random_counting_numbers.html_GETME\" title='random_counting_numbers.html'>random_counting_numbers.html<\/a> link.  Food for thought, we hope.<\/p>\n<hr \/>\n<p id='hsedmat'>Previous relevant <a target=_blank title='HTML Select Element Dynamic Multiple Attribute Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-tutorial\/'>HTML Select Element Dynamic Multiple Attribute 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\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"HTML Select Element Dynamic Multiple Attribute Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/tz_places_multiple_video.jpg\" title=\"HTML Select Element Dynamic Multiple Attribute Tutorial\"  \/><\/a><p class=\"wp-caption-text\">HTML Select Element Dynamic Multiple Attribute Tutorial<\/p><\/div>\n<p>Am sure a lot of web programmers would like to invent some generic code to allow the HTML select (&#8220;dropdown&#8221;) element be able to toggle between the &#8230;<\/p>\n<ol>\n<li>Single select attribute mode &#8230; and &#8230;<\/li>\n<li><a target=_blank title='HTML select element multiple attribute informatiobn from w3schools' href='http:\/\/www.w3schools.com\/tags\/att_select_multiple.asp'>Multiple<\/a> select attribute mode<\/li>\n<\/ol>\n<p> &#8230; dynamically, using Javascript DOM.  But in order to be able to write a practically useful generic bit of code you have to have a confluence of agreed design guidelines, with lots of people participating and sticking to the guidelines, or have a concept whose predictability about &#8220;event&#8221; logic is pretty easy to envisage and define, for a lot of programmers to agree upon.  But trying to pin down the &#8220;event&#8221; logic of a &#8230;<\/p>\n<ul>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onchange<\/i> event &#8230; or even the &#8230;<\/li>\n<li>HTML select (&#8220;dropdown&#8221;) element <i>onclick<\/i> event (as a first &#8220;wild&#8221; thought getting into the problem)<\/li>\n<\/ul>\n<p> &#8230; is like catching a worm at the bottom of a 27 storey building being thrown from the top &#8230; you need to know when to give up too &#8230; think <a target=_blank title='Wargames' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>this salutary thought<\/a>.<\/p>\n<p>But that doesn&#8217;t mean the idea of an HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled is not a good idea, but it just means you need to focus on &#8230;<\/p>\n<ul>\n<li>Should it be &#8220;the full circle&#8221; of toggling capability, or just from Single attribute mode to Multiple attribute mode (but not back again) &#8230; and we pick the latter<\/li>\n<li>Define what can be done to repeat the actions of the (what was only for the Single attribute mode of use) <i>onchange<\/i> event logic but for a scenario where that is applied several times for variable inputs, and is that requirement &#8230;\n<ol>\n<li>synchronous &#8230; or &#8230;<\/li>\n<li>asynchronous<\/li>\n<\/ol>\n<p> &#8230; and for us, today, we need &#8220;synchronous&#8221; alas (as &#8220;asynchronous&#8221; would be a lot easier) &#8230; and this will become apparent later\n<\/li>\n<\/ul>\n<p>Okay, &#8220;later&#8221; has arrived, and it is time to define where we applied an example of <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> in our web applications.  We decided to do it for our interfacings to our &#8230;<\/p>\n<ul>\n<li><a target=_blank title='YouTube API for Iframe embedded videos' href='https:\/\/developers.google.com\/youtube\/iframe_api_reference'>YouTube API for Iframe embedded videos<\/a> interface HTML\/Javascript &#8220;parent&#8221; web application called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.htm'>karaoke_youtube_api.htm<\/a> to change in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.html----------GETME\" title='karaoke_youtube_api.html'>this way<\/a>, for today&#8217;s work, and that we last tweaked with <a target=_blank title='Australian Indigenous Language HTML Map Audio and YouTube Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-html-map-audio-and-youtube-tutorial\/'>Australian Indigenous Language HTML Map Audio and YouTube Tutorial<\/a> &#8230; and that supervises &#8230;<\/li>\n<li>&#8220;Child&#8221; HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>stop_start_youtube.html<\/a> that changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/stop_start_youtube.html--------GETME\" title='stop_start_youtube.html'>this way<\/a> for today&#8217;s work, both establishing each other&#8217;s requirements for this new functionality via URL get parameter usage (ie. via use of the ? and &#038; of URLs), with or without HTML form element usage<\/li>\n<\/ul>\n<p>As we said earlier, we&#8217;re dealing with &#8220;synchronous&#8221; requirements here, giving the user the nominal video duration time, plus twenty seconds, to view the current video before the &#8220;child&#8221; calls the &#8220;parent&#8221; to change videos, powered via the Javascript <a target=_blank title='Javascript setTimeout method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_win_settimeout.asp'><i>setTimeout<\/i><\/a> timer functionality, possible only because of the YouTube API&#8217;s video duration time information (which we already had stored on the text of the &#8220;dropdown&#8221; &#8230; we must have seen this coming?!).<\/p>\n<p>Okay, what we are doing here can be defined, and that is good for this project, but can you imagine a generic <i>HTML select (&#8220;dropdown&#8221;) element being able to be dynamically toggled<\/i> for all the other myriad of uses HTML select (&#8220;dropdown&#8221;) elements are put to by programmers &#8230; recalls to mind that lame excuse at school &#8230; &#8220;it depends&#8221; &#8230; but that is true here, and generic thoughts will need a much more lateral thought process &#8220;outside the box&#8221; to get towards a better generic idea.<\/p>\n<p>However, in the meantime, this change today will have made quite a lot of difference to &#8230;<\/p>\n<ul>\n<li>YouTube API for Iframe embedded videos &#8220;parent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaoke_youtube_api.htm\" title='karaoke_youtube_api.htm'>live run<\/a> (where you perform a Search for YouTube videos of interest such as <a target=_blank title='Example search' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/karaokeyoutubeapi.htm?emoji=on&#038;nokaraoke=y&#038;youtubeid=%20%20%20%20%20%20%20%20%20%20%20%20%20%20Adelaide'>this Adelaide search<\/a> example) &#8230; and the recent &#8230;<\/li>\n<li>TimeZone Places &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/tz_places.php\" title='tz_places.php'>live run<\/a> &#8230; and &#8230;<\/li>\n<li>Australian Indigenous Languages &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" title=\"aboriginal_language_regions.html\">live run<\/a> &#8230; and &#8230;<\/li>\n<li>Country Quiz &#8220;grandparent&#8221; web application <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/country_flag_quiz.php\" title=\"country_flag_quiz.php\">live run<\/a><\/li>\n<\/ul>\n<p>And we hope you get something out of trying out this new additional functionality &#8230; the Single attribute mode of use is unchanged.<\/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='#d27104' onclick='var dv=document.getElementById(\"d27104\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27104' 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='#d27117' onclick='var dv=document.getElementById(\"d27117\"); 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='d27117' 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='#d27127' onclick='var dv=document.getElementById(\"d27127\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/survey\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27127' 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='#d27139' onclick='var dv=document.getElementById(\"d27139\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mobile\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d27139' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>There&#8217;s no threetwo ways about it, mobile platforms do not like HTML select element in multiple attribute mode use. I waited a whole day to see if the &#8220;big guns&#8221; would change their mind, and here we are, and they &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-select-element-dynamic-multiple-attribute-mobile-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":[174,354,367,448,1533,576,652,673,2097,795,2092,2094,997,999,1029,1866,2095,2096,1279,1319,1345],"class_list":["post-27139","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-button","tag-dom","tag-dropdown","tag-focus","tag-get","tag-html","tag-javascript","tag-keyboard","tag-keystroke","tag-mobile","tag-multiple","tag-period","tag-programming","tag-project","tag-realtime","tag-select","tag-survey","tag-tally","tag-time","tag-tutorial","tag-url"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27139"}],"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=27139"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27139\/revisions"}],"predecessor-version":[{"id":27149,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/27139\/revisions\/27149"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=27139"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=27139"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=27139"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}