Dojo Widgets: Converting to AMD

Ajax, Dojo, dojo-widgets, Javascript

A few years ago, I created gpDojoGallery – a Dojo image gallery widget. I was recently asked whether I had a AMD-ified version of the widget. I have been doing a lot of Drupal and Magento projects lately (with a heavy dose of jQuery) and I haven’t worked with Dojo in quite a while, so I had never heard of AMD (Asynchronous Module Definition). After some quick googling, I learned that Dojo is not the only library that uses AMD, so I decided to convert my gpDojoGallery widget to the AMD format in order to better understand it.

Continue reading

Checkout My New Site - T-shirts For Geeks

ActionScript: Setting up ExternalInterface on Linux

Actionscript, Flash, Ubuntu

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Javascript: Inversely Proportional

Javascript, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Javascript: Testing For Undefined

Javascript, Pebblet

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.

?View Code JAVASCRIPT
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:

?View Code JAVASCRIPT
if (typeof(variable) == 'undefined') {
// do something
}

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

Checkout My New Site - T-shirts For Geeks

Google Closure

Ajax, Google Closure

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.

Checkout My New Site - T-shirts For Geeks

Dojo: Adding Items to a Combobox Dynamically

Ajax, Dojo, Javascript

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:

Continue reading

Checkout My New Site - T-shirts For Geeks

IE offsetHeight: Height undefined if Height is set to ‘Auto’

CSS, Javascript, Pebblet, YUI

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.

Checkout My New Site - T-shirts For Geeks

YAHOO.util.Dom.batch

Ajax, Javascript, YUI

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

JQuery $.each

Ajax, Javascript, JQuery

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.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using Return False in Javascript

Javascript, Pebblet

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.

Checkout My New Site - T-shirts For Geeks