Full version: jsB@nk » Framework » MooTools » Colours-on-Page Displaying with MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.html
When users click a specified button, this JavaScript code example will get colours of all HTML elements with the predefined color attributes then fill those colours into many tiny rectangles. The author built this JavaScript color picker with the idea to offer visitors color of any HTML element without researching the source code of web pages.Try more JavaScript code examples on jsB@nk for picking the colors if you're needing something like that: - Tigra Color Picker - Milonic DHTML Color Picker - JSwitch Color Picker - HTML Color Picker 1.0
Full version: jsB@nk » Framework » MooTools » Colours-on-Page Displaying with MooTools
URL: https://www.javascriptbank.com/colours-on-page-displaying-with-mootools.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.dcolor { height:40px;}.dtext { }.dwrapper { width:100px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc;}</style><script type="text/javascript" src="/javascript/mootools.js"></script><script type="text/javascript">// Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/// This script downloaded from www.JavaScriptBank.com//once the dom is readywindow.addEvent('domready', function() {//do it!$('get-colors').addEvent('click', function() {//starting the colors arrayvar colors = [];var disallows = ['transparent'];//for every element$$('*').each(function(el) {//record colors!colors.include(el.getStyle('color'));colors.include(el.getStyle('background-color'));el.getStyle('border-color').split(' ').each(function(c) {colors.include(c);});});//sort the colorscolors.sort();//empty wrapper$('colors-wrapper').empty();//for every color...colors.each(function(val,i) {//if it's goodif(!disallows.contains(val)){//create wrapper divvar wrapper = new Element('div', {'class':'dwrapper'});//create color div, injectvar colorer = new Element('div', {'class':'dcolor','style': 'background:' + val});colorer.inject(wrapper);//alert(val);//create text div, injectvar texter = new Element('div', {'class':'dtext','text':val});texter.inject(wrapper);//inject wrapperwrapper.inject($('colors-wrapper'));}});});});</script><!--/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/--><input type="button" id="get-colors" value="Get Colors" class="button"><br><br><br><div id="colors-wrapper"></div><br clear="all"><div style="text-align: left; width: 70%;"><p>Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p></div>
/javascript/mootools.js