Thread: Colours-on-Page Displaying with MooTools

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

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/framework/colours-on-page-displaying-with-mootools.jpg[/IMG]
Demo: JavaScript Colours-on-Page Displaying with MooTools

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 w w w.JavaScriptBank. com
     Come to view and download over 2000+ free javascript at w w w.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 | hxxp ://eriwen. com/css/color-palette-with-css-and-moo/
// This script downloaded from w w w.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: Place HTML below in your BODY section
HTML

Code:

<!--
/*
     This script downloaded from w w w.JavaScriptBank. com
     Come to view and download over 2000+ free javascript at w w w.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

JavaScript Bookmark Page script - JavaScript Color Wheel - JavaScript Image slideshow