Tony Amoyal’s Blog

developer, entrepreneur, musician

I have yet to find a solution for making rounded inputs without an image. I hacked one together today because I feel like it will me a lot of time. While the solution is hackish, I like it better than going into photoshop and making an image every time I want to change the length of a text input.

The solution has two dependencies: jQuery and jQuery.corner. Download jQuery here and jQuery.corner here.

You can skip the explanation and go straight to the demo, or check out this quick explanation. Note that this code is not too smart quite yet and you may have to mess with some of the values depending on the size of your text inputs. I still think it beats the crap out of getting on photoshop for every change.

First you must include the necessary files:

<script src="./js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.corner.js" type="text/javascript"></script>

and the roundInput function with the function calls:

/* input_id is the ID of the input element */
/* container_class will let you control the text input background color and padding */
/* border_class will let you control the border color */
function roundInput(input_id, container_class, border_class){
	var input = $('#'+input_id+'');
	var input_width = input.css("width"); //get the width of input
	var wrap_width = parseInt(input_width) + 10; //add 10 for padding
	wrapper = input.wrap("<div class='"+container_class+"'></div>").parent();
	wrapper.wrap("<div class='"+border_class+"' style='width: "+wrap_width+"px;'></div>"); //apply border
	wrapper.corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border
}
 
/* round 2 inputs */
$(function(){
	roundInput('rounded_input1','rounded_container','rounded_border');
	roundInput('rounded_input2','rounded_container','rounded_border');
});

Obviously replace the above roundInput function calls with your own input id, container class, and border class. The CSS below allows you to control the border color, text input background color, and the space between the text input and the rounded corners.

<style>
/* Container class */
div.rounded_container{
        /* This background color should have the same background color as your text input */
        /* Changing this color will show you how the rounded input is laid out */
        background-color: #fff;
        /* This padding is between the text input and the rounded border on all sides */
        /* Decreasing the value may interfere with the rounded corners */
        padding: 4px;
}
/* Border class */		
div.rounded_border {  
	/* This is the color of your rounded border */
	background: #6666ff; 
}
input.rounded_input{
	border:0;
}
</style>

And finally the text inputs to round (replace these with your own):

<input id="rounded_input1" type="text" class="rounded_input" style="width: 286px;" />
<input id="rounded_input2" type="text" class="rounded_input" style="width: 286px;" />

This code has not been heavily tested, but it looks great on FF and IE7. I will post updated code as this gets better and more flexible.

Enjoy the demo!

If you enjoyed this post, make sure you subscribe to my RSS feed!

I added a start_hour and end_hour feature to my simple time select. Here are the details from the README:

Simple time select also takes a start_hour and end_hour option to be specified in military format (between 0-23).

<%= time_select "event", "time", { :default => Time.now.change(:hour => 21), :simple_time_select => true, 
:minute_interval => 20, :time_separator => "", :start_hour => 10, :end_hour => 14 } %>

The start hour behaves as you would expect but the end_hour may not. If you specify the end_hour as 10, your time select will include 10:15, 10:30, 10:45. So the end_hour sets the last hour that the time select will include. Leave a comment if you want me to change this.

The code is hosted on github here: http://github.com/tamoyal/simple_time_select/tree/master

If you enjoyed this post, make sure you subscribe to my RSS feed!

Dave Methvin wrote a plugin for jQuery to easily round corners. Then Mike Alsup improved on the plugin by adding more effects. Mike’s solution for adding a rounded border is great but he doesn’t give good copy and paste code. I had to dig through the source on the page to figure out some usage. He also misses (or I cannot find) an important piece - some of us want to specify the dimensions of our rounded box with rounded borders. Before using this code, you need to make sure you have downloaded jQuery and jquery.corner.js and obviously include them on your page.

Here is a simple explanation and example with code:

div.rounded_box{
    background-color: #ccdaff; 
    color: #333; 
    padding: 10px;
    border:0;
    margin: 0;
    zoom:1;
}
/* border with rounded corners */
div.rounded_border {  background: #6666ff; padding: 8px; }

That is the CSS for the rounded box and rounded border to go around the box. The only attributes you should need to change are anything color related and the padding (pretty obvious what they do but you can mess with the values after you get this example working).

Now you have 2 options for your HTML/Javascript set up (note that I have namespaced my jQuery functions to $j instead of $). The first option is probably a bit faster while the second option avoids an extra wrapper div in your code, allowing you to specify the width inline. Here is the first option:

<div style="width: your width here;">
     <div id="my_rounded_box_id1" class="rounded_box">
          <p>Content</p>
     </div>
</div>
 
<div style="width: your width here;">
     <div id="my_rounded_box_id2" class="rounded_box">
          <p>Content</p>
     </div>
</div>

     $j(function(){
         $j('div.rounded_box').wrap('<div class="rounded_border"></div>'); //apply border
	 $j('div.rounded_box').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border
     });

Here is the second option:

<div id="my_rounded_box_id1" class="rounded_box" style="width: your width here;">
     <p>Content</p>
</div>
 
<div id="my_rounded_box_id2" class="rounded_box" style="width: your width here;">
     <p>Content</p>
</div>

function roundDiv(id){
	var tmp_width = $j('#'+id+'').css("width"); //get the width of target el
	$j('#'+id+'').css("width",""); //clear width value (or else corners screws up)
	$j('#'+id+'').wrap('<div class="rounded_border" style="width: ' +tmp_width+ ';"></div>'); //apply border
	$j('#'+id+'').corner("round 8px").parent().css('padding', '2px').corner("round 10px"); //round box and border
}
 
$j(function(){
 	//round each box separately so that we can specify inline dimensions
	roundDiv('my_rounded_box_id1');
	roundDiv('my_rounded_box_id2');
});

Enjoy!

UPDATE: After some more testing, the second option seems to be more cross browser compatible. I highly recommend using that option.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Drag and drop is broken in the Wordpress Sociable plugin which means you cannot easily reorder your bookmarking options. I have seen posts 2 weeks old asking for a fix for this and I am too impatient…so here it is.

Navigate to your sociable plugin directory and create a file called “sociable-admin.js”. Add the following code to the file:

jQuery(document).ready(function(){
  jQuery("#sociable_site_list").sortable({});
});
/* make checkbox action prettier */
function toggle_checkbox(id) {
	var checkbox = document.getElementById(id);
 
	checkbox.checked = !checkbox.checked;
	if (checkbox.checked)
		checkbox.parentNode.className = 'active';
	else
		checkbox.parentNode.className = 'inactive';
}

Save the file and reload your sociable admin panel. Drag and drop should work now.

If you enjoyed this post, make sure you subscribe to my RSS feed!

Today I ran into a situation where I wanted my ComboBox drop down text to have a 9px font size and a 10px font size on the text input portion. This is a problem because your labels can easily get cut off.

Ugly:

I think this is prettier:

Here is how to do it:

<mx:Script>
	<![CDATA[
            private static const CARRIER_TEXT_MAX_WIDTH:int = 18;
            private function truncatePrompt():void{
		if(carrier_select.text.length > CARRIER_TEXT_MAX_WIDTH){
		   carrier_select.text = carrier_select.text.slice(0,CARRIER_TEXT_MAX_WIDTH-3) + "...";
		}
	     }
	]]>
</mx:Script>
<mx:ComboBox id="carrier_select" rowCount="5" height="26" width="154" 
		dataProvider="{carriers}"
		change="truncatePrompt()" />

You will obviously have to change the CARRIER_TEXT_MAX_WIDTH to fit your needs. Note that calling this on the “change” event is not as pretty because there is a delay.
UPDATE:
Turns out for this to work properly you will have to call the function from the change event. Sorry for not testing this more before I posted.

If you enjoyed this post, make sure you subscribe to my RSS feed!

I will generally stay away from posting other people’s content on my blog because this is not a news site. But I really liked this presentation… (sorry if it is a bit slow loading, slideshare isn’t perfect)

If you enjoyed this post, make sure you subscribe to my RSS feed!

It should be really easy to create the template for a widget with rounded corners in Flex. It is certainly not a difficult task, but it is not obvious. Rather than explain the things you need to pay attention to, I will just post the code below. After setting up a flex project with the following code, add and remove some lines to see what they do. Feel free to post any questions you have here.

Here is the application code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" width="450" height="220" backgroundAlpha="0">
 
	<mx:Style>
		Panel {
		   borderStyle: solid;
		   borderThickness: 0;
		   cornerRadius: 10;
		   borderColor: #cccccc;
		   backgroundColor: #eeeeee;
		   roundedBottomCorners: true;
		}
	</mx:Style>
 
	<mx:Panel id="application_container" width="100%" height="100%" 
		dropShadowEnabled="false">
 
	</mx:Panel>
 
</mx:Application>

In your wrapper file, make sure to set wmode to transparent. Here is how you do it with SWFObject (assuming your object is “so”):

so.addParam("wmode","transparent");

If you enjoyed this post, make sure you subscribe to my RSS feed!

If you are using Adobe Flex forms, chances are you have come across validators. I do not like the way validators work out of the box, and it is a real pain to work against them. I will post a better way to validate your forms later. For now, I want to show you how to save real estate in your Flex forms when using validators.

The error tool tips associated with validators are big. I will show you how to make them smaller.

Add this CSS to your Flex project (mx:style tag or external css file):

.errorTip { 
			borderColor: #0000FF;
			paddingTop: 0;
			paddingBottom: 0;
			paddingLeft: 4;
			paddingRight: 4;
			fontWeight: bold;
			fontSize: 9px;
			backgroundColor: #0000ff;
			cornerRadius: 8;
		}
ToolTip{
     borderSkin: ClassReference("com.your_project_name.skins.SmallToolTip");
}

Then put a file called SmallToolTip.as in your com.__________.skins (fill in the blank) directory with these contents:

package com.your_project_name.skins
{
	import mx.skins.halo.HaloBorder;
	import mx.core.mx_internal;
	import flash.display.Graphics;
 
	use namespace mx_internal;
 
	public class SmallToolTip extends HaloBorder
	{
		public function SmallToolTip()
		{
			super();
		}
 
		override mx_internal function drawBorder(w:Number, h:Number):void{
			super.drawBorder(w,h);
			// Draw a small tail at the bottom left side of the tooltip
			var gr:Graphics = graphics;
			gr.beginFill(getStyle('borderColor'), 1);
			gr.moveTo(x + 7, y + h);
			gr.lineTo(x + 10, y + h + 4);
			gr.lineTo(x + 13, y + h)
			gr.moveTo(x + 7, y + h);
			gr.endFill();
		}	
	}
}

This only works for drawing a tool tip with the tail at the bottom left. But you can draw a tail wherever you want by altering the Graphics code which is super easy. Removing the padding and drawing a smaller tail are the two big ways to make the tool tip take up less real estate, with the least amount of work.

Before:

After:

If you enjoyed this post, make sure you subscribe to my RSS feed!

In some cases, the Ruby on Rails time_select helper is much uglier than it needs to be. It spits out 3 select boxes for the hour, minutes, and seconds. Your users do not always need accuracy to the minute. For example, you do not schedule doctor’s appointments for 3:13PM. You would at least round to the nearest 15 minutes. Another shortcoming of the rails time_select helper is that you cannot configure it for 12 hour AM/PM times by default. You must write your own plugin to make this happen.

Yesterday I decided that I wanted a really simple time_select component for my Ruby on Rails application. Specifically, a time_select with only ONE select field. I developed the Simple Time Select plugin to do this, as well as handle minute intervals. For example, if you set your minute interval to 15, you get options such as: “6:00 PM”, “6:15 PM”, “6:30 PM”, etc. As you can see from the screen shot (where the interval is set to 20 minutes), this control also implements an AM/PM time format.

Also note that this component is great if you ONLY care about the time input from a user. As is, the helper does not generate the hidden date fields associated with the usual time_select helper.

Visit the github page to read more and install the plugin:
http://github.com/tamoyal/simple_time_select/tree/master

If you enjoyed this post, make sure you subscribe to my RSS feed!

A couple months ago my company, Total Music, went under. Total Music was to provide an ad-based music streaming API and social music player. It is the third start-up company that has employed me as a software engineer, and I have learned a lot about product development from my start-up experiences.

One week after Total Music went under I decided to start a company based on some band marketing software I had written with a fellow hacker, Dan Noble. We have been working on the software part-time for about a year, but the progress has been too slow. The lack of progress on my end was certainly a result of my schedule being filled with work, exercise, guitar practice, band practice, small software projects, socializing, etc. As of Monday 3/30, my main focus is my company.

There are quite a few competitors in the band marketing space and I know the road to success will be difficult. However, I have been in bands for over 10 years and have good connections in the music industry. It is the market I know best.

I estimate spending 60 hours/week coding, 10-20 on other start-up related stuff, and 10 consulting to make a little cash. My blog posts will fall into 3 categories during this venture: life, business, and code. Over the next few weeks, I will separate the posts to create a better experience for my readers.

If you enjoyed this post, make sure you subscribe to my RSS feed!