I was working on a PayPal powered commerce website and for the checkout form, I needed to create a dropdown list of the countries that PayPal supports. I couldn’t find a list in the exact format that I needed, so I created a JavaScript array of JSON objects. Pretty straightfoward, but I thought it would be a good starting point for some of you if you need the same thing.
This list uses the countries listed on PayPal’s website. PayPal requires that you send the 2-character IS0-3166-1 code to their API. Below I have the name and code combinations.
Continue Reading
There is a pretty sweet HTML5 JavaScript function called postMessage. Basically, this function can be used to send simple data (i.e. a string of text) between 2 different domains. I got this working by having an iframe embedded in my main page with the source of another website. Using postMessage, I can send and receive data from the main page and iframe even though they are different domains! Traditional methods of interacting between a page and an iframe of different domains don’t work due to security issues. It obviously wouldn’t be very safe to allow an iframe to arbitrarily call methods of the parent window without the main page’s permission.
What is postMessage?
The Mozilla developer docs state it pretty well:
window.postMessage is a method for safely enabling cross-origin communication. Normally, scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol (usually both http), port number (80 being the default for http), and host (modulo document.domain being set by both pages to the same value). window.postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used.
The function is called using this syntax:
otherWindow.postMessage(message, targetOrigin);
- otherWindow is a reference to a window object such as the main page or the embedded iframe
- message is a string (i.e. this could be simple text or a json object)
- targetOrigin is the url that is able to receive this message - this can be set to * for all domains, but it is more secure to explicity set the origin
Continue Reading
Floom is a pretty sweet slideshow for MooTools I was working with this week. It supports a horizontal or vertical blind effect and looks very nice and different from some of the other slideshows out there.
It’s pretty straightforward to implement and I opted to create some img tags then use a little bit of JavaScript to trigger the slideshow. However, you can do a more JavaScript heavy implementation as well. When implementing Floom, I noticed a bug that caused the slideshow to start on image 2. I made a fork of the project, but that code has since been pulled to main repository as well.
Continue Reading
The other day an interesting question was posted to the WebAssist forums (full thread). Basically, a user was getting some JavaScript errors when adding PowerGallery to an existing page in their site. The error was complaining about the $() function. For those unfamiliar with MooTools, the $() function is a quick way to get a reference to an element by its id – instead of using document.getElementById() – and extend it with some MooTools magic.
After using Firebug to track down the exact error, it was pretty clear what was going on. The user’s page already had jQuery on it! When they added in their PowerGallery code, it was causing a conflict. Luckily, MooTools has a way to deal with this issue. Instead of using $(), use document.id(). This function was added as part of the MooTools Dollar Safe Mode updates made in version 1.2.3. Since jQuery defines the $() function too, MooTools wasn’t redefining it (to help not break jQuery).
The fix was to replace all $() function calls with document.id() in the gallery JavaScript. Using some PowerGallery code as an example:
//change this
this.wrapper = $(el);
//to this
this.wrapper = document.id(el);
I never recommend using more than 1 framework if you can avoid it and I’d always pick MooTools as my one and only!
Not too long ago, crazy multi dimensional arrays were all the rage. I mean it’s pretty clear people[0][3] gives me the first name for a person in my array right?? Yeah, um no. Something like people[0].firstName is quite a bit clearer – give me the first name of the first person in my array. This is just a reminder than in you can use keyed objects (or arrays) instead of relying on numeric indexes for everything. Its surprising, but I still see cryptic indexed arrays used even today in coding.
Here’s the cryptic way:
var people = [
[100, 'pgriffin@spoonerst.com', 'Griffin', 'Peter'],
[101, 'wretchedwomb@spoonerst.com', 'Griffin', 'Stewie']
];
p1 = people[0][3]; //first name for Peter
p2 = people[1][1]; //email for Stewie
Continue Reading
Here’s a quick tip for JavaScript. Accessing an object using array notation and dot notation are interchangeable assuming the property contains valid characters that can be used in a variable name.
The following 2 lines will give me the same thing:
person1 = people['Fred'];
person2 = people.Fred;
If I have an object with a property that contains a – or space for example, you would have to use the array notation exclusively.
var cssProps = {
'background-color': '#ffffff'
};
prop1 = cssProps['background-color']; //this works
prop2 = cssProps.background-color; //this doesn't
Continue Reading
