A JavaScript Class

Let’s start out with a basic class. The Person class has one method getName, when you create a new instance of the Person class you will pass in the Person’s name.

The Person class

function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}

So in the above example I created a Person class with a name attribute and a function to retrieve the name. Now I’ll create a new person, “Jon Rohan”.

var p = new Person("Jon Rohan");
// output: Jon Rohan
console.log(p.getName());

The p is a new Person with the name “Jon Rohan”, when I log to the console the result of p.getName() it returns “Jon Rohan”.

Prototype Chain

Now we bring in the prototype chain. The chain is like an inheritance chain. Developer inherits → from Person. So we are defining a Developer as a Person, cause developers are people too. ;-) The developer takes the name attribute like Person, and an array of skills. The first line of the Developer class is to call the Person class. This calls the Person’s constructor. The Developer class also has a new method getSkills, because a Person is too general to have skills, but as a Developer, there are skills that they have.

We also need to set Developer.prototype to the Person’s prototype, by creating a new Person. Now we set the Developer’s constructor to the Developer. And we have successfully created a prototype chain from Developer to Person.

The Developer Class

function Developer(name, skills) {
  Person.call(this, name); // we call the Person constructor since it's the superclass
  this.skills = skills;
  this.getSkills = function() {
    return this.skills;
  };
}
Developer.prototype = new Person();
Developer.prototype.constructor = Developer;

Now we’ll create a new Developer, with the name “Jon Rohan” and skills ["Javascript", "HTML", "CSS"]. When we create the new developer, he’ll also have the getName method inherited from the Person class, and the getSkills method from the Developer class.

var d = new Developer("Jon Rohan",["Javascript", "HTML", "CSS"]);
// output: Jon Rohan
console.log(d.getName());
// output: Javascript, HTML, CSS
console.log(d.getSkills().join(", ")); 

This is the basic ideas behind Object Oriented Programming in JavaScript, I’ve only really scratched the surface in JavaScript OOP. Check my RSS or Twitter for new posts.

The API doesn’t care what is updating the location, it just grabs the location from the navigator.geolocation object. Here’s a closer look at the interface.

Geolocation interface

interface Geolocation { 
    void getCurrentPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    long watchPosition(in PositionCallback successCallback, [Optional] in PositionErrorCallback errorCallback, [Optional] in PositionOptions options);

    void clearWatch(in int watchId);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionCallback {
    void handleEvent(in Position position);
  };

  [Callback=FunctionOnly, NoInterfaceObject]
  interface PositionErrorCallback {
    void handleEvent(in PositionError error);
  };

getCurrentPosition() – takes three arguments. The first (required) is the successCallback function which you define to handle the asynchronous call. The second (optional) is the errorCallback function, for when you can’t be found. The last is PositionOptions object which you can specify Boolean enableHighAccuracy, long timeout and long maximumAge. The function will get the position and pass it to the successCallback function as a position object.

watchPosition() – takes the same three arguments as getCurrentPosition. And on the surface it does the same thing as it, with one big exception. watchPosition will call the successCallback every time the position changes. So if you wanted to create a mobile app that follows you walking down the street, this would be the function to use. When called the function returns a unique identifier, which you use to call the last function.

clearWatch() – takes one argument, the unique identifier from the watchPosition method. This method will clear the watch timer.

Demo

I wrote a small example that will get your lat, long and display it.

function getLocation() {
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(foundLocation, noLocation);
  } else {
    noLocation();
  }
}

function foundLocation(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  $("#current-location").replaceWith('<a id="current-location" href="http://maps.google.com/?q=' + lat + ',' + long + '" target="_blank">' + lat + ', ' + long + '</a>');
}

function noLocation() {
  $("#current-location").text('Could not find location');
}
$("#get-location").click(getLocation);

Disclaimer: I’ve tested this in Firefox 3.5 on my Mac, and my iPhone mobile Safari.

Coordinates: Check location by clicking the button.

Check My Location

How it works is when text is typed into the textarea and it becomes longer than the textarea height, then the textarea will grow. I’m keeping this plugin in a github repository, fork it, clone it My Javascript Git Repository.

Demo

The key to making something like this work, is you need to create div element that copies the text from the textarea to the div. The div naturally will grow when it has more text in it. When it does, you get the height of the div element and apply it to the textarea.

Here’s how you would init the growing text box.

$("textarea").growing();

I’ve also added some options you can pass in, growning({maxHeight:300,minHeight:40,buffer:20}) the max and min height are pretty self explainitory. The buffer is the space below the text in the textarea, if you want an extra line below the currently typing line.

The Code

Currently I’m adding a class to the div called faketextarea so I can style it the same as the textarea. This is important becuase if one element has more padding than the other, then the heights will be messed up. and this plugin won’t work exactly right.

.faketextarea, textarea {
  padding: 5px;
  border: 1px solid #efefef;
}

/* Copyright (c) 2009 Jon Rohan (http://dinnermint.org)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.0.0
 * Written with jQuery 1.3.2
 */
(function($){
  $.fn.growing = function(options){
    var settings = $.extend({
       maxHeight: 400,
       minHeight: 40,
       buffer: 0
    }, options);
    return this.each(function(){
      var textarea = $(this); //cache the textarea
      var minh = textarea.height()>settings.minHeight?textarea.height():settings.minHeight;
      var w = parseInt(textarea.width()||textarea.css("width")); //get the width of the textarea
      var div = $("<div class='faketextarea' style='position:absolute;left:-10000px;width:" + w + "px;padding:" + textarea.css("padding") +";border:" + textarea.css("border") + ";'></div>");
      textarea.after(div);
      var resizeBox = function(){
        var html = textarea.val().replace(/(<|>)/g, '').replace(/n/g,"<br>|");
        if(html!=div.html()) {
          div.html(html);
          var h = div.height();
          prevh = textarea.height();
          var newh = h<=minh?minh:(h>settings.maxHeight?settings.maxHeight:h);
          newh += settings.buffer;
          if(newh>=settings.maxHeight) {
            textarea.css("overflow","auto");
          } else {
            textarea.css("overflow","hidden");
          }
          textarea.css({"height":newh+"px"});
        }
      };
      textarea.keydown(resizeBox);
      textarea.keyup(resizeBox);
      resizeBox();
    });
  };
})(jQuery);

Again if you want to keep up with an updated version of this plugin check it out in My Javascript Git Repository.

Related posts:

1. jQuery Ghost Textbox plugin

I’ve seen a few ways to do this, explicitly writing a function that switches text, but this is too specific. This means that I’ll need to re-write this for every ghost text box on the site. Some people will add the functions in the onfocus and onblur attributes on the <input> tag. Same deal…

So I wrote this plugin to make my life simpler. How it works is, anytime you want a textbox to have ghost text you give it a placeholder attribute and put the ghost text inside. like so

<input type="text" class="ghost_text" placeholder="This is Ghost Text"/>

Then I just setup the ghost text globally.

$(".ghost_text").ghostText();

And we’re done! That was easy.

Here’s the plugin. It’s may not be perfect, and there are most likely hundreds of these on the net. But here is my implementation.

/* Copyright (c) 2009 Jon Rohan (http://dinnermint.org)
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 * Version: 1.0.0
 * Written with jQuery 1.3.2
 */
(function($){$.fn.ghostText = function() {
  return this.each(function(){
    var text = $(this).attr("placeholder");
    if(text!=""&&($(this).val()==""||$(this).val()==text)) {
      $(this).addClass("disabled");
      $(this).val(text);
      $(this).focus(function(){
        $(this).removeClass("disabled");
        if($(this).val()==text) {
          $(this).val("");
        }
      });
      $(this).blur(function(){
        if($(this).val()=="") {
          $(this).val(text);
          $(this).addClass("disabled");
        }
      });
    }
  });
};})(jQuery)

Related posts:

1. jQuery Auto-growing Textarea Plugin

var arr = [1,2,"A",4,5];
arr.move2Back(2);

Then the array becomes:

[1,2,4,5,"A"]

This is the small javascript function that accomplishes the task.

/*
 * This function moves the nth member of the array to the end
 */
Array.prototype.move2Back = function(n) {
  this.push(this.splice(n,1).pop());
  return this;
}
var arr = ["Jani","Hege","Stale","Kai Jim","Borge","Tove"];
console.log(arr.move2Back(3));

Related posts:

1. Submit to Digg Bookmarklet