{"id":56080,"date":"2022-06-11T03:01:32","date_gmt":"2022-06-10T17:01:32","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56080"},"modified":"2022-06-10T18:57:56","modified_gmt":"2022-06-10T08:57:56","slug":"daylight-saving-time-select-option-title-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/daylight-saving-time-select-option-title-tutorial\/","title":{"rendered":"Daylight Saving Time Select Option Title Tutorial"},"content":{"rendered":"
\"Daylight<\/a>

Daylight Saving Time Select Option Title Tutorial<\/p><\/div>\n

We’ve many a time dreamed up web applications that would fill an HTML select element’s option tag innerHTMLs with image data. But no, the select element has, like the Javascript popup windows, a lot of underlying operating system workings making it more difficult to CSS style, much<\/font>.<\/p>\n

Before now, we’ve realized that emojis are not out of bounds here, and they can display like images , a bit<\/font>.<\/p>\n

And today, with our changed<\/a> daylight_saving_time.html<\/a>‘s web application<\/a> (you can read more about at Safari Web Inspector Network Tab Headers PHP Post Tutorial<\/a>)<\/font> we embellish some emoji flags in a select element’s option innerHTML with (best seen on non-mobile)<\/font> on hover title attribute associated Country names.<\/p>\n

Yes, it was not always the case, but these days the select element’s option tag can support (and display) a title attribute<\/font>, with regarding the HTML …<\/p>\n


\n<select style='width:220px;' onchange='fixit(this.value);' id='timezone' name='timezone'><option id='otz' value=''>Please select a timezone below ...<\/option>
\n<option title='-18: ' id='o-18'<\/font> value='-18'>-18<\/option>
\n<option title='-17: ' id='o-17'<\/font> value='-17'>-17<\/option>
\n...
\n<\/select>
\n<select style='display:inline-block;width:240px;' onfocus=\" document.getElementById('dfrom').innerHTML=''; document.getElementById('dto').innerHTML=''; \" onchange=\" populatesel(document.getElementById('lookif'));\" id='region' name='region'><option value=''>Optionally, please select a region below ...<\/option>
\n<option title='Africa: ' id=oafrica <\/font>value='Africa'>Africa<\/option>
\n<option title='America: ' id=oamerica<\/font> value='America'>America<\/option>
\n<option title='Antarctica: ' id=oantarctica<\/font> value='Antarctica'>Antarctica<\/option>
\n<option title='Arctic: ' id=oarctic<\/font> value='Arctic'>Arctic<\/option>
\n<option title='Asia: ' id=oasia<\/font> value='Asia'>Asia<\/option>
\n<option title='Atlantic: ' id=oatlantic<\/font> value='Atlantic'>Atlantic<\/option>
\n<option title='Australia: ' id=oaustralia<\/font> value='Australia'>Australia<\/option>
\n<option title='Europe: ' id=oeurope<\/font> value='Europe'>Europe<\/option>
\n<option title='Indian: ' id=oindian<\/font> value='Indian'>Indian<\/option>
\n<option title='Pacific: ' id=opacific<\/font> value='Pacific'>Pacific<\/option>
\n<\/select>
\n<\/code><\/p>\n

… and then the Javascript …<\/p>\n


\nfunction augmentselects() {
\n var aftersp='', optbitshere=[], jopts, thisoptih='', findings=[], jfindings, isotwois='', afteri='', adone='', afterj=''<\/font>;
\n var selihis=document.getElementById('timezone').innerHTML;
\n var tzi=-90;<\/font>
\n aftersp=selihis;
\n optbitshere=selihis.split('<\/option>');
\n for (jopts=0; jopts<optbitshere.length; jopts++) {
\n thisoptih=optbitshere[jopts].split('>')[eval(-1 + optbitshere[jopts].split('>').length)];
\n if (thisoptih.trim() != '') {
\n afteri='';
\n afterj='';<\/font>
\n adone='';
\n findings=seleih.split((',+' + thisoptih.replace('Greenwich Mean Time', '0') + '\"').replace('+-','-'));
\n \/\/console.log(thisoptih + ' ... ' + ('\",\"+' + thisoptih.replace('Greenwich Mean Time', '0') + '\"').replace('+-','-') + ' --- ' + findings.length);
\n for (jfindings=0; jfindings<findings.length; jfindings++) {
\n isotwois=findings[jfindings].split(',')[eval(-1 + findings[jfindings].split(',').length)];
\n tzi=-90;
\n if (1 == 1 || eval(1 + eval('' + jfindings)) < eval('' + findings.length)) {
\n tzi=thisoptih.replace('Greenwich Mean Time', '0'); \/\/findings[eval(1 + eval('' + jfindings))].split(',')[0].split('>')[0].split('\"')[0].split(\"'\")[0];
\n console.log('tzi=' + tzi);
\n }<\/font>
\n \/\/console.log(isotwois);
\n if (('' + isotwois).length == 2) {
\n if (selceqih.indexOf('\"' + isotwois + '\">') != -1) {
\n if (afterj == '') {
\n afterj+=' ' + selceqih.split('\"' + isotwois + '\">')[1].split('<')[0].replace(\/\\'\/g, '`').replace(\/\\\"\/g, '`');
\n } else {
\n afterj+=', ' + selceqih.split('\"' + isotwois + '\">')[1].split('<')[0].replace(\/\\'\/g, '`').replace(\/\\\"\/g, '`');
\n }
\n console.log('afterj=' + afterj);
\n if (afterj != '' && document.getElementById(('o' + tzi).replace('+',''))) {
\n console.log('afterj found=' + afterj);
\n if (document.getElementById(('o' + tzi).replace('+','')).title.indexOf(afterj) == -1) {
\n if ((document.getElementById(('o' + tzi).replace('+','')).title + '~').indexOf(': ~') == -1) {
\n if (('' + document.getElementById(('o' + tzi).replace('+','')).title).indexOf(',') == -1) {
\n aftersp=aftersp.replace('\" id=\"o' + ('' + tzi).replace('+','') + '\"', afterj + ',\" id=\"o' + ('' + tzi).replace('+','') + '\"');
\n } else {
\n aftersp=aftersp.replace('\" id=\"o' + ('' + tzi).replace('+','') + '\"', ' ' + afterj + ',\" id=\"o' + ('' + tzi).replace('+','') + '\"');
\n }
\n document.getElementById(('o' + tzi).replace('+','')).title+=',' + afterj.replace(',','');
\n } else {
\n aftersp=aftersp.replace('\" id=\"o' + ('' + tzi).replace('+','') + '\"', ',' + afterj + ',\" id=\"o' + ('' + tzi).replace('+','') + '\"');
\n document.getElementById(('o' + tzi).replace('+','')).title+='' + afterj.replace(',','');
\n }
\n }
\n afterj='';
\n }
\n }<\/font>
\n if (adone.indexOf(isotwois + ',') == -1) {
\n adone+=isotwois + ',';
\n afteri+=' ' + orflag(isotwois);
\n }
\n }
\n }
\n if (afteri != '') {
\n aftersp=aftersp.replace('>' + thisoptih + '<', '>' + thisoptih + afteri + '<');
\n }
\n }
\n }
\n afters[0]=aftersp;
\n document.getElementById('timezone').innerHTML=aftersp.replace(\/\\,\\\"\\ id\\=\/g, '\" id=').replace(\/\\:\\ \\,\/g, ': ').replace(\/\\:\\ \\ \\,\/g, ': ')<\/font>;
\n selihis=document.getElementById('region').innerHTML;
\n aftersp=selihis;
\n optbitshere=selihis.split('<\/option>');
\n for (jopts=0; jopts<optbitshere.length; jopts++) {
\n thisoptih=optbitshere[jopts].split('>')[eval(-1 + optbitshere[jopts].split('>').length)];
\n if (thisoptih.trim() != '') {
\n afteri='';
\n adone='';
\n findings=seleih.split((' value=\"' + thisoptih + '\/'));
\n \/\/console.log(thisoptih + ' ... ' + ('\",\"+' + thisoptih.replace('Greenwich Mean Time', '0') + '\"').replace('+-','-') + ' --- ' + findings.length);
\n if (eval('' + findings.length) >= 2) {
\n for (jfindings=1; jfindings<findings.length; jfindings++) {
\n isotwois=findings[jfindings].split(',')[3];
\n \/\/console.log(isotwois);
\n if (('' + isotwois).length == 2) {
\n if (adone.indexOf(isotwois + ',') == -1) {
\n adone+=isotwois + ',';
\n afteri+=' ' + orflag(isotwois);
\n }
\n }
\n }
\n }
\n if (afteri != '') {
\n aftersp=aftersp.replace('>' + thisoptih + '<', '>' + thisoptih + afteri + '<');
\n }
\n }
\n }
\n document.getElementById('region').innerHTML=aftersp;
\n afters[1]=aftersp;
\n selihis=document.getElementById('sfrom').innerHTML;
\n \/\/var cselceq=document.getElementById('selceq').innerHTML;
\n aftersp=selihis;
\n optbitshere=selihis.split('<\/option>');
\n for (jopts=0; jopts<optbitshere.length; jopts++) {
\n thisoptih=optbitshere[jopts].split('>')[eval(-1 + optbitshere[jopts].split('>').length)];
\n if (thisoptih.trim() != '') {
\n afterj='';<\/font>
\n afteri='';
\n \/\/adone='';
\n findings=seleih.split((' value=\"' + thisoptih + '\"'));
\n \/\/console.log(thisoptih + ' ... ' + ('\",\"+' + thisoptih.replace('Greenwich Mean Time', '0') + '\"').replace('+-','-') + ' --- ' + findings.length);
\n if (findings.length >= 2) {
\n isotwois=findings[1].split(',')[3];
\n \/\/console.log(isotwois);
\n if (('' + isotwois).length == 2) {
\n \/\/if (adone.indexOf(isotwois + ',') == -1) {
\n \/\/adone+=isotwois + ',';
\n if (selceqih.indexOf('\"' + isotwois + '\">') != -1) {
\n if (afterj == '') {
\n afterj+=' ' + selceqih.split('\"' + isotwois + '\">')[1].split('<')[0].replace(\/\\'\/g, '`').replace(\/\\\"\/g, '`');
\n } else {
\n afterj+=', ' + selceqih.split('\"' + isotwois + '\">')[1].split('<')[0].replace(\/\\'\/g, '`').replace(\/\\\"\/g, '`');
\n }<\/font>
\n afteri+=' in ' + orflag(isotwois) + ' ' + selceqih.split('\"' + isotwois + '\">')[1].split('<')[0].replace(\/\\'\/g, '`').replace(\/\\\"\/g, '`');
\n } else {
\n afteri+=' in ' + orflag(isotwois);
\n }
\n \/\/}
\n }
\n }
\n if (afterj != '' && document.getElementById('o' + thisoptih.toLowerCase().split('\/')[0])) {
\n if (document.getElementById('o' + thisoptih.toLowerCase().split('\/')[0]).title.indexOf(afterj) == -1) {
\n if ((document.getElementById('o' + thisoptih.toLowerCase().split('\/')[0]).title + '~').indexOf(': ~') == -1) {
\n document.getElementById('o' + thisoptih.toLowerCase().split('\/')[0]).title+=',' + afterj.replace(',','');
\n } else {
\n document.getElementById('o' + thisoptih.toLowerCase().split('\/')[0]).title+='' + afterj.replace(',','');
\n }
\n }
\n }<\/font>
\n if (afteri != '') {
\n \/\/alert('thisoptih=' + thisoptih + ' afterj=' + afterj);
\n aftersp=aftersp.replace('>' + thisoptih + '<', '>' + thisoptih + afteri + '<'); \/\/.replace(' title=\"' + thisoptih.substring(0,1).toUpperCase() + thisoptih.substring(1).toLowerCase() + ': \"', ' title=\"' + thisoptih.substring(0,1).toUpperCase() + thisoptih.substring(1).toLowerCase() + ': ' + afterj + '\"');
\n } else if (thisoptih.indexOf(' in ') == -1) {
\n \/\/alert('thisoptih=' + thisoptih + ' Afterj=' + afterj);
\n aftersp=aftersp.replace('>' + thisoptih + '<', '>' + thisoptih + ' in ' + '<');
\n }
\n }
\n }
\n document.getElementById('sfrom').innerHTML=aftersp.replace(' can go in at ', ' at ');
\n afters[2]=aftersp;
\n document.getElementById('sto').innerHTML=aftersp.replace(' can go in at ', ' at ').replace(' left', ' right');
\n afters[3]=aftersp.replace(' can go in at ', ' at ').replace(' left', ' right');
\n \/\/selihis=document.getElementById('sto').innerHTML;
\n \/\/aftersp=selihis;
\n \/\/document.getElementById('sto').innerHTML=aftersp;
\n}
\n<\/code><\/p>\n

\n

If this was interesting you may be interested in this<\/a> too.<\/p>\n