We’ve launched another new site at active website. Check it out at www.milestoneky.com

Don’t want to host heavy Javascript libraries for your sites? Want to decrease your server’s bandwith? Want javascript libraries that may already be cached on your users computer? Check out the Google AJAX Libraries API and see if your favorite library is available. At Active Website we have been implementing this technique on the last 4 sites to help increase site speed and decrease our bandwith usage. So far it has been working extremely well.  Check out the google page.

We’ve just completed a bunch of new sites at Active Website the company I currently work for. Check out our work!

http://ebby.com/

http://landvest.com/

http://smithandassociates.com/

Team Save Ferris, my redbull soapbox team from last year is back in 2009. Last year our team’s Ferris Bueller Ferrari took the 1st place prize and the people’s choice award at the race in Denver, CO in October. This year we will be building the Mach 5 from the movie and famous comic Speed Racer. The race will be September 26, 2009 In Los Angeles California.  Check out the old car and build at www.teamsaveferris.com. You can track our Facebook Group or our Facebook Profile. The new Team Speed Racer website is almost ready to go. The temp domain is located here. I’ll get a domain setup here in the next week or so.

I made it down for my second trip to the anual Chili Challenge in Las Cruces New Mexico This February. Had a ton of fun and am looking forward to making the trip for many years to come.  I also ended up on the front page of the Las Cruces Sun Times News Paper attempting to climb Nemis Two on Pats Cuaros Revenge. Click the following link to check out some photos from the event. http://sixfootsixdesigns.com/galleries/lascruces.html

I got to experience my first NASCAR race this year and it was all paid for by Redbull. Our grand prize for winning the 2008 Denver Redbull Soap Box Race was this NASCAR experience. You can read more about our trip on the Team Save Ferris website. http://teamsaveferris.com/?page_id=328

Here is a small gallery of the photos I took on the trip. http://sixfootsixdesigns.com/galleries/nascar_trip.html

I put up a quick gallery of some of my favorite rockcrawling photos. The pictures are of my buggy on some trails in New Mexico, Colorado, and Utah.

http://sixfootsixdesigns.com/galleries/

This is a cool little JS script to higlight table rows. The row will change colors when you hover over it. If you click the row it will change colors. If you click the row again it will go back to the origional color. Very similar to the row highlight that you see in phpMyAdmin. You will need prototype to make this work.

Here is the class:

<script type="text/javascript">
var RowHighlighter = Class.create({
initialize: function(element) {
this.element = $(element);
this.initEventHandlers();
},
initEventHandlers: function() {
this.element.observe('mouseover', this.handleMouseOver.bind(this));
this.element.observe('mouseout', this.handleMouseOut.bind(this));
this.element.observe('click', this.handleMouseClick.bind(this));
},
handleMouseOver: function(e) {
var element = e.element();
element.up(0).addClassName('hoverColor');
},
handleMouseClick: function(e) {
var element = e.element();
var final = element.up(0);
if(final.hasClassName('clickedColor')){
final.removeClassName('clickedColor');
}else{
final.addClassName('clickedColor');
}
},
handleMouseOut: function(e) {
var element = e.element();
element.up(0).removeClassName('hoverColor');
}
});
document.observe('dom:loaded', function() {
$$('table.rowHighlight tbody tr').each(function(table) { new RowHighlighter(table); });
});
</script>


Here is the style you need to add:


<style type="text/css">
tr.alternate{
background-color:#F2EBD1;
}
tr.clickedColor{
background-color:#FF9966;
}
tr.hoverColor{
background-color:#EAF3FA;
}
</style>


Now you need to build the table. Here is a sample:

<table class="rowHighlight">
<tbody>
<tr class="alternate">
<td>Username</td>
</tr>
<tr>
<td>Name</td>
</tr>
<tr class="alternate">
<td>Title</td>
</tr>
<tr>
<td>Email</td>
</tr>
<tr class="alternate">
<td>Permission Level</td>
</tr>
</tbody
</table>


Basically the class gathers up all the rows that are in any table with a class name of ‘rowHighlight’. Make sure you are using well formed tables with a tbody wrapping the table content. have fun.

I wrote this simple little function to check or uncheck all the checkboxes in a form. All you need are these two functions and prototype to make it work.

Here are the functions:

<script type="text/javascript">
function enableAllFunction(domEle){
$$(domEle).each(function(ele) { ele.checked = true; });
}
function disableAllFunction(domEle){
$$(domEle).each(function(ele) { ele.checked = false; });
}
</script>


Now in your form just give all the checkboxes the same class name:

<input type=”checkbox” class=”cbcol1″ name=”something” value=”1″ />

And here are your triggers:

<span onclick=”enableAllFunction(’.cbcol1′);”>Check All</span>

<span onclick=”disableAllFunction(’.cbcol1′);”>Uncheck All</span>

You can apply a bit of style to those two triggers to make them pretty.
Note: the onclick event that is in the trigger needs to have the class name of the checkboxes you want the button to apply to. So, if you want to use a different class name than “cbcol1″ simply change the class name on the checkboxes and on the trigger change the .cbcol1 to .whatever_your_class_name_is. Don’t foget the . in front of the class name. One nice feature about this is you can have multiple groups of checkboxes and their own triggers in the same page. Just make sure each group uses a different class name and their triggers matchup.

Have you ever had a client who wants fancy fonts on their site? Don’t want to make an image for every instance of that font? I have created a solution using flash that will solve all of your problems. You can embed the font into the swf file and then use something like SWFObject to embed it into your page. You can pass a string of text to render, the font-size, font-style(bold italics, regular, bold/italics), letter spacing, font-color, and even a drop shadow. You can also add a link to the text and use a bit a javascript to dynamically set the height of the object in the html based on the size of the string you send the swf. The object will even wrap the text based on the width you set the object to be.

Here is how you setup the script in your html using all the paramaters:


<div id="fontContainer"> </div>

<script type="text/javascript">
var so = new SWFObject("/flash/FontRenderV2.swf", "fontRenderOBJ", "100%", "100%", "8", "#000000");
so.addVariable("string", "some string"); //string
so.addVariable("fontColor", "FFFFFF"); //font color no #
so.addVariable("fontWeight", "0"); //0=regular, 1=bold, 2=italic,=bold/italic
so.addVariable("fontSize", "30"); //font size in px
so.addVariable("spacing", "0"); //letter spacing in px
so.addVariable("myURL", "http://someplace.com"); //url of the text will click to
so.addVariable("allowSelect", "1"); //selectable text 1 for yes 0 for no
so.addVariable("theWidth", "250"); //width of text box in px
so.addVariable("autoHeight", "1"); //use js to set object’s height dynamically 1 is true 0 is false
so.addVariable("myDiv", "fontRender"); //id of element where flash is to be embedded
so.addVariable("myFlash", "fontRenderOBJ"); // id of the swf object
so.addVariable("dropshadow", "true,3,120,0×000000,0.25,0,0,1,3"); //(do dropshadow:boolean,distance:int,angle:int,color:string 0xffcc33,alpha:int 1 to 0,xblur:int,yblur:int,strength:int,quality:int)
so.addParam("wmode", "transparent");
so.write("fontRender");
</script>


If you want to use the javascript bit to set the height of the object dynamically add this bit of code to the head of your page.

<script type="text/javascript">
function fontRenderAdjust(heightValue, divID, flash){
var eleDiv = $(divID);
var flashDiv = $(flash);
eleDiv.style.height = heightValue + "px";
flashDiv.style.height = heightValue + "px";
}
function fontRenderDomReady() {
return 'true';
}
</script>

You can download the fla here .
You will have to open the file up in flash and go to the library to see what fonts are currently embedded into the swf. You will have to select the properties for each font and select the font you would like to embed for your situation.