I threw together a color parsing library to help make my JavaScript colorpicker as small and accurate as possible. It is called TinyColor. One of the main goals is a small footprint – it clocks in at 8.98KB (3.41KB gzipped).
I have written in more detail about this on my TinyColor page. In it, I talk about the Color conversion, input recognition, color manipulation, scheme (combination) generation, and more.
I always forget these links, and they are surprisingly hard to find. Here is a quick markup skeleton to throw together for prototypes using jQuery UI.
<!doctype html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" />
<style type="text/css">
#draggable {
background: orange;
width: 100px;
height: 100px;
}
</style>
<script type='text/javascript'>
$(function() {
$("#draggable").draggable().resizable();
});
</script>
</head>
<body>
<div id='draggable'>drag!</div>
</body>
</html>I love jsFiddle! One feature that would make it even better is a lorem ipsum generator. When using Microsoft Word, you can type =lorem(100) and press enter, then it will generate 100 paragraphs of Lorem Ipsum for you. You can also type =rand(100) and it will pull in data from their help manual.
How great would it be to simulate large blocks of text without losing benefits of being able to scan html in a reduced test case? I don’t like losing the basic layout of the HTML panel when being hit with a wall of text.
Here is my proposed syntax for this:
<div data-lorem="100"></div>
See the demo on jsFiddle!
To use this now, just add this link as a resource to get support for this behavior: https://raw.github.com/bgrins/loremjs/master/lorem.js. I would love if this got baked into jsFiddle so I could use this without adding the resource!
This is based off of the great loremjs library. My fork (which adds support for non jQuery, changes a couple of the defaults, and wraps contents in <p> tags is here: https://github.com/bgrins/loremjs
<div id='words' data-lorem='20w'></div> <div id='sentences' data-lorem='20s'></div> <div id='paragraphs' data-lorem='10'></div>
When working on my javascript colorpicker, one of the things I thought would be really cool is if you could resize it and have the colorpicker automatically respond to different widths. When I first made it, I had basically defined static widths with the thought that there could be different themes (small, normal, large) which defined different widths.
This turned out to be a pain, since you had to manually figure out what each width needed to be for the total size. To complicate things further, I wanted to have a different percentage width when accessing the colorpicker via an iPhone. I found that the hue slider was a little too small to accurately slide with the touch interface, so I wanted it to take up more of a percentage of the total width. I’m can be lazy about calculating widths in CSS, so I went off looking for a different way to do this.
Why couldn’t I just use percentage widths? Because the left portion of the colorpicker needs to be a square – or else the gradients for saturation and value just look weird and don’t really map up 1:1. I did some searching and found a CSS workaround to keep the aspect ratio of a fluid element by ansciath. The meat of this trick is that according to the spec for margin-top, a percentage refers to the width of the containing block, not the height. This post got me much of the way there, but I had to include a couple of fixes for IE and ways.
The really nice part about using this technique is that it makes spectrum extremely easy to skin in your own CSS. Check out ColorStash for an example of this. Using media queries and max-widths, I can change the width of the colorpicker as the browser resizes to get some really responsive behavior on a UI control (colorpicker) that has typically been very static.
See the demo of the aspect ratio and media query. Try resizing your browser window to under 480px width to see the switch happen. Here is the full source code for the demo.
Below is a snippet showing the basic HTML/CSS needed for this technique:
<div class='container'>
<div class='outer'>
<div class='fill'></div>
<div class='inner-top'>
<div class='square'>Always a square</div>
<div class='right'>% width</div>
</div>
</div>
<div class='bottom'>
Bottom
</div>
</div>.outer { position:relative; width: 100%; display:inline-block; } .inner-top { position:absolute; top:0; left:0; bottom:0; right:0; } .square { position: absolute; top:0;left:0;bottom:0;right:20%; background:orange; } .right { position: absolute; top:0;right:0;bottom:0;left:83%; background: purple; } .fill { *height: 80%; margin-top: 80%; /* Same as square width */ } @media (max-width: 480px) { .square { right: 51%; background: blue; } .right { left: 51%; } .fill { margin-top: 49%; } }
I worked on a 10K Apart entry this year. I made a page explaining some of the development, and have my color picker / scheme generator hosted here.
I’m hoping to get the colorpicker docs and demos polished up so it could be used easily by anyone. The tinycolor color parsing library should be good to go if anyone needs that functionality. I’m guessing you don’t want to write that yourself… I would have gladly used someone else’s, but nothing really did just what I wanted. It handles hsl, hsv, hex, rgb, and named colors in a bunch of input formats (0-255, 0-1, 0%-100%, with and without parentheses and commas, etc).
For most browsers, you can use the linear gradient vendor property with multiple color stops. In IE, the filter property does not support color stops, so we have to fake it with 6 divs, each with a single color stop gradient. It works in Internet Explorer, back to version 5.5.
I made this while working on my JavaScript colorpicker, Spectrum. Check out the hue slider gradient demo on jsfiddle, where you can play with the source.
#hue { height:200px; width: 40px; background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000)); background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); background: linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } #ie-1 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00'); } #ie-2 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00'); } #ie-3 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff'); } #ie-4 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff'); } #ie-5 { height:16%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff'); } #ie-6 { height:17%; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000'); }
Not exactly pretty, but it is one way to get multiple color stops in Internet Explorer working.
I have been wanting to add colorpickers in a couple of projects recently, and was not happy with the options. Just search JavaScript Colorpicker and you’ll see what I mean. It got me thinking about what I wanted out of a colorpicker.
It is pretty well known that you should limit the number of images that your web page requests for performance reasons. Some of these, including the eyecon.ro picker, which is the first that shows up when searching ‘jQuery colorpicker’, require a ton of images (27, in fact). This is overkill. Why can’t it be skinned with HTML/CSS?
I found myself having to dig through the source code of various colorpickers in order to get them to act how I wanted. Maybe my experience on this is unique, but once I wanted to actually script behavior to go along with the picker (think – a template editor for an online portfolio), it became painful quickly.
It needs to support all major browsers (even IE). Ideally it could also support mobile devices.
Didn’t want to have to download zip folders, place a bunch of images in my project and modify css files to point to the correct image path, etc. I just want to include a single JavaScript file, and a single CSS file, and be done.
I did find the nifty FlexiColorPicker, which accomplishes the no images goal with SVG and VML. It seems very nice, but didn’t have some of the features I wanted (dragging around the hue slider and picker didn’t actually work). I’m glad I found it, as I did use some of the gradients as a starting point with my CSS gradients.
I have done a fair amount of color manipulation work while building a color scheme generator in a theme editor. I also have made a JavaScript color micro framework for parsing and conversion, called TinyColor. This is designed to allow a wide range of input and output (named colors, hex, rgb, hsl, hsv).
So, I decided to try my hand at this, and made the spectrum JavaScript colorpicker.
It works in all major browsers (tested in Safari, Chrome, Firefox, IE 7+, iOS, Opera). It uses IE’s propriety gradient filter (with some hacks for the hue slider – see .spectrum-ie-1 through 8 in spectrum.css. It should even work in iPhone and iPad – let me know if you have one and can double check that for me over on the demo page :). It is still in early stages, but I would love if I could get some feedback on the UI and desired functionality.
Head over to the current project page to try out the demo and see the docs.
It currently requires jQuery, but I have been trying to write the code to make it possible to remove that dependancy.
Note: this is a cross posting from my article at the foliotek devblog. This improves some of the code formatting.
Have you ever wondered why the box to change the name or “Alias” on an application or virtual directory is greyed out (see screenshot below)? I found a way to change the name without recreating all your settings. It uses the built in administration commands in IIS7, called appcmd.
Open a command prompt to see all of your applications.
C:> %systemroot%\system32\inetsrv\appcmd list app APP "Default Web Site/OldApplicationName" APP "Default Web Site/AnotherApplication"
Run a command like this to change your “OldApplicationName” path to “NewApplicationName”. Now you can use http://localhost/newapplicationname
C:> %systemroot\%system32\inetsrv\appcmd set app "Default Web Site/OldApplicationName" -path:/NewApplicationName; APP object "Default Web Site/OldApplicationName" changed
Open a command prompt to see all of your virtual directories.
C:> %systemroot%\system32\inetsrv\appcmd list vdir VDIR "Default Web Site/OldApplicationName/Images" (physicalPath:\serverimages) VDIR "Default Web Site/OldApplicationName/Data/Config" (physicalPath:\serverconfig)
We want to rename /Images to /Images2 and /Data/Config to /Data/Config2. Here are the example commands:
C:> %systemroot%\system32\inetsrv\appcmd set vdir "Default Web Site/OldApplicationName/Images" -path:/Images2 VDIR object "Default Web Site/OldApplicationName/Images" changed C:> %systemroot%\system32\inetsrv\appcmd set vdir "Default Web Site/OldApplicationName/Data/Config" -path:/Data/Config2 VDIR object "Default Web Site/OldApplicationName/Data/Config" changed
I have implemented DrawWindow (HTML rendering) functionality in Canvas. It is essentially rendering HTML inside of the canvas tag without modifying the original DOM. This took a lot of trial and error, but it is working pretty well now. The code is online here: https://github.com/bgrins/DrawWindow, and a really minimal project page is here: DrawWindow demo.
I recently found a very good implementation of this same functionality, called html2canvas, that was just released. That implementation includes nice demos and a test console, so it is worth checking out. That version is quite a bit more polished, so when I work on mine more, I will have to check out some of the great work here: https://github.com/niklasvh/html2canvas.
This functionality is necessary for web design type applications that require a colorpicker based on the current DOM, or for feedback type applications that require sending screenshots. Great to see this being built out!
I was playing around with unscrambling words recently, and decided to implement a solver in JavaScript. I called it wordsolver.js.
There is a wordsolver demo on my site. Try typing in URESMTA or something to see all the words that get unscrambled.
All code can be found in the wordsolver repository on github. In particular, here is the file that does all the heavy lifting. It is all available under the MIT license.
Smoother than I expected it to. The load time for the dictionaries can be pretty slow (they are anywhere from 1.7MB to 2.6MB depending on the dictionary), but once it loads, it finds words pretty fast and tries to cache results. Warning: it will probably crash an iPhone while trying to load the dictionary array into memory