{"id":63492,"date":"2024-04-30T03:01:03","date_gmt":"2024-04-29T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=63492"},"modified":"2024-05-01T19:21:32","modified_gmt":"2024-05-01T09:21:32","slug":"colouring-in-drag-and-drop-browse-button-css-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/colouring-in-drag-and-drop-browse-button-css-tutorial\/","title":{"rendered":"Colouring In Drag and Drop Browse Button CSS Tutorial"},"content":{"rendered":"
\"Colouring<\/a>

Colouring In Drag and Drop Browse Button CSS Tutorial<\/p><\/div>\n

Some HTML features that interface to the underlying operating system, you may have noticed yourself, are more restricted regarding how you can style them, than the usual HTML element catalogue. One which is always coming up, in this regard, for us is …<\/p>\n


\ninput type=file browsing (from underlying operating system files) button
\n<\/code><\/p>\n

The thing is, as an improvement on yesterday’s Colouring In Drag and Drop Mobile Postcard Tutorial<\/a> we’re butting up against this issue, because we wanted to make it more obvious for our mobile platform users of our Colouring In web application, that the way in to the functionality whereby they can create and share personalized (online) postcards is via them clicking that input type=file browsing button. And so we went looking for advice and came across this excellent link’s advice<\/a> that got us to set up the scenario<\/font> …<\/p>\n

<?php
\n
\n if (preg_match(\"\/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\\.browser|up\\.link|webos|wos)\/i\", $_SERVER[\"HTTP_USER_AGENT\"])) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/4117555\/simplest-way-to-detect-a-mobile-device-in-php
\n $templategame=str_replace('>Game<\/button>', '>Colouring In <font style=display:none;>Numbers Guessing Game<\/font> Game <br><font size=1>... drag <select onchange=\"document.getElementById(' . \"'source'\" . ').innerHTML=String.fromCodePoint(mwr(this.value));\" id=pensel><option value=128396>pen 🖌<\/option><option value=9999>pencil ✏<\/option><option value=128397>crayon 🖍<\/option><option value=8598>totopleft ↖<\/option><option value=8599>totopright ↗<\/option>8624><option value=8624>topandright ↰<\/option><option value=8625>topandleft ↱<\/option><option value=8626>bottomandright ↲<\/option><option value=8627>bottomandleft ↳<\/option><option value=128506>World Reveal 🗺<\/option><option value=127754>Rivers 🌊<\/option><option value=127956>Mountain 🏔<\/option><option value=127966>Waterfall 🏞<\/option><\/select> over canvas to colour in<\/font><\/button> <span id=dimageb title=\"Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you\" onclick=\"event.preventDefault(); woca=window.open(' . \"'https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))\" . ';\" style=\"padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;\"><iframe onload=\"jifopen(this);\" class=\"spag\" scrolling=\"no\" data-onload=\"iifopen(this);\" id=\"cbi\" frameborder=\"0\" style=\"width:175px;height:228px;margin-top:-194px;\" data-ok=\"218,-194\" data-nmok=\"200,-178\" src=\"\/HTMLCSS\/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20\"><\/iframe> <input onclick=\"event.stopPropagation();\" id=inurl style=width:420px; onblur=\"if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . \"'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''\" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . \"'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'\" . '); } }\" type=url placeholder=\"Optional linework, postcard, other background image URL or text\" value=\"\"><\/input> <input onclick=\"event.stopPropagation();\" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00><\/input><\/span><div id=\"doverlay\" style=display:none;><\/div><div id=\"result\" style=display:none;><\/div><div id=\"resultav\" style=display:none;><\/div><div id=\"videoag\" style=display:none;><\/div><input type=hidden id=\"audioname\" style=display:none; value=\"\"><\/input><input type=hidden id=\"outputname\" style=display:none; value=\"\"><\/input><input type=hidden id=\"cto\" style=display:none; value=\"\"><\/input><input type=hidden id=\"thewords\" style=display:none; value=\"\"><\/input><input type=hidden id=\"saysub\" style=display:none; value=\"\"><\/input>', $templategame); \/\/'', $templategame);
\n } else {<\/font>
\n $templategame=str_replace('>Game<\/button>', '>Colouring In <font style=display:none;>Numbers Guessing Game<\/font> Game <br><font size=1>... drag <select onchange=\"document.getElementById(' . \"'source'\" . ').innerHTML=String.fromCodePoint(mwr(this.value));\" id=pensel><option value=128396>pen 🖌<\/option><option value=9999>pencil ✏<\/option><option value=128397>crayon 🖍<\/option><option value=8598>totopleft ↖<\/option><option value=8599>totopright ↗<\/option>8624><option value=8624>topandright ↰<\/option><option value=8625>topandleft ↱<\/option><option value=8626>bottomandright ↲<\/option><option value=8627>bottomandleft ↳<\/option><option value=128506>World Reveal 🗺<\/option><option value=127754>Rivers 🌊<\/option><option value=127956>Mountain 🏔<\/option><option value=127966>Waterfall 🏞<\/option><\/select> over canvas to colour in<\/font><\/button> <span id=dimageb title=\"Image background settings or some text you want (where ~~ is line feed and {} encased CSS styling (as well as, prefixing {} CSS can be class=YourClass or id=YourId or YourCSSStyleSheet.css type entries, after your wording) can be applied) ... click in pink to open window with some clipart colouring in ideas where Copy Image Address pasted into the Image URL textbox might be interesting for you\" onclick=\"event.preventDefault(); woca=window.open(' . \"'https:\/\/www.google.com\/search?sca_esv=aa70acbcf6aac4c2&sca_upv=1&rlz=1C5CHFA_enAU973AU973&sxsrf=ACQVn0-MqfQVwZOqDS91Pot1E9D39q8Lyg:1712968623365&q=clip+art+linework+suiting+colouring+in&udm=2&source=univ&fir=gh0h5-oZtx___M%252CzQcS3q59Cyx7iM%252C_%253BpuKW1EldlM7spM%252C2l3v9-Tut9pnnM%252C_%253BHIGuP0JItVxEqM%252CRCw7hcXgARi6UM%252C_%253B_jAscIrC7E-1zM%252CIjNu9xj1ZLcxhM%252C_%253B-BKvL80Ovv4lzM%252C9kdy1MVEDMZMEM%252C_%253BAprlfAn4MgndFM%252CXilzPDMvdflqwM%252C_%253BYqCFEOovm8CXXM%252CMz1wIMhhp5At7M%252C_%253BG0zHmO34M00DYM%252C5Af1ulgnwMCIWM%252C_%253Bxzq7L7uZ1EcSyM%252CHPVvluHB2GlLyM%252C_%253BVbPdNDKgb2fUQM%252CGBsWFGjb2mW9sM%252C_&usg=AI4_-kQgjrNM4Kef_p1kQppck71FGlUm6A&biw=1417&bih=746&dpr=1','_blank','left=100,top=200,width=' + eval(-200 + screen.width) + ',height=' + eval(-400 + screen.height))\" . ';\" style=\"padding-left:3px;padding-right:3px;background-color:pink;border:1px dotted purple;display:inline;\"><iframe class=\"spag\" scrolling=\"no\" data-onload=\"iifopen(this);\" id=\"cbi\" frameborder=\"0\" style=\"width:175px;height:200px;margin-top:-178px;\" data-ok=\"218,-194\" data-nmok=\"200,-178\" src=\"\/HTMLCSS\/client_browsing.htm?d=332160562686&wording=Allimages%20images%2E%20\"><\/iframe> <input onclick=\"event.stopPropagation();\" id=inurl style=width:420px; onblur=\"if (mayberesultalready(this.value).trim().length > 0) { if (document.URL.indexOf(String.fromCharCode(63)) == -1) { location.href=document.URL.replace(' . \"'.php','.php?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + ''\" . '); } else { location.href=document.URL.replace(String.fromCharCode(63), ' . \"'?imageurl=' + encodeURIComponent(this.value) + '&opacity=' + encodeURIComponent(document.getElementById('opmeter').value) + '&'\" . '); } }\" type=url placeholder=\"Optional linework, postcard, other background image URL or text\" value=\"\"><\/input> <input onclick=\"event.stopPropagation();\" type=number step=0.01 style=display:inline-block; title=Opacity id=opmeter value=1.00 min=0.00 max=1.00><\/input><\/span><div id=\"doverlay\" style=display:none;><\/div><div id=\"result\" style=display:none;><\/div><div id=\"resultav\" style=display:none;><\/div><div id=\"videoag\" style=display:none;><\/div><input type=hidden id=\"audioname\" style=display:none; value=\"\"><\/input><input type=hidden id=\"outputname\" style=display:none; value=\"\"><\/input><input type=hidden id=\"cto\" style=display:none; value=\"\"><\/input><input type=hidden id=\"thewords\" style=display:none; value=\"\"><\/input><input type=hidden id=\"saysub\" style=display:none; value=\"\"><\/input>', $templategame); \/\/'', $templategame);
\n }<\/font>
\n<\/code>
\n?><\/p>\n

… for mobile platforms, where, on opening the HTML iframe linking to this relevant input type=file browsing button we restyle according to …<\/p>\n


\n var cbaconto=null;
\n
\n function jifopen(iois) {
\n if (iois != null) {
\n cbaconto = (iois.contentWindow || iois.contentDocument);
\n if (cbaconto.document) { cbaconto = cbaconto.document; }
\n if (cbaconto != null) {
\n \/\/ Thanks to https:\/\/www.viget.com\/articles\/styling-native-file-upload-input-field\/
\n setInterval(function() {
\n cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type=\"file\"]::after { content:' + \"'\\\\002709 Postcard \\\\002709'; } <\/sty\" + 'le>';
\n setTimeout(function() {
\n cbaconto.getElementById('apostcard').innerHTML+='<sty' + 'le> input[type=\"file\"]::after { content:' + \"'\\\\01F4F7 Take Photo \\\\01F4F7'; } <\/sty\" + 'le>';
\n }, 5000);
\n }, 10000);
\n }
\n }
\n }
\n<\/code><\/p>\n

… creating a small emoji assisted animation informing of Postcard “Take Photo” possibilities regarding Postcard creation ideas, via a click of this input type=file browsing button.<\/p>\n

Codewise this needed …<\/p>\n