Posts Tagged Javascript

Today links

19 November 2009 | No Comments »       Links

Textarea char counter, a jQuery plugin

Some weeks ago I received a customer request to add a character counter to a textarea field and I made it using “classic” Javascript. Now that I’m learning jQuery and have some spare time, I tryed to transform my custom function to a jQuery plugin.

This is my first attempt to build a jQuery plugin and maybe there’s already another plugin that does the same thing but it have been a really nice exercise.

Check out the plugin code and some more details after the break.

Read the rest of this entry »

20 October 2009 | No Comments »         Tech

Check date validity with Javascript

A simple JavaScript function to check date validity

function checkDateValidity(day, month, year){
 
  month = month - 1;
  var message = '';
 
  var date = new Date(year,month,day);
 
  if (year != date.getFullYear())
    message = 'Year not valid';
 
  if (month != date.getMonth())
    message = 'Month not valid';
 
  if (day != date.getDate())
    message = 'Day not valid';
 
  return message;
}

2 September 2009 | No Comments »       Tech

Javascript getElementById() shortcut

Do you love the wonderful javascript dollar shortcut $('myId') but cannot use jQuery or Prototype? Don’t worry, you can define your custom shortcut for the too long document.getElementById() function:

function $(id) {
  return document.getElementById(id);
}

Now you can sobstitute this:

var divContent = document.getElementById('myId').innerHTML;

with this:

var divContent = $('myId').innerHTML;

Obviously you don’t get all the bells and whistles that you would get using jQuery, but it’s a start.

3 August 2009 | No Comments »         Tech

Get location coordinates using Google Maps

This is a simple tutorial on finding location’s coordinates using Google Maps APIs.

First of all you need to signup for a Google Maps API key, otherwise your script will not work.

When you are done, start building a simple form with three fields: one for the location and the others for coordinates display.

<form name="myForm">
  Address:<br />
  <input type="text" name="address" />
  <input type="button" value="Get coordinates" onclick="getCoordinates()"/>
  <br />
  Latitude:<br />
  <input type="text" name="lat" /><br />
  Longitude:<br />
  <input type="text" name="lng" />
</form>

Now, we need to define the getCoordinates() function: this function must read the value of the address field, check if it’s valid and get its coordinates. To get coordinates we’ll use the GClientGeocoder class and its method getLatLng(address:String, callback:function):

Sends a request to Google servers to geocode the specified address. If the address was successfully located, the user-specified callback function is invoked with a GLatLng point. Otherwise, the callback function is given a null point. In case of ambiguous addresses, only the point for the best match is passed to the callback function. 

var geocoder = new GClientGeocoder();
 
function getCoordinates(address){
  var address = document.myForm.address.value;
 
  if (address != ''){
    geocoder.getLatLng(address,function(point){
      if (point != null){
        document.myForm.lat.value = point.lat();
        document.myForm.lng.value = point.lng();
      }
      else{
        alert("Location not found");
      }
    })
  }
  else{
    alert("Please insert a location");
  }
}

And that’s all! Hit the more link to see the full page code.

Read the rest of this entry »

3 July 2009 | No Comments »           Tech

Add maxlength functionality to textarea

The textarea field doesn’t have a maxlength attribute like text fields, so you need Javascript to get the same functionality:

function getMaxLength(textarea,maxlength){
 
  if (textarea.value.length &gt; maxlength)
    textarea.value = textarea.value.substring(0,maxlength);
 
  updateCounter(textarea.value.length,maxlength);
}
 
function updateCounter(currentCount,maxlength){
  document.getElementById('counter').innerHTML = currentCount + "/" + maxlength;
}

Now modify the textarea like this and you are done:

<form>
  <textarea onkeyup="return getMaxLength(this,500)" cols="60" rows="10"></textarea>
<div id="counter">0/500</div>
</form>

28 May 2009 | No Comments »     Tech