Fire JS Bin - 10kcolor

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

/* jquery.mousewheel.min.js
 *
 * Copyright (c) 2009 Brandon Aaron (http://brandonaaron.net)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
 * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
 *
 * Version: 3.0.2
 * 
 * Requires: 1.2.2+
 */
(function (c) {
  var a = ["DOMMouseScroll", "mousewheel"];
  c.event.special.mousewheel = {
    setup: function () {
      if (this.addEventListener) {
        for (var d = a.length; d;) {
          this.addEventListener(a[--d], b, false)
        }
      } else {
        this.onmousewheel = b
      }
    },
    teardown: function () {
      if (this.removeEventListener) {
        for (var d = a.length; d;) {
          this.removeEventListener(a[--d], b, false)
        }
      } else {
        this.onmousewheel = null
      }
    }
  };
  c.fn.extend({
    mousewheel: function (d) {
      return d ? this.bind("mousewheel", d) : this.trigger("mousewheel")
    },
    unmousewheel: function (d) {
      return this.unbind("mousewheel", d)
    }
  });

// My code
$(function () {
  var c = 50,
      d = parseInt(Math.random() * 360),
      e = parseInt(Math.random() * 100),
      g = true,
      b = [0, 0, 0],
      h = "#000000";

<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Color</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <header>
      <h1>
        <span>1</span>
        <span>0</span>
        <span>k</span>
        <span>c</span>
        <span>o</span>
        <span>l</span>
        <span>o</span>
        <span>r</span>
      </h1>
      <p>Click anywhere to lock color — Scroll to change luminosity</p>
    </header>
    <div id="colorwrapper">
      <div id="color">
        <ul>
          <li id="rgb">
            <label>r <input /></label>
            <label>g <input /></label>
            <label>b <input /></label>
          </li>
          <li id="hex">hex <input /></li>
          <li id="hsl">
            <label>h <input /></label>
            <label>s <input /></label>
            <label>l <input /></label>
          </li>
        </ul>
      </div>
    </div>
    <footer>
      <a href="http://am.aurlien.net">Created by arnemart</a>
    </footer>
  </body>

</html>

body { background-color:hsl(40, 50%, 50%); font-family:HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:200; }
a { color:white; text-decoration:none; }
header h1 { font-family:HelveticaNeue-UltraLight, 'Helvetica Neue UltraLight', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100; font-size:60px; letter-spacing:4px; text-align:center; margin-left:auto; margin-right:auto; cursor:default; }
header p { text-align:center; margin:0 auto; background-color:rgba(0, 0, 0, 0.3); color:rgba(255, 255, 255, 0.7); width:27em; padding:1.5em 1em; -webkit-border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; border-radius:1em; opacity:0.6; }
header p:hover { background-color:rgba(0, 0, 0, 0.7); }
#colorwrapper { position:absolute; bottom:2em; width:99%; margin:0; }
#color { display:none; width:50em; margin:0 auto; opacity:0.6; height:5em; }
#color ul, #color li { padding:0; margin:0; }
input { font-size:1.3em; border:none; background-color:rgba(0, 0, 0, 0.7); color:white; -webkit-border-radius:0.3em; -moz-border-radius:0.3em; -o-border-radius:0.3em; border-radius:0.3em; padding:0.1em; text-align:center; }
#color li { list-style-type:none; display:block; text-align:center; background-color:rgba(0, 0, 0, 0.7); color:rgba(255, 255, 255, 0.7); padding:0.7em 1em; -webkit-border-radius:1em; -moz-border-radius:1em; -o-border-radius:1em; border-radius:1em; float:left; margin:1em; }
#hex input { width:5.5em; }
#rgb input, #hsl input { width:2.5em; }
footer { display:none; font-size:0.6em; color:white; opacity:0.3; background-color:rgba(0, 0, 0, 0.8); position:absolute; left:0; bottom:0; -webkit-border-top-right-radius:0.4em; -moz-border-topright-radius:0.4em; -o-border-top-right-radius:0.4em; border-top-right-radius:0.7em; padding:0.2em; }
::selection { background-color:white; color:black; }
::-moz-selection { background-color:white; color: black; }

Pop out