1 0 Tag Archives: web design
post icon

Run ie 5, 5.5, 6 and 7 without parallels or boot camp on os x

Mike has a cool application to allow you to run a number of ie’s in os x with a simple install, without having to boot up in windows operating system like parallels or boot camp. Now I haven’t read up too much about this project or tested it, but it seems pretty sweet! Booting in Parallels really takes a while so for something like this => excited! Also Derek from 5thirtyone has a good write up on this.

Leave a Comment
post icon

Unobtrusive javascript textarea counter using Mootools Event Class and domready Event

Here’s a cool script for using with your applications if you would like to limit the number of characters in a textarea as well as show a user how many characters they have left.

I wrote this using Mootools event and domready Event classes. For this to work you’ll need to have Mootools Event and DomReady classes. Then embed that file in the top of your document.

Feel free to use it, but if you think it’s sweet links here wouldn’t hurt… but that’s up to you! Have fun!

<script type="text/javascript">
/*Created by Darren Terhune January 16th 2008 http://headfirstproductions.ca*/
window.addEvent('domready', function() {
 //check length function
 function check_length(form) {
  max_length = 255; //set the max length of the form
  if (form.testimonial.value.length >= max_length) {
   form.testimonial.value = form.testimonial.value.substring(0, max_length);
  } else {
   form.num_left.value = max_length - form.testimonial.value.length;
  }
 }
 var testimonial = $('testimonial');
 testimonial.onkeydown = function(event) {
  check_length(this);
 };
});
</script>

Here’s my html form

<form id="testimonial" method="post" enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p>Name (Person who gave the testimonial)</p>
<input name="name" type="text" tabindex="1" size="40" value="<?php if (isset($_POST['name'])) { echo $_POST['name']; } ?>">
<textarea tabindex="2" name="testimonial" cols="50" rows="10"><?php if (isset($_POST['testimonial'])) { echo $_POST['testimonial']; } else { echo 'Please enter the testimonial here... (max 255 characters)'; } ?></textarea><br />
<p>Characters Left</p>
<input size="3" value="255" name="num_left" id="num_left">
<input type="submit" tabindex="3" value="Submit">
<input type="hidden" name="submitted" value="TRUE">
</form>
Leave a Comment
post icon

Work: Tigh-Na-Mara Flash Header

I forgot but I did a Flash header that dynamically loads images from a folder into the Flash application. I also did a cool thing where the Tigh-Na-Mara logo randomly scatters across the swf when you move your mouse over it. It’s kinda cool and fun. There were some dynamic gradient fades between the images but since Carlos (Fellow student and Tigh-na-mara webdesigner) needed the swf for Flash Player version < 8 the fades wouldn’t work because they weren’t supported for that version.

Leave a Comment
post icon

Javascript function to uncheck all checkboxes

Yesterday I searched and searched for a good hour for some unobtrusive javascript to set all check boxes within a div to unchecked when a user would click “None” for a none of the above type form, when I realized that, duh I know how to write javascript. So I wrote this function.

Javascript:

function $(id) {
 return document.getElementById(id);
}
window.onload = initPage;
function initPage() {
 var productDiv = $("products");
 var productList = productDiv.getElementsByTagName("input");
 var productReset = $("product-none");
 productReset.onmouseup = function() {
  for (i = 0; i < productList.length-1; i++) {
   productList[i].checked = false;
  }
 }
}

HTML:

input value="1" name="product[]" id="Carpeting" type="checkbox" Carpeting
input value="2" name="product[]" id="Hardwood Flooring" type="checkbox" Hardwood Flooring
input value="3" name="product[]" id="Ceramic Tile" type="checkbox" Ceramic Tile
input value="4" name="product[]" id="Ceramic Tile" type="checkbox" Ceramic Tile
input value="5" name="product[]" id="Kitchen/Bathroom Cabinets" type="checkbox" Kitchen/Bathroom Cabinets
input value="6" name="product[]" id="Counter Tops" type="checkbox" Counter Tops
input value="7" name="product[]" id="Major Appliances" type="checkbox" Major Appliances
input value="32" name="product[]" id="product-none" type="checkbox" None

I’ve taken out the html tags cause it was causing this page to format wrong so you’ll have to just understand how the tags would look. Someone tell me how to get around this?

So basically this javascript creates an window onload then finds the div with id => “products”. Then finds all the input elements and puts them into an array. Then finds the input with the id => products-none. Then creates a function to run a for loop across the array and sets all check boxes value “checked” to false when a user releases a mouse click on the products-none input.

I’ve only tested this in Firefox 2.0 Mac OS X
Feel free to use it modify or what ever you like!

Leave a Comment
post icon

Grab color values from anything on your mac os screen

Digital Color Meter is a cool application located in Applications/Utilities/DigitalColor Meter.app. You can color pick anything on your screen and grab the color value in different formats to use in your projects.

Update: You can also use shift + command + c to copy the color as a hex value and paste it into your favorite editor.

Leave a Comment