Six Foot Six Designs

Six Foot Six Designs http://www.sixfootsixdesigns.com Web Development and Personal Portfolio Wed, 20 Jul 2011 05:33:24 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Browser Specific Style Sheets Without The Extra Style Sheets http://www.sixfootsixdesigns.com/223/browser-specific-style-sheets/ http://www.sixfootsixdesigns.com/223/browser-specific-style-sheets/#comments Wed, 20 Jul 2011 05:08:46 +0000 james http://www.sixfootsixdesigns.com/?p=223 Continue reading →]]> I’ve been working on a lot of sites that required certain css hacks and adjustments as of late and came up with a pretty good way to handle all of this without having to use a special style sheet.

The first thing thing you need to do is add a class name or names to the body tag in the HTML markup. My classes basically work as follows:

IE 6: <body class="browser_ie_6"> IE 7: <body class="browser_ie_7"> IE 8: <body class="browser_ie_8"> IE 9: <body class="browser_ie_9"> firefox: <body class="browser_firefox"> chrome: <body class="browser_chrome"> safari: <body class="browser_safari"> ipad: <body class="browser_ipad">

I’ll show you how to get these browsers with php here in a second but lets first get to how the css works.

Lets say you have a style sheet for forms on your web page and all your input fields with a class name of “textField” are 110px wide. Now lets say that in IE 7 they need to be 106px wide so they match your design.

To solve this all you need to do is something like this:input.textField{ width: 110px; } /* adjust for ie7 */ body.browser_ie_7 input.textField{ width: 106px; }

Now you have successfully adjusted the size of the text box in only IE 7 without having to load a new style sheet. In addition, you don’t have to go looking around all kinds of css files to find where you made adjustments. If you have to change the default size to say 115 it is super easy to make the adjustments in other browser because their code is in the same place.

So how do I figure out my browser?
Well here is the php code:

<?php function getBrowserInfo() { $info = array(); $browsers = array ("IE", "OPERA", "MOZILLA", "NETSCAPE", "FIREFOX", "CHROME", "IPAD", "SAFARI"); $operating_system = array ("WIN", "MAC", "LINUX"); $info['browser'] = "UNKNOWN"; $info['version'] = "UNKNOWN"; $info['classname'] = "UNKNOWN"; $info['operating_system'] = "UNKNOWN"; foreach ($browsers as $browser) { $s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $browser); $f = $s + strlen($browser); $version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5); $version = preg_replace('/[^0-9,.]/','',$version); if ($s) { $info['browser'] = $browser; $info['version'] = floatval($version); $info['classname'] = 'browser_' . strtolower($browser); if ($browser == "IE") { $info['classname'] .= '_' . $info['version']; } break; } } foreach ($operating_system as $os) { preg_match("/$os/", strtoupper($_SERVER['HTTP_USER_AGENT']), $os_match); if (isset($os_match[0])) { $info['operating_system'] = $os_match[0]; } } return $info; } $template_body_class = getBrowserInfo(); ?>

In your template you could do something like this:<body class="<?php echo $template_body_class['classname']; ?>">

Well that pretty much covers it so have fun!

]]> http://www.sixfootsixdesigns.com/223/browser-specific-style-sheets/feed/ 0 Farmington May 2011 http://www.sixfootsixdesigns.com/219/farmington-2011/ http://www.sixfootsixdesigns.com/219/farmington-2011/#comments Sun, 29 May 2011 23:46:52 +0000 james http://www.sixfootsixdesigns.com/?p=219 Continue reading →]]> We went to Farmington, NM for a few days this spring. The weather for the first couple days was total crap with tons of rain but it finally cleared up towards the end of the week and we all had a blast! The buggy did well on its first trip with the new 6.0L and was able to use lots of skinny pedal!

]]> http://www.sixfootsixdesigns.com/219/farmington-2011/feed/ 0 gallery test http://www.sixfootsixdesigns.com/200/gallery-test/ http://www.sixfootsixdesigns.com/200/gallery-test/#comments Wed, 12 Jan 2011 06:23:06 +0000 james http://www.sixfootsixdesigns.com/?p=200

Enter title

Enter title

Enter title

gallery goes in here.

]]> http://www.sixfootsixdesigns.com/200/gallery-test/feed/ 0 Rangely September 26, 2010 http://www.sixfootsixdesigns.com/123/rangely-september-26-2010/ http://www.sixfootsixdesigns.com/123/rangely-september-26-2010/#comments Sun, 03 Oct 2010 18:55:20 +0000 james http://www.sixfootsixdesigns.com/?p=123 Continue reading →]]> We went to Rangely, CO for the annula Rangely Rock Crawl and Trail Ride. The event was awesome and the people where very friendly. I took 3rd place in the competition and here are a few pictures from the trails.

Going so fast it’s blurry :D

]]> http://www.sixfootsixdesigns.com/123/rangely-september-26-2010/feed/ 0 Carnage Buena Vista October, 3 2010 http://www.sixfootsixdesigns.com/119/carnage-buena-vista-october-3-2010/ http://www.sixfootsixdesigns.com/119/carnage-buena-vista-october-3-2010/#comments Sun, 03 Oct 2010 18:48:07 +0000 james http://www.sixfootsixdesigns.com/?p=119 Continue reading →]]> Wally, Greg, Eric and myself headed up and ran carnage today. Had a blast and we were the only ones on the trail all day. Wally and I both drove the middle line of the exit with little help from our 6 Liters. Eric drove out the top left and Greg well Greg didn’t fair as well and ended up flopped on his side and very lucky he wasn’t sitting at the bottom of the hill changing his shorts. Here are a TON of pics.

]]> http://www.sixfootsixdesigns.com/119/carnage-buena-vista-october-3-2010/feed/ 0 Prototype Tabs http://www.sixfootsixdesigns.com/82/prototype-tabs/ http://www.sixfootsixdesigns.com/82/prototype-tabs/#comments Sat, 11 Sep 2010 05:38:26 +0000 james http://www.sixfootsixdesigns.com/?p=82 Continue reading →]]> Ever needed a good javascript class for making tabs that was SEO friendly and failed gracefully if the user did not have javascript?
Well here is a great solution that works in all modern browsers.

Javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="jo_tabs.js"></script> <script type="text/javascript"> document.observe("dom:loaded", function() { new jo_tabs('wrapperID'); }); </script>

Markup:

<div id="tabWrapper"> <ul class="tab_triggers"> <li><a href="#tab1">tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab2">Tab 3</a></li> </ul> <div class="tabs_body"> <div class="tab_item"> <a name="tab1"></a> <h2 class="removeHeading">Tab 1</h2> <p>Tab 1 content</p> </div> <div class="tab_item"> <a name="tab2"></a> <h2 class="removeHeading">Tab 2</h2> <p>Tab 2 content</p> </div> <div class="tab_item"> <a name="tab3"></a> <h2 class="removeHeading">Tab 3</h2> <p>Tab 3 content</p> </div> </div> </div>

CSS:

<style type="text/css"> #tabWrapper{ margin:0; padding:0; } .tab_triggers{ margin:0; padding:0; height:11px; list-style:none; } .tab_triggers li{ background-color: #ccc; margin:0 5px 0 0; float:left; display:block; border:1px solid #000000; border-bottom:none; } .tab_triggers li a{ color:#000000; display:block; font-size:12px; height:25px; outline:none; line-height:25px; padding:0 10px; text-decoration:none; } .tab_triggers li a:hover{ text-decoration:underline; } .tabs_body{ border:1px solid #000000; padding:16px; } .tab_triggers li.active_tab{ background-color:#FFFFFF; color:#333; border-bottom: 1px solid #FFFFFF; } </style>

Usage:

Simply use the above example code to build your tabs. Note, anything with the class name “removeHeading” will be hidden when the script fires. This is for SEO so you can keep the sections optimizes.

Demo:

Download

Download the class and example here jo_tabs.zip

]]> http://www.sixfootsixdesigns.com/82/prototype-tabs/feed/ 0 Prototype Crossfade Gallery http://www.sixfootsixdesigns.com/78/prototype-gallery/ http://www.sixfootsixdesigns.com/78/prototype-gallery/#comments Sat, 11 Sep 2010 05:31:49 +0000 james http://www.sixfootsixdesigns.com/?p=78 Continue reading →]]> Here is a very simple and robust Prototype JS based gallery class that provides a nice crossfade effect for elements on your page. Based on what options you set for the class, you can make anything from a simple fading gallery with no controls to a full blown gallery with next previous stop and play buttons. The gallery will rotate through all the first children of a dom element. (see the markup below)

Javascript Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="pt_cycle.js"></script> <script type="text/javascript"> document.observe("dom:loaded", function() { new pt_cycle('someID'); }); </script>

Markup:

<div id="someID"> <div> <img src="" alt="" /> <p>some text</p> </div> <div> <img src="" alt="" /> <p>some text</p> </div> <div> <img src="" alt="" /> <p>some text</p> </div> <div> <img src="" alt="" /> <p>some text</p> </div> </div>

Script Options:

The script will rotate over each first child div of the div with the id "someID". There are several options that you can pass in to accomplish different things. They are as follows:

prev: null (id of a previous button)
next: null (id of a next button)
speed: 1 (transition speed in seconds)
timeout: 5000 (time of show 5000 = 5 seconds)
pause: 1 (1 for yes 0 for no if 1, show will pause if you hover over the show with your mouse)
stopAfterClick: false (if true, once the user clicks a next or prev button the show will stop auto play)
random: false (true or false to randomize the order of the show)
rotate: true (true or false to start rotation of show on load)
play_stop: null (id of a play/stop button)
stopBtnSrc: null (image source of stop button)
playBtnSrc: null (image source of play button)

To use the above options simply add them in the constructor like this:

<script type="text/javascript"> document.observe("dom:loaded", function() { new pt_cycle('someID', { next:'nextID', prev:'prevID', timeout:7000 }); }); </script>

Demo:

Download:

Get the script here pt_cycle.zip

The only real css you need is to set a width and height of the main div wrapper. I like to apply an overflow:hidden just to make it look nice before the JS has a chance to fire.

]]> http://www.sixfootsixdesigns.com/78/prototype-gallery/feed/ 0 More Site Launches at Active http://www.sixfootsixdesigns.com/47/more-site-launches-at-active/ http://www.sixfootsixdesigns.com/47/more-site-launches-at-active/#comments Fri, 10 Sep 2010 05:44:42 +0000 james http://www.sixfootsixdesigns.com/?p=47 We’ve been busy and have launched a few more clients at Active Website.

]]> http://www.sixfootsixdesigns.com/47/more-site-launches-at-active/feed/ 0 Independence Trails, September 2010 http://www.sixfootsixdesigns.com/128/independence-trails-september-2010/ http://www.sixfootsixdesigns.com/128/independence-trails-september-2010/#comments Fri, 03 Sep 2010 19:14:02 +0000 james http://www.sixfootsixdesigns.com/?p=128 Continue reading →]]> Headed up to do the Independence trail system near Penrose CO here are some photos. and a few videos

Videos

More Photos Here

]]> http://www.sixfootsixdesigns.com/128/independence-trails-september-2010/feed/ 0 Active Website Site Launch http://www.sixfootsixdesigns.com/29/active-website-site-launch/ http://www.sixfootsixdesigns.com/29/active-website-site-launch/#comments Sat, 09 Jan 2010 02:22:37 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=29 We’ve launched another new site at active website. Check it out at www.milestoneky.com

]]> http://www.sixfootsixdesigns.com/29/active-website-site-launch/feed/ 0 Rangely, CO 2009 http://www.sixfootsixdesigns.com/137/rangely-2009/ http://www.sixfootsixdesigns.com/137/rangely-2009/#comments Sat, 03 Oct 2009 19:31:04 +0000 james http://www.sixfootsixdesigns.com/?p=137 Here is our trip report for Rangely 2009

]]> http://www.sixfootsixdesigns.com/137/rangely-2009/feed/ 0 Google AJAX Libraries API http://www.sixfootsixdesigns.com/28/google-ajax-libraries-api/ http://www.sixfootsixdesigns.com/28/google-ajax-libraries-api/#comments Sat, 08 Aug 2009 06:13:44 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=28 Continue reading →]]> 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.

]]> http://www.sixfootsixdesigns.com/28/google-ajax-libraries-api/feed/ 0 Recent Projects @ Active Website http://www.sixfootsixdesigns.com/27/recent-projects-active-website/ http://www.sixfootsixdesigns.com/27/recent-projects-active-website/#comments Sat, 08 Aug 2009 06:02:45 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=27 We’ve just completed a bunch of new sites at Active Website the company I currently work for. Check out our work!

Smith And Associates

]]> http://www.sixfootsixdesigns.com/27/recent-projects-active-website/feed/ 0 Redbull Soapbox Los Angeles 2009 http://www.sixfootsixdesigns.com/26/redbull-soapbox-los-angeles-2009/ http://www.sixfootsixdesigns.com/26/redbull-soapbox-los-angeles-2009/#comments Sat, 08 Aug 2009 05:58:44 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=26 Continue reading →]]> 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 Team Speed Racer website is located www.goteamspeedracer.com.

UPDATE:We took 3rd place in the event as well as taking the People’s Choice award. The event was fantastic and over 100,000 people showed up. The track was intense with jumps and a giant berm halfway down the track. Speeds reached 40 miles an hour and we had a blast! Read more about the event on our speed racer website linked above.
Here are a few photos. View Slideshow

]]> http://www.sixfootsixdesigns.com/26/redbull-soapbox-los-angeles-2009/feed/ 0 Independence Trails 2009 http://www.sixfootsixdesigns.com/149/independence-trails-2009/ http://www.sixfootsixdesigns.com/149/independence-trails-2009/#comments Thu, 11 Jun 2009 04:35:51 +0000 james http://www.sixfootsixdesigns.com/?p=149 Here is a trip report for Indy in 2009

]]> http://www.sixfootsixdesigns.com/149/independence-trails-2009/feed/ 0 2009 Samsung 500 at Texas Motor Speedway http://www.sixfootsixdesigns.com/24/2009-samsung-500-at-texas-motor-speedway/ http://www.sixfootsixdesigns.com/24/2009-samsung-500-at-texas-motor-speedway/#comments Sun, 26 Apr 2009 22:27:55 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=24 Continue reading →]]> 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. View Slideshow

]]> http://www.sixfootsixdesigns.com/24/2009-samsung-500-at-texas-motor-speedway/feed/ 0 Moab, UT March 2009 http://www.sixfootsixdesigns.com/135/moab-ut-march-2009/ http://www.sixfootsixdesigns.com/135/moab-ut-march-2009/#comments Tue, 03 Mar 2009 19:30:13 +0000 james http://www.sixfootsixdesigns.com/?p=135 Headed out to Moab for Mothers Day and here are some photos.

]]> http://www.sixfootsixdesigns.com/135/moab-ut-march-2009/feed/ 0 Las Cruces Chili Challenge February 2009 http://www.sixfootsixdesigns.com/125/las-cruces-chili-challenge-february-2009/ http://www.sixfootsixdesigns.com/125/las-cruces-chili-challenge-february-2009/#comments Wed, 25 Feb 2009 19:04:33 +0000 james http://www.sixfootsixdesigns.com/?p=125 We all went down to the Las Cruces Chili Challenge in February 2009 and here are some of our pictures.

]]> http://www.sixfootsixdesigns.com/125/las-cruces-chili-challenge-february-2009/feed/ 0 Table Row Highlighter http://www.sixfootsixdesigns.com/22/table-row-highlighter/ http://www.sixfootsixdesigns.com/22/table-row-highlighter/#comments Sun, 21 Dec 2008 01:19:38 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=22 Continue reading →]]> 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.

]]> http://www.sixfootsixdesigns.com/22/table-row-highlighter/feed/ 0 Check / Uncheck all checkboxes in a form http://www.sixfootsixdesigns.com/21/check-uncheck-all-checkboxes-in-a-form/ http://www.sixfootsixdesigns.com/21/check-uncheck-all-checkboxes-in-a-form/#comments Sun, 21 Dec 2008 01:06:18 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=21 Continue reading →]]> 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.

]]> http://www.sixfootsixdesigns.com/21/check-uncheck-all-checkboxes-in-a-form/feed/ 0 Fancy Fonts http://www.sixfootsixdesigns.com/19/fancy-fonts/ http://www.sixfootsixdesigns.com/19/fancy-fonts/#comments Thu, 18 Dec 2008 22:12:50 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=19 Continue reading →]]> 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,0x000000,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.

]]> http://www.sixfootsixdesigns.com/19/fancy-fonts/feed/ 0 New Client: iTravel http://www.sixfootsixdesigns.com/17/new-client-itravel/ http://www.sixfootsixdesigns.com/17/new-client-itravel/#comments Mon, 03 Nov 2008 02:35:20 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=17 Continue reading →]]> I would like to welcome our newest client iTravel! They are based out of Hawaii and have a very interesting and innovative travel concept that I am sure will take off! After a few months of development on my new MVC platform, I was able to successfully implement it into iTravel. The site was up and running in just a week. The site has all the features you could ever need and because it is built on an MVC platform and an OO Design pattern, upgrades, expansion, and updates are a snap. Check out the site at www.itravel-smart.com

]]> http://www.sixfootsixdesigns.com/17/new-client-itravel/feed/ 0 Farmington, NM ~2008 http://www.sixfootsixdesigns.com/171/farmington-nm-2008/ http://www.sixfootsixdesigns.com/171/farmington-nm-2008/#comments Mon, 20 Oct 2008 05:21:10 +0000 james http://www.sixfootsixdesigns.com/?p=171 This was my first trip to Farmingtion, NM in 2008 and it is by far the best extreme rock crawling ever!

]]> http://www.sixfootsixdesigns.com/171/farmington-nm-2008/feed/ 0 Redbull Soap Box Derby http://www.sixfootsixdesigns.com/15/redbull-soap-box-derby/ http://www.sixfootsixdesigns.com/15/redbull-soap-box-derby/#comments Fri, 17 Oct 2008 06:36:44 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=15 Continue reading →]]> Since July myself and 4 friends have been spending countless hours building a car to race in the upcoming Redbull Soapbox race in Denver Colorado. Our theme is based on the movie Ferris Bueller’s Day Off and we have created a nerly perfect scale model of the 1961 Ferrari 250 GT California Spyder. Because many people were unable to track our buildup on Facebook, I launched a new website this week to cover everything. The site uses WordPress as its framework because I wanted fans to be able to post comments and all of our team member to easily contribute content to the site. I built a custom theme and added several plugins to make things run a bit smoother. Check out the site and our over-the-top buildup at www.teamsaveferris.com

]]> http://www.sixfootsixdesigns.com/15/redbull-soap-box-derby/feed/ 0 Limit Form Field Length http://www.sixfootsixdesigns.com/14/limit-form-field-length/ http://www.sixfootsixdesigns.com/14/limit-form-field-length/#comments Thu, 16 Oct 2008 01:05:47 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=14 Continue reading →]]> This is a class that will limit a form element’s text length and display a counter showing how many characters they have used and will let the user know when they have reached the max. This class uses prototype 1.6 so you MUST have it loaded before you load this class. The class will print out a div below each element it is limiting the length on. The div has a class name of “validation-advice” so you can apply your styles to the it your css style sheet. You can open up the JavaScript file and change the class name if you don’t like it. You can also change the text the div displays.

The first thing you need to do is load the class into your page. Be sure prototype is also loaded before you load this class.

Here is the class:

<script type="text/javascript"> var textareaLimit = Class.create({ initialize: function(element,options) { this.element = $(element); this.options = Object.extend({ maxLength : 255 }, options || {}); this.initEventHandlers(); }, initEventHandlers: function() { this.element.observe('keyup', this.handleMouseUp.bind(this)); }, handleMouseUp: function(e) { var element = e.element(); var currLength = element.value.length; var message = null; var maximalLength = this.options.maxLength; var elementID = 'limit-length-' + element.identify(); if(currLength < maximalLength){ message = 'Used ' + currLength + ' of ' + maximalLength + ' characters.'; }else{ element.value = element.value.truncate(maximalLength,''); message = 'You have reached the maximum number of characters allowed: ' + maximalLength; } if($(elementID)){ $(elementID).update(message); }else{ var advice = '<div class="validation-advice" id="' + elementID + '" style="display:block">' + message + '</div>'; new Insertion.After(element, advice); } } }); document.observe('dom:loaded', function() { $$('textarea.limitLength').each(function(area) { new textareaLimit(area); }); }); </script>

The class by default will listen for all textareas with a class name of limitLength.
To use it simply add the class name “limitLength” to any textarea or input with a type of text.
By default it will limit the length to 255 characters.

If you want to setup the class individuall you simply use something like the following

<textarea id="someID" name="someName"></textarea> <script type="text/javascript"> new textareaLimit('someID'); </script>

If you wanted to change the maxlength value all you need to do is the following:

<script type="text/javascript"> new textareaLimit('someID',{maxLength:20}); </script>

]]> http://www.sixfootsixdesigns.com/14/limit-form-field-length/feed/ 0 Day Job http://www.sixfootsixdesigns.com/13/day-job/ http://www.sixfootsixdesigns.com/13/day-job/#comments Fri, 25 Jul 2008 05:40:23 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=13 Continue reading →]]> I have started a new fulltime position with a company called Active Website. An industry leader in the Real Estate website industry. Becuase this is a fulltime position, I have limited time for freelance projects. Please contact us and we’ll try and fit your project into the mix as soon as possible. It’s worth the wait!

-James Olson

]]> http://www.sixfootsixdesigns.com/13/day-job/feed/ 0 New Client: Chiaroscuro Gifts http://www.sixfootsixdesigns.com/12/new-client/ http://www.sixfootsixdesigns.com/12/new-client/#comments Fri, 25 Jul 2008 05:33:51 +0000 james http://www.sixfootsixdesigns.com/wordpress/?p=12 Continue reading →]]> We welcome our newest client Chiaroscuro!

We will be building an online store for this new company selling photography gifts. We will be implementing a new framework system for this client where all processing and php code is completely separated from the design view of the site. This will allow for easy re-branding and design changes without fear of breaking the site’s function. This site will have a full cms controlling products and content. In addition, we will also be implementing “pretty” URL’s and a strong focus on SEO.

update:
The site is finally up and running on my new MVC. Everything is tested re-tested and the tested again to be sure all the bugs are repaired and everything is running smoothly. The official live date should be within the next week or so.

Visit the site at www.chiarogifts.com

-James Olson

]]> http://www.sixfootsixdesigns.com/12/new-client/feed/ 0 Ray Ranch ~ 2008 http://www.sixfootsixdesigns.com/179/ray-ranch-2008/ http://www.sixfootsixdesigns.com/179/ray-ranch-2008/#comments Tue, 20 May 2008 05:28:14 +0000 james http://www.sixfootsixdesigns.com/?p=179 Headed out to Ray Ranch near Roy, NM to run some of the most awesome trails in the country. These trails are on private land and invite only.

]]> http://www.sixfootsixdesigns.com/179/ray-ranch-2008/feed/ 0 Moab, UT ~ 2006 http://www.sixfootsixdesigns.com/177/moab-ut-2006/ http://www.sixfootsixdesigns.com/177/moab-ut-2006/#comments Thu, 20 Jul 2006 05:26:24 +0000 james http://www.sixfootsixdesigns.com/?p=177 Decided it would be a good idea to head to Moab in the heat of the summer. Bad Idea for sure! Met up with a guy on Pritchett and had a good time none the less.

]]> http://www.sixfootsixdesigns.com/177/moab-ut-2006/feed/ 0 Holy Cross ~ 2006 http://www.sixfootsixdesigns.com/175/holy-cross-2006/ http://www.sixfootsixdesigns.com/175/holy-cross-2006/#comments Tue, 20 Jun 2006 05:24:57 +0000 james http://www.sixfootsixdesigns.com/?p=175 Ran Holy Cross near Vail, CO with the buggy. This is a beautiful trail with great views and even a ghost town.

]]> http://www.sixfootsixdesigns.com/175/holy-cross-2006/feed/ 0 Grand Junction Trails ~ 2006 http://www.sixfootsixdesigns.com/173/grand-junction-trails-2006/ http://www.sixfootsixdesigns.com/173/grand-junction-trails-2006/#comments Sat, 20 May 2006 05:23:23 +0000 james http://www.sixfootsixdesigns.com/?p=173 Took a trip to Grand Junction, CO to run 21 Road and Billings Canyon. Had a blast in the buggy!

]]> http://www.sixfootsixdesigns.com/173/grand-junction-trails-2006/feed/ 0 Carnage Buena Vista circa 2005 http://www.sixfootsixdesigns.com/169/carnage-buena-vista-circa-2005/ http://www.sixfootsixdesigns.com/169/carnage-buena-vista-circa-2005/#comments Thu, 20 Jan 2005 05:19:44 +0000 james http://www.sixfootsixdesigns.com/?p=169 Some old photos of a run up Carnage in Buena Vista, CO in 2005 driving my old CJ-7.

]]> http://www.sixfootsixdesigns.com/169/carnage-buena-vista-circa-2005/feed/ 0 Carnage Boulder 2005 http://www.sixfootsixdesigns.com/166/carnage-boulder-2005/ http://www.sixfootsixdesigns.com/166/carnage-boulder-2005/#comments Thu, 20 Jan 2005 05:18:02 +0000 james http://www.sixfootsixdesigns.com/?p=166 Here are some photos from way back in the day running carnage in Boulder, CO in my old CJ 7

]]> http://www.sixfootsixdesigns.com/166/carnage-boulder-2005/feed/ 0