Prototype Trim()

  • Digg this article
  • Sphinn this article
  • Stumble this article
  • Facebook
  • del.icio.us
  • LinkedIn
  • Twit this article
Posted by John
on Monday, 03 March 2008

Here's a nice little addon to the Prototype Ajax library that adds the ability to trim text, etc. with Prototype.

First add this to one of your .js include files,

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/,"");
}

now with protoype loaded you can trim your text simply and effectivly,

$('myfield').value.trim() == '';

this will simply get the value from the textbox 'myfield', trim it for whitespace and then compare it to see if it's empty.

Sweet!

Thanks goes to SOMACON.COM for this one.

Prototype: check if element exists? + more

  • Digg this article
  • Sphinn this article
  • Stumble this article
  • Facebook
  • del.icio.us
  • LinkedIn
  • Twit this article
Posted by John
on Wednesday, 20 February 2008

If Element Exists

Real quick, use this JS with Prototype to determine whether a particular DOM element exists,

if($(element)){alert("i exist!")}

If Not A Number

isNaN($(element)) => returns true if not a valid number

Overlapping Text in a Cell

First set the element's...

overflow: hidden;

Then to fix IE, set it's width...

width: 40px;

Programmatically..

$(element).style.overflow="hidden";
$(element).style.width="40px";

Form Elements

$F('firstname').value => returns value of form element

Cookies + Persistence in JavaScript

  • Digg this article
  • Sphinn this article
  • Stumble this article
  • Facebook
  • del.icio.us
  • LinkedIn
  • Twit this article
Posted by John
on Monday, 04 February 2008

In this article we're going to play around with creating client-side cookies using JavaScript. First off here's a function to use which makes handling them easy.

JavaScript Cookie Library

var Cookie = {
  set: function(name, value, daysToExpire) {
    var expire = '';
    if (daysToExpire != undefined) {
      var d = new Date();
      d.setTime(d.getTime() + (86400000 * parseFloat(daysToExpire)));
      expire = '; expires=' + d.toGMTString();
    }
    return (document.cookie = escape(name) + '=' + escape(value || '') + expire + '; path=/');
  },
  get: function(name) {
    var cookie = document.cookie.match(new RegExp('(^|;)\\s*' + escape(name) + '=([^;\\s]*)'));
    return (cookie ? unescape(cookie[2]) : null);
  },
  erase: function(name) {
    var cookie = Cookie.get(name) || true;
    Cookie.set(name, '', -1);
    return cookie;
  },
  accept: function() {
    if (typeof navigator.cookieEnabled == 'boolean') {
      return navigator.cookieEnabled;
    }
    Cookie.set('_test', '1');
    return (Cookie.erase('_test') === '1');
  }
};

Usage

To create a cookie do,

Cookie.erase('mycookie'); Cookie.set('mycookie', 'myval', 365);

...365 is the days till expiry, we erase it before we set a new value just to be sure,

To erase,

Cookie.erase('mycookie');

To read a cookie,

var ii = Cookie.get('mycookie');

and if you get problems with bad numerics, try this,

var ii = Math.floor(Cookie.get('mycookie'));

or problems checking cookie exists, try this,

if (document.cookie.indexOf('mycookie=')>0) {

Persistence

Now persistence can be a pain in the rear if your cookies are getting cleared out when people navigate to somewhere else in your sites tree structure. So to make sure they stay around, set the path=/; this will force your cookies to be relevant right across your site. So if the person is in the photos area and then navigates down one they'll still be relevant and accessible via the functions above.

The function above does this already so you should be ready to roll if you use the code, ok my explanation's probably not 100% perfect but the codes working good this end, hope it does the same for you.

Reuters Insight

  • Digg this article
  • Sphinn this article
  • Stumble this article
  • Facebook
  • del.icio.us
  • LinkedIn
  • Twit this article
Posted by John
on Tuesday, 20 November 2007

Reuters Insight

Not too long ago back in '99 I did some work for this amazing company; based in their London Docklands office building up their tech-team.

Today a friend dropped me a line about a new service Reuters is offering which looks pretty nice.

It's based around something like SharePoint providing a portal for all your business news, reports, post questions, blogs, etc. within the news network.

I'm saying Sharepoint, but now looking into the source I have to say I'm quite surprised!

The actual system is powered by Prototype with the FCKEditor providing textual input into the the system. Prototype obviously provides the AJAX functionality as (like mootools) it's one of the major JavaScript-AJAX libraries around, (and being plugged into Rails from the start is just a bit popular).

Will wait and see how it goes, but so far the service is pretty promising.

Take a look for yourself...

AJAX + Prototype = Rockin!

  • Digg this article
  • Sphinn this article
  • Stumble this article
  • Facebook
  • del.icio.us
  • LinkedIn
  • Twit this article
Posted by John
on Wednesday, 19 September 2007

Ahh… times are good.

Not much of an article more of a message.

Well if you know I’ve spent the past 2-3 months putting together a neat little rails app called AtomPad , it’s really my take on BaseCamp and is a perfect platform to test my Ruby skills and sharpen my OOP mentality.

So far it’s proven to be pretty useful and today I’ve re-written the Reminders and Lists area to be a bit more AJAX powered. So now you can add, delete, even live-edit items right on the screen just by hovering over them; and all without one single refresh.

Plus you get version control so it records what things you change to your notes, so eventually if your in a team it’ll tell you who changed what, when and maybe why (eventually).

Very intelligent, very powerful and so damn cool.

AJAX + Prototype is most definitely king!