BRADINO » JavaScript

Pass Extra Parameters to JavaScript Callback Function

admin — Sat, 10 Oct 2009 20:49:03 +0000

Here is a simple example of a function that takes a callback function as a parameter.

 
query.send(handleQueryResponse);
 
function handleQueryResponse(response){
 
     alert('Processing...');
 
}

If you wanted to pass extra variables to the callback function, you can do it like this.

 
var param1 = 'something';
 
var param2 ='something else';
 
query.send(function(response) { handleQueryResponse(response, param1, param2) });
 
function handleQueryResponse(response,param1,param2){
 
     alert('Processing...');
 
     alert(param1);
 
     alert(param2);
 
}

Replace Listmenu with Textfield

admin — Thu, 19 Feb 2009 00:36:48 +0000

Say you have a dropdown form field where you ask the user how they heard about you. You have numerous options and also an other field where if they selected other, then they enter the value in a text field. This is a cleaner alternative where if the user selects Other, then the dropdown turns into a textfield of the same name, so that your post routine, grooming, validation, writing to DB etc all works seamlessly. This example uses prototype JS library.

Here is a working example:

How did you hear about BRADINO?

All you have to do is have an dropdown option for Other and then add call the function onchange:

onchange=”overrideListmenu(‘how-heard’);”

Here is the javascript function that uses Prototype:

function overrideListmenu(field){ if ($F(field) == 'Other'){ Element.replace($(field), '+field+'" id="'+field+'" type="text" value="">'); $(field).focus(); } }

Here is the javascript function that uses jQuery:

function overrideListmenu(field){ if ($('#'+field).val() == 'Other'){ $('#'+field).after('+field+'" id="'+field+'" type="text" value="">').remove(); $('#'+field).focus(); } }

PPC Conversion Tracking using Javascript

admin — Fri, 14 Nov 2008 17:37:13 +0000

PPC Conversion tracking (Google/Yahoo/MSN) is straightforward for simple HTML websites. You place the conversion pixel on the thank you page. But when you have conversions in Flash sites or when the page is not reloaded after a conversion in the case of an ajaxed site, firing the conversion pixel is not as simple.

I created a simple javascript function that will include the tracking pixel as an iframe in the current page. All you have to do is change the url to the tracking pixel and then call the conversion function from your page or flash file.

function conversion() { var iframe = document.createElement('iframe'); iframe.style.width = '0px'; iframe.style.height = '0px'; document.body.appendChild(iframe); iframe.src = 'http://wwww.domain.com/pixel.html'; };

Google Analytics Goals

admin — Fri, 26 Sep 2008 17:07:05 +0000

Goals in Google Analytics are one of my favorite features of this amazing free web analytics software. Goals allow you to track actions and then analyze how different traffic segments convert to these actions. Common actions would be completing a lead form, downloading a brochure, clicking the link for directions, etc. Goals are usually implemented by entering the page url where the conversion occurs (Ex: thankyou.html). So how can we implement the goal tracking on sites where the form is the same url as the thank you page, or where the click leaves the site or goes to a non-html page? These can all be done easily by selecting Exact Match as the Match Type and then inserting a fictitious url like /goal/rfi/ for the Goal URL.

Let’s look at the first scenario where someone completes a lead form. Often forms submit to themselves, so you can’t have the goal conversion on the thank you page because it is the same url. These type of dynamic pages can easily fire off goals we just have to do it a different way. When the form is completed successfully, we just make a javascript call in the onload. Notice the /goal/rfi/ from the Goal URL setup.

<body onload="pageTracker._trackPageview('/goal/rfi/');">

So what if you want to track an exit click or a non-html file download (Ex: PDF Brochure). The idea is the same, you simply call the function from the onclick event handler.

<a href="PrettyBrochure.pdf" onclick="pageTracker._trackPageview('/goal/rfi/');">

Be sure that you have the New Tracking Code (ga.js) not the Legacy Tracking Code (urchin.js)

Javascript Split Function

admin — Tue, 20 Nov 2007 07:16:11 +0000

The Javascript split() function works much the same as the php split() or explode() functions. Basically you take a string at break it up everywhere the delimiter character occurs and return the new strings in an array. So for example, let’s say you have a string like this:

[js]var colorString = “red|orange|blue|white|black|brown”;[/js]

Which is obviously a simple a pipe-delimited string of colors. So to make this into an array we would use the split function.

[js]var colorArray = colorString.split(“|”);[/js]

Now you have a simple array of colors and can access them as you would any array, either in a loop or by the numeric index, whatever…

[js]
var message = “My favorite color is ” + colorArray[3] ;
alert(message);
[/js]

Jump to Location Within Page

admin — Fri, 19 Oct 2007 20:22:31 +0000

I know of three very easy ways to jump to a location within a page. They are using the scrollTo() function, the window.location.hash function, and the Prototype scrollTo() function.

This example uses the Javascript scrollTo() function where you simply pass the X,Y pixel coordinates that you want to jump the page to. This example would jump the page to the top:

onclick="self.scrollTo(0,0);"

The second way I have done this is to create a named anchor and use the javascript window.location.hash function to jump to it. So basically create a named anchor called “JUMP2″ or whatever you like and then make it happen like this:

onclick="window.location.hash='JUMP2';"

And for my personal favorite, using Prototype you can jump the page to any html element. So basically give some element an id of “JUMP2″ or whatever you like and then make it happen like this:

onclick="$('JUMP2').scrollTo();

Javascript Substring

admin — Tue, 07 Aug 2007 16:57:15 +0000

The Javascript substring function is very similar to that of PHP. The first parameter is the start position and the second parameter is the end position. The first character in a javascript string is position 0.

Here is a simple example:

var birthday = '1978-07-11' var year = birthday.substring(0,4) var month = birthday.substring(5,7) var day = birthday.substring(8,10)

JavaScript For Loop

admin — Wed, 06 Jun 2007 17:33:56 +0000

Here is an example of the JavaScript for loop (which is identical to the PHP for loop). Again I used Prototype. This basic example illustrates hiding multiple divs. So for example if you dynamically generate a page with divs you can show or hide them with an onchange() function call to something like this.

if ($F('validationid').toString() == '18'){ for (i=0; i<=10; i++){ Element.show('subsetList'+i); } }

JavaScript Onclick Return False

admin — Tue, 15 May 2007 21:47:17 +0000

Anywhere you put an onclick event with a javascript call, if you add return false then the default behavior (what would have happened without the onclick event) will be disregarded.

For example:

[html]Click Me[/html]

So now when a user clicks the link, the doSomething() function will fire off and the user will not go to http://www.nojs.com (unless they do not have javascript enabled).

To take it one step further, you can use the confirm function to force the user to confirm that they want to go to the link and then if they say ok then return true. For example:

[html]Click Me[/html]

And one final tidbit, soemthing I find irritating is when I use a link to AJAX something or toggle a div and then after I click the link and the onclick function fires off, the link is still selected. I know it doesn’t matter, whatever, here is a little hack you can do to keep this from happening. You basically “blur” the focus which is like unfocus. Here is a simple example:

[html]Toggle MyDiv[/html]

The preceding assumes that you are using prototype. If you are not using prototype then you need to start and you can get it and learn all about it here: Prototype

JavaScript Form List Key to Index

admin — Thu, 29 Mar 2007 20:58:47 +0000

JavaScript references list menu (dropdown) elements by their index number, not by the list menu’s key. So if you want to preselect a list menu using JavaScript and you know they key in the key/value pairs that comprise the listmenu, here is a simple function I wrote which you pass the field id and the key you want the index for.

[js]
function key2index(field,value){
for (i=0; i<$(field).options.length; i++){
if ($(field).options[i].value == value) return i;
} return 0;
}
[/js]