Alessandro Melandri » Javascript

Today links

amelandri — Thu, 19 Nov 2009 08:36:13 +0000

Good karma: an in-depth review of Ubuntu 9.10 Ars review
Simply Buttons v2 Javascript/CSS stylish buttons
How to wire your house for Ethernet networking from Instructables
10 Easy jQuery Tricks for Designers

Textarea char counter, a jQuery plugin

amelandri — Tue, 20 Oct 2009 16:08:34 +0000

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.

This plugin will give you the method setCounter([maxLength]). If you call it on a textarea field you will get a counter that gets updated every time the user write a character.

The maxLength parameter is not mandatory so if it’s undefined you will get a simple character counter like this:

<div id="textareaId_counter">
  <span class="length">27</span>
</div>

while if you pass an integer to the method the user won’t be able to write a number of character greater than maxLength and you will get a counter like this:

<div id="textareaId_counter">
  <span class="length">27</span>
  <span class="sep">/</span>
  <span class="maxLength">500</span>
</div>

This is the code. Save it in a text file named something like jquery.textareaCharacterCounter.js and include it in your page:

jQuery.fn.setCounter = function(maxLength){
 
  return this.each(function(){
 
    var jqthis = jQuery(this);
 
    if (jqthis.is('textarea')){
 
      var counterId = jqthis.attr('id') + "_counter";
 
      var htmlCounter = '+ counterId + '">';
      htmlCounter += '' + jqthis.val().length + '';
 
      if (maxLength){
        htmlCounter += '/';
        htmlCounter += '' + maxLength + '';
      }
 
      htmlCounter += '
';
 
      jqthis.after(htmlCounter);
 
      jQuery('#'+counterId).width(jqthis.width()).css({
        'text-align':'right',
        'margin-top':'10px'
      });
 
      jqthis.bind("keyup",function(){
 
        var content = jqthis.val();
 
        if (maxLength && content.length > maxLength){
          content = content.substring(0,maxLength)
          jqthis.val( content );
        }
 
        jQuery('#' + counterId + " > span.length").text(content.length);        
 
      });
 
    } else {
      alert("Not applicable to element: " + jqthis);
    }
  });
}

How to use it

// Add a simple counter
$('#textarea1').setCounter();
 
// Add a counter and set maximum length to 500 characters
$('#textarea2').setCounter(500);

Check date validity with Javascript

amelandri — Wed, 02 Sep 2009 20:16:29 +0000

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;
}

Javascript getElementById() shortcut

amelandri — Mon, 03 Aug 2009 21:28:41 +0000

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.

Get location coordinates using Google Maps

amelandri — Fri, 03 Jul 2009 09:17:49 +0000

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.

<html>
<head>
 
  
  <script src="custom_api_url" type="text/javascript"></script>
 
  <script lang="Javascript">
 
    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");
      }
    }
 
  </script>
 
</head>
<body>
 
  <div id="map">
 
    <form name="myForm">
 
      Location:<br />
      <input type="text" name="address" /> 
      <input type="button" value="Coordinates" onclick="getCoordinates()"/>
      <br />
      Latitude:<br />
      <input type="text" name="lat" /><br />
      Longitude:<br />
      <input type="text" name="lng" />
 
    </form>
 
  </div>
 
</body>
</html>

Add maxlength functionality to textarea

amelandri — Thu, 28 May 2009 07:54:48 +0000

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:


  
0/500