Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My 2 Cents Colours-on-page displaying with mootools

Discussion in 'Javascript and jQuery' started by JavaScriptBank, May 11, 2011.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    Yellow Belt

    Joined:
    Jul 11, 2009
    Messages:
    85
    Ratings:
    +0 / -0
    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: Use CSS code below for styling the script
    CSS
    Code:
    Select All
    <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: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    Select All
    <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:
    Select All
    <!-- /* 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: Download files below
    Files
    mootools.js






     
Thread Status:
Not open for further replies.

Share This Page