I have nearly completed my new portfolio site. I developed the Flash Movie on my Windows machine, but the rest of the development (Joomla, etc) has been done on my Ubuntu box. I’m using ActionScript’s ExternalInterface Class for this project. During integration, I learned that the Javascript code on Linux is a bit different than the code needed for Windows.

Read the rest of this entry »

I’m working on a project that uses the JScrollPane JQuery Plugin to scroll a number of records. My client wanted the scroll bar to have a variable height (like most modern scroll bars). The height of the scroll bar should be determined by the number of records – the height should decrease as the number of records increase. So the scroll bar height is inversely proportional to the number of records.

Read the rest of this entry »

While working on a project, I wanted to test whether a variable was undefined in Javascript. Because Firebug displayed ‘undefined’ in the console, I assumed that I could treat it as a string.

if (variable == 'undefined') {
// do something
}

Now I knew that this wouldn’t work, but I tried it anyway. ‘undefined’ an object, not a string, so I could not treat it as a string.

After a minute of searching, I found the undefined solution:

if (typeof(variable) == 'undefined') {
// do something
}

Using the typeof operator, Javascript is able to determine whether a variable/object is ‘undefined’.

I just read an interesting article on Ajaxian.com that discussed Google Closure. I began to look at the API documentation this afternoon and found it to be a quite robust Javascript Library. I was especially geeked with the number of ui widgets available with this Library (currently 138).

Some the names of the ui widgets are interesting (AnimatedZippy, AbstractImagelessRoundedCorner, DimensionPickerRenderer). But the documentation and demos seem to be adequate enough to quickly learn how to use each widget.

The library also comes with a Closure Compiler – a JavaScript optimizer that compiles web apps down into compact, high-performance JavaScript code.

I can’t wait to use it.

I was trying to fill a dijit.form.combobox dynamically without using ItemFileReadStore, but it has proven to be quite a challenge. I was trying to fill the combobox from an array. It appears that Dojo’s combobox does not inherit all the attributes of a regular HTML combobox. When using just Javascript to dynamically fill a combobox, I made use of the ‘options’ attribute:

Read the rest of this entry »

In order get the height of a div in IE when the height is set to auto (or not set), use offsetHeight. I generally do not set the height of a div if I want the height to be determined by the the content inside the div. I was working on a YUI widget that is similar to my imAnimTabber JQuery plugin. I used YUI’s animation utility to display the tabbedd content. When using the animation object, you have to specify the attribute that is to animated and the value the attribute should be set to:

{height:  {to:  ’100px ‘}}

Because the height of the divs for the tabbed widget is dependent upon the content, I do not know what the height of the content will be. To get the height of each div in Firefox, I simply called the getStyle Dom method (YUI):

YAHOO.util.Dom.getStyle(element, ‘height’);

Of course, IE returned ‘undefined’ as the height value. So, I first had to determine if the user was using ie and then use ie’s offsetHeight to determine the height:

if (YAHOO.env.ua.ie) {
     var el = YAHOO.util.Dom.get('element');
     var h = el.offsetHeight;
}

Since we know that Microsoft is not going to change ie, I hope that YUI will change their getStyle Dom method so that it can accommodate the various browser inconsistencies.

I have been trying to find a YUI method that is similar to the JQuery $.each method, but the closest thing I could find for the current version of YUI is YAHOO.util.Dom.batch (YUI 3 has an ‘each’ method, but I haven’t explored it thoroughly). While this method is not as powerful as JQuery’s $.each (see example), it is still a very good replacement for a Javascript ‘for’ loop when iterating over a DOM collection.

Read the rest of this entry »

The JQuery $.each object accessor is probably the best method since the invention of the wheel (or at least, since Stargate SG1 was first conceived). It completely replaces the ‘for’ loop to iterate over an object. The power of this method is that it can iterate over any collection (Dom collections, associative arrays, JSON objects, etc). In general, using JQuery can make Javascript development so much easier.

Read the rest of this entry »

For years I’ve seen the calls to ‘return false’ following an onclick event, but I never realized what it was used for. Once I began using Ajax, I quckly learned why using ‘return false’ was so important. Because Ajax processes a request without refreshing the browser, I was able to see the inherint functionality of the browser when a button is clicked. The browser appears to jump to the top of the page. Adding ‘reutrn false’ after the onclick event will ensure that the browser page does not ‘jump’. Try it out.

This Plugin has been updated. See imGoogleMaps 0.9 – Multiple Addresses, Street View

Although there are other JQuery plugins that enable a developer to integrate Google maps API into websites, I wanted to create a simpler implementation, one that did not have all the options, only the basics. I think that in most situations, a website owner only wants an end-user to be able to view the owner’s address and be able to map directions to that address. In addition, I wanted a plugin that displayed a map interface that is similar to what one would see on Google Maps (auto mode) while also giving the developer the ability to style their own interface (manual mode). This plugin will also display certain Google Map errors codes. In addition, this plugin will allow you to use Ajax to retrieve an address as well as Reverse Geocoding.

Read the rest of this entry »