Input Colour Picker Multiple Linear Gradient Background Primer Tutorial
โœ‚๐Ÿƒ๐Ÿพโ€โ™€๏ธ๐Ÿƒ๐Ÿผโ€โ™‚๏ธ
๐Ÿ“–

Input

Input Colour Picker Multiple Linear Gradient Background Primer Tutorial

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_multipleโšซhtm 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.

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *