Foliotek Developer Blog

Color Scheme Generator in JavaScript

ColorStash is a tiny web app I built for the 10K Apart contest. The goal of the contest is to build an application in under 10 Kilobytes. This includes all HTML, JavaScript, CSS, and images. This is a tight limit, but luckily you can include jQuery and not have it count against your size quota.

The main goal is to provide an easy way for to choose a nice color or scheme, and output those colors in a variety of formats. It supports hex, css names, rgb, hsv, and hsl as input and output formats. You don’t really need to know anything about these formats to use the colorpicker or built in image eyedropper.

I started learning about color when working on the template editor and color schemes

You can read more http://www.briangrinstead.com/blog/colorstash, check out the 10K entry, or see the more permanent (and possibly bigger than 10K as I make updates) app here: http://briangrinstead.com/colorstash/.


A simple Formatted ToolTip text on hover

The task was to add a formatted “ToolTip” message when hovering on a “More” link. ?On a certain report, some of the names got pretty long. ?Instead of wrapping text on the report, the desire was to simply truncate the name, then allow the user to see the entire name by hovering over the “More” link. ?However, we wanted more than just the built-in ToolTip look.

I’ve seen JavaScript implementations of this, but I was looking for a simpler solution. ?This is what I came up with:

The Mark-up

?<%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>

<%# (Eval("Name").ToString().Length > 65) ? "More" : "" %> <%# Eval("Name") %>

The CSS

[sourcecode lang="css"]
.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}
[/sourcecode]

Comment

The key is the first two lines of the CSS, specifically hiding the .hovertext node until the mouse hovers over the .showonhover node. ?This is a pretty simple solution, but it wasn’t immediately apparent to me, so I thought I’d share it with others who may have the same initial mental block that I had.