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 auth...
detail at
JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<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>
Step 2: Use JavaScript code below to setup the script
JavaScript
Code:
<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 ready
window.addEvent('domready', function() {
//do it!
$('get-colors').addEvent('click', function() {
//starting the colors array
var 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 colors
colors.sort();
//empty wrapper
$('colors-wrapper').empty();
//for every color...
colors.each(function(val,i) {
//if it's good
if(!disallows.contains(val))
{
//create wrapper div
var wrapper = new Element('div', {
'class':'dwrapper'
});
//create color div, inject
var colorer = new Element('div', {
'class':'dcolor',
'style': 'background:' + val
});
colorer.inject(wrapper);
//alert(val);
//create text div, inject
var texter = new Element('div', {
'class':'dtext',
'text':val
});
texter.inject(wrapper);
//inject wrapper
wrapper.inject($('colors-wrapper'));
}
});
});
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<!--
/*
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>
Step 4: must download files below
Files
mootools.js