Graphika Studioz – Web Design, Development, Hosting and SEO Services – Parksville, Qualicum Beach

I’ve made a cool drop down menu system using Prototype and Scriptaculous javascript libraries that utilizes some of the cool effects to create an animated menu system.

Anyway here is droplicious v.2.1 I won’t be putting up new versions here anymore. It will now be at github (see link below… right below)

Droplicious at github: http://github.com/darrenterhune/droplicious

Please comment any bugs or other questions on this post, or submit issues at github Thanks!

Fabio Zendhi Nagao is an applied mathematician from IMA who works in web application development. He’s developed some really cool effects using the Mootools Javascript library to mimic the Mac OS X Dock Magnification effects using standards compliant practices. When I first saw his examples I was pretty amazed. Best of all It’s free, open source! You can find more cool features from his site here.

Update:

Found another really cool example of this effect that can be found here => Safalra’s Website

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>

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!

Ajaxload.info is a site that allows you to customize your own ajax loaders. They have a bunch of different types and also let you pick colors too. Then you just download and use in your own project.