Thought Patterns

I have just released version 2.0.4 of CurvyCorners. The JavaScript library for adding rounded edges to your HTML boxes.

This new version brings a whole host of bug fixes and compatibility improvements with 3rd party libraries.

CurvyCorners Website

To use just include the javascript in the head section of your webpage and then add the following in your CSS file.

-moz-border-radius:3ex;
-webkit-border-radius:3ex;

Download: http://www.curvycorners.net
Usage: http://www.curvycorners.net/instructions/

Cameron Web Development CSS, CurvyCorners, HTML, JavaScript, Rounded Corners

I recently ran into a problem while trying to add the prototype.js library to one of my existing projects.

It turned out the issue was to do with for…in loops and Prototype.js extending the native objects with new properties.

Now for…in loops allow you to enumerate over an object, they kind of emulate for…each loops that you get in other languages like PHP.

Now the problem lies in that JavaScript has a major flaw, and it is that the for…in loops enumerate over not only the keys in your object but also the new prototyped methods.

For example:

var arr = new Array();
arr['name'] = 'Cameron'
arr['age'] = '28';

for(key in arr) {
alert(key + ': ' + arr[key]);
}

will output:

name: Cameron
age: 28

Adding the prototype.js library breaks the above example and causes the for…in loop to output the following:

name: Cameron
age: 28
each: function(iterator, context) {
    var index = 0;
    try {
      this._each(function(value) {
        iterator.call(context, value, index++);
      });
    } catch (e) {
      if (e != $break) throw e;
    }
    return this;
  }
eachSlice: function(number, iterator, context) {
    var index = -number, slices = [], array = this.toArray();
    if (number < 1) return array;
    while ((index += number) < array.length)
      slices.push(array.slice(index, index+number));
    return slices.collect(iterator, context);
  }
...

The above example output is shorted, when I ran the test it returned an additional 44 functions.

Obveously this is going to confuse any program you have that uses for…in loops.

So what’s the solution?

The following example fixes the problem:

var arr = new Array();
arr['name'] = 'Cameron'
arr['age'] = '28';

for(key in arr) {
if(arr.hasOwnProperty(key)) {
alert(key + ': ' + arr[key]);
}
}

In the above example we’ve added an IF statement that calls the hasOwnProperty method of the object we are enumerating passing the key as the first parameter. This method returns true if the object has the property specified and does not include properties that have been inherited through the prototype chain.

This method works in IE 6+, Safari 3.1+, Firefox 2+ and Opera 9.5.

So what about older browsers?

You can use the following almost as good method:

for(key in arr) {
if(typeof arr[key] !== 'function') {
...
}
}

Conculsion

As annoying as this is, if you are going to use for…in loops and prototype.js you will need to add an extra IF statements to filter out the results. I want to make it quite clear that this is not an issue with Prototype.js but more an issue with the JavaScript language.

Cameron Web Development JavaScript, Prototype.js

I’m currently developing a CMS (Content Management System) at work and needed a way to disable text selection on certain elements. I was aware of the Mozilla proprietary css property ‘-moz-user-select’ which takes the value ‘none’ to disable text but this is hardly a cross-browser solution. I did a quick Google, and found the following JavaScript function at Ajax Cookbook which attempts to disable text selection for all modern browsers:

function disableSelection(element) {
element.onselectstart = function() {
return false;
};
element.unselectable = "on";
element.style.MozUserSelect = "none";
element.style.cursor = "default";
}

View Full Article at Ajax Cookbook

Cameron Web Development Firefox, JavaScript

I’m currently developing a JavaScript picture gallery widget / web service and needed a way to access GET parameters that I’ve passed via one page to another. This is simple in PHP as you can just access the $_GET super global array. Well I did a bit of searching on the internet and found a snippet of code to achieve the same thing in JavaScript.

var $_GET = [];
var vars_area = location.search.substring(1);
if(vars_area.length > 2)
{
var get_sets = vars_area.split('&');
for(i = 0, k = get_sets.length; i < k; i++)
{
var parts = get_sets[i].split('=');
$_GET[unescape(parts[0])] = unescape(parts[1]);
}
}

Stick the above code in the head section of your page (within script tags) or at the top of an external JavaScript file. You’ll then have a very useful $_GET array which contains all your GET params and their associated values.

Cameron Web Development JavaScript, PHP