Announcement

Collapse
No announcement yet.

JavaScript Color Gradient Maker

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • JavaScript Color Gradient Maker

    With this JavaScript code example, you can easy make CSS gradient background, [URL="http://www.javascriptbank.com/=JavaScript color gradient"]JavaScript color gradient</a... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: Copy & Paste JavaScript code below in your HEAD section
    JavaScript
    Code:
    <script type="text/javascript">
    // Created by: Joseph Myers | http://www.codelib.net/
    // This script downloaded from www.JavaScriptBank.com
    
    function colorscale(hexstr, scalefactor) {
    /* declared variables first, in order;
      afterwards, undeclared local variables */
      var r = scalefactor;
      var a, i;
      if (r < 0 || typeof(hexstr) != 'string')
        return hexstr;
        hexstr = hexstr.replace(/[^0-9a-f]+/ig, '');
        if (hexstr.length == 3) {
        a = hexstr.split('');
      } else if (hexstr.length == 6) {
        a = hexstr.match(/(\w{2})/g);
      } else
        return hexstr;
      for (i=0; i<a.length; i++) {
        if (a[i].length == 2)
          a[i] = parseInt(a[i], 16);
        else {
          a[i] = parseInt(a[i], 16);
          a[i] = a[i]*16 + a[i];
      }
    }
    
    var maxColor = parseInt('ff', 16);
    
    function relsize(a) {
      if (a == maxColor)
      return Infinity;
      return a/(maxColor-a);
    }
    
    function relsizeinv(y) {
      if (y == Infinity)
      return maxColor;
      return maxColor*y/(1+y);
    }
    
    for (i=0; i<a.length; i++) {
      a[i] = relsizeinv(relsize(a[i])*r);
      a[i] = Math.floor(a[i]).toString(16);
      if (a[i].length == 1)
      a[i] = '0' + a[i];
    }
    return a.join('');
    }
    
    function showrainbow(f) {
      var colorcell, hex, i, nhex;
      hex = f.orig.value;
      hex = hex.replace(/\W/g, '');
      nhex = colorscale(hex, f.scalef.value-0);
      if (nhex != hex) {
        f.outp.value = nhex;
        colorcell = document.getElementById('origcolor');
        i = document.getElementById('newcolor');
        colorcell.style.background = '#' + hex;
        i.style.background = '#' + nhex;
        for (i=0; i<256; i++) {
          colorcell = document.getElementById('colorcell'+i);
          nhex = colorscale(hex, i/(256-i));
          colorcell.style.background = '#' + nhex;
          colorcell.nhexvalue = nhex;
        }
      }
    }
    </script>
    Step 2: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <div style="width: 400px;">
    <form>
    <p>
    Original color: <input type="text" name="orig" value="339990"><br>
    Scale factor: <input type="text" name="scalef" value="4"><br>
    <input type="button" value="Output" onclick="showrainbow(this.form)">
    <input type="text" readonly name="outp" style="border: none;">
    </p>
    </form>
    
    <table width="150">
    <tr>
    <td width="50%" height="50" id="origcolor">Original</td>
    <td width="50%" id="newcolor">New</td></tr>
    </table>
    
    <table cellpadding="0" cellspacing="0">
    <tr>
    <script type="text/javascript">
    for (i=0; i<256; i++)
    document.write('<td width="10" height="50" id="colorcell', i, '" onclick="document.forms[0].outp.value = this.nhexvalue"></td>');
    </script>
    </tr>
    </table>
    
    </div>






  • #2
    Nice, but will it work in IE9?

    Comment

    Working...
    X