Javascript GUID's

Posted by John
on Monday, 17 November 2008

finally I can create GUID's in javascript, thank you Michael Mahemoff.

Javascript - Killing the TAB Key

Posted by John
on Monday, 10 March 2008

One thing that might muck up your beautifully designed AJAX popups is the user repeatedly hitting the tab key, simple way of stopping this is by inserting a onkeydown event for the keypress..

Trapping TAB

Simple and effective, as soon as the user's cursor gains focus for the username textbox if they then try to hit TAB within it it won't do anything; effectively trapping the action dead.

Obviously if you've got two boxes (username + password), you'll want to put this kind of trap on the password textfield otherwise the user won't be able to tab to the next cell, but as a quick fix it works well.

Setting Focus

You can also set focus via...

$('username').focus();

Prototype Trim()

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

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

Request.QueryString + Select Redirect

Posted by John
on Thursday, 14 February 2008

Quick post, to handle parameters in your webpage via javascript, try this...

Request.QueryString with JS

Include the file in your header section then use like...

mypage.html?username=john

With the Javascript...

var name = '';
if (Request.QueryString("username").Count > 0) {
    name = Request.QueryString("username").Item(1);
}

The function returns the querystring as an object, so to determine whether you have any parameters returned count the number of objects. The first of which we want so we use .Item(1) to grab that and stick it in our variable name after which we can give to an alert() popup or whatever we need.

On Select Redirect with JS

Here's another bit, this will force the browser to redirect to another page once the user selects a value from the drop-down box and clicks the button image.

Javascript...

function goto(form) { 
var index=form.select.selectedIndex
    if (form.select.options[index].value.length != 0) {
        location.replace(form.select.options[index].value);
    }
}

Html...

<FORM NAME="form1">
<select name="select" id="select" style="width:90px;">
<option value="http://www.red91.com/">my site</option>
</select>
<img src="button.gif" onclick="goto(form1)" />
</FORM>