Weโve got two ideas floating around todayโs proof of concept โInput Colour Picker Multiple Linear Gradient Backgroundโ web application concept, the second being the โproof of conceptโ bit, at least for us โฆ
- dynamically created linear-gradient backgrounds (as you can read about recently at CSS Gradient Creations Popup Integration Tutorial) โฆ augmented by the interactive input required, via the new idea of โฆ
- input type=color โmultipleโ attribute (not of meaning to default HTML and CSS and Javascript that involves element types that are not โselectโ (dropdowns), but) made to mean something (for input type=color elements) today
โฆ in our inhouse HTML and Javascript input_col_multiplehtm live
run link (that includes the crucial external Javascript input_col_multiple
js and derivedvia less
interesting live run), (any/all of which) you can try for yourself.
Notice some genericization considerations in the Javascript with code snippets like โฆ
var el=document.querySelector("input[type='color']"); // gets first CSS'y element selector filtering (in Javascript)
var eloh='';
if (el && iomultiple != '') { if (el.outerHTML.toLowerCase().indexOf(' multiple') == -1) { el.setAttribute('multiple',true); } eloh=el.outerHTML; }
if (eloh.toLowerCase().indexOf(' multiple') != -1) {
// do stuff regarding document.body linear gradient background
}
โฆ or the body onload substitute code โฆ
var iomultiple='';
function sel(oid) {
if (document.getElementById(oid)) {
iomultiple='' + document.getElementById(oid).value;
}
}
function onl() {
var elsel=document.querySelector("select");
if (elsel) { if (('' + elsel.id) == '') { iomultiple='' + elsel.value; } else { sel(('' + elsel.id)); } }
}
setTimeout(onl, 1000);
โฆ where the determining โselectโ dropdown (as to whether linear gradients will be dynamically applied to document.body background) needs an ID but we do not care what that ID is.
If this was interesting you may be interested in this too.