Created
October 14, 2012 08:27
-
-
Save netsi1964/3887956 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head>Testing incrementable</head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="span3" id="visual"> | |
| <div class="colorVisual"></div> | |
| <div class="colorVisual"></div> | |
| </div> | |
| <div class="span7"> | |
| <h3>Testing incrementable by <a href="twitter.com/leaVerou">@LeaVerou</a></h3> | |
| <blockquote> | |
| If you work with code where you need the user to be able to change a color value in a Firebug way, you will love the "<a href="http://raw.github.com/LeaVerou/incrementable">incrementable</a>" piece of code by <a href="twitter.com/leaVerou">@LeaVerou</a>.<br /> | |
| Use Arrows + modifies to change the values below. Modifiers:<br /> | |
| <code>CTRL + up or down arrow</code> : 0.1 +/-<br /> | |
| <code>up or down arrow</code> : 1 +/-<br /> | |
| <code>SHIFT + up or down arrow</code> : 10 +/-<br /> | |
| </blockquote> | |
| <ul> | |
| <li>Background patterns by <a href="twitter.com/leaVerou">@LeaVerou</a>: <a href="http://lea.verou.me/css3patterns">css3patterns</a></li> | |
| <li>Bootstrap theme: <a href="http://bootswatch.com/cyborg/bootstrap.min.css">cyborg</a> | |
| </ul></div> | |
| </div> | |
| <div class="row"> | |
| <div class="input-prepend" title="Red, green, blue + alpha"> | |
| <span class="add-on">RGBA</span><input class="span2" id="colorCode" size="16" type="text" value="rgba(110,70,210,.5)"> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| new Incrementable(document.getElementById('colorCode')); | |
| var $colorCode, colorCode, $colorVisualFirst, $colorVisualLast; | |
| jQuery(function() { | |
| $colorCode = jQuery('#colorCode'); | |
| $colorVisualFirst = jQuery('.colorVisual:first'); | |
| $colorVisualLast = jQuery('.colorVisual:last'); | |
| $colorCode.on('keyup change', function(e) { | |
| colorCode = jQuery('#colorCode').val(); | |
| oldColorCode = $colorVisualFirst.css('background-color'); | |
| $colorVisualLast.css('background-color', colorCode).attr('title', oldColorCode); | |
| $colorVisualFirst.css('background-color', colorCode).attr('title', colorCode); | |
| console.log(oldColorCode);}); | |
| $colorCode.trigger('keyup'); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .colorVisual { | |
| height: 7.5em; | |
| width: 15em; | |
| border: solid 5px white; | |
| border-radius: 1em; | |
| margin-bottom: .5em; | |
| } | |
| #visual { | |
| border-radius: 1em; | |
| padding: 2em; | |
| background: | |
| linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, | |
| linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, | |
| linear-gradient(315deg, #ECEDDC 25%, transparent 25%), | |
| linear-gradient(45deg, #ECEDDC 25%, transparent 25%); | |
| background-size: 100px 100px; | |
| background-color: #EC173A; | |
| margin-bottom: .5em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment