YUI Dialog Buttons Scope

Ajax, YUI

When calling a function to handle the click event for the YUI Dialog buttons, the scope of the function is always the dialog instance itself. This is not a problem in most situations, but when creating a custom YUI widgets, use the object literal option to handle the event rather than just calling a function. Otherwise, you will run into scope issues.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI: An Input Field Calendar Widget

Ajax, YUI, yui-widgets

I am working again on a project that uses the Yahoo User Interface Library (YUI). One of the requirements for the project is an input calendar field. When I first began the project, I created an event listener (Event.Listener) as discussed in a previous post.  But, because a date field is fairly common in web applications,  I wanted to create a widget so that I would not have to duplicate the process in future projects. To my surprise, YUI does not already have a widget with this functionality, so I decided to create one. This widget can be used with a one or multiple input fields. When a user clicks on the input field, the calendar appears. Select a date and the date is automatically inserted into the input field.

Continue reading

Checkout My New Site - T-shirts For Geeks

Using the YUI Loader Utility

Ajax, YUI

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies into your page via script. While I haven’t used the YUI Loader Utility that often, I like using the utility beacause I don’t have to remember all of the dependencies needed by each component. In addition, I can use the loader utility to load any custom plugins.

Continue reading

Checkout My New Site - T-shirts For Geeks

YUI: Using Event.addListener. One Calendar, Multiple Fields

Ajax, YUI

I am working on a YUI application where I have multiple date fields. The date fields are regular input fields. When a user clicks on the input field a YUI Calendar appears. When a date is selected from the calendar, the date value is inserted into the appropriate input field.

Continue reading

Checkout My New Site - T-shirts For Geeks

Yahoo User Interface Library Method Shortcuts

Ajax, Pebblet, YUI

One of the aspects of developing with the Yahoo User Interface Library (YUI) that I do not particularly like typing the long method calls (i.e., YAHOO.util.dom.get). Fortunately, I can create shorcuts to eliminate much of the typing. I generally add these shortcuts to the top of an anonymous function:

(function() {
     var Dom = YAHOO.util.Dom,
     Event = YAHOO.util.Event,
     Selector = YAHOO.util.Selector,
     Calendar = YAHOO.widget.Calendar,
     Dialog = YAHOO.widget.Dialog;
     ...

})();

So if I need to instantiate the Calendar widget,  I can type:
var calCal = new Calendar("appointCal", {
     iframe:false
});

instead of:
var calCal = new YAHOO.widget.Calendar("appointCal", {
     iframe:false
});

Also, I recently started using $ to replace Dom.get:
var Dom = YAHOO.util.Dom,
$ = Dom.get;

So instead of typing:
var fld = Dom.get('whatever');

I now type:
var fld = $('whatever');

YUI code can be very verbose, so any shortcut is helpful.

Checkout My New Site - T-shirts For Geeks

Dojo – Understanding The BorderContainer

Ajax, Dojo

I recently restarted a project that I haven’t worked on in nearly a year. I am using Dojo for the project. I ran the application in order view the current functionality and to try to figure out where I stopped in my development. I then upgraded to a new version (1.3) and viewed the website once again. I immediately noticed a firebug message that basically told me that the LayoutContainer was being deprecated and would not be used in version 2. The message also suggested that I should use BorderContainer instead.

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

YUI Selector Utility: CSS3 Attribute Selectors and Pseudo-classes

Ajax, Pebblet, YUI

I have been using the YUI Selector Utility for a few months, but I just recently discovered how powerful it really is. I have been converting my imValidateForm JQuery plugin into a YUI widget. One of the validations this widget checks is whether a set of radio buttons are checked. I originally created validation object with pure Javascript. To determine whether the radio buttons were checked, I created the following code:

?View Code JAVASCRIPT
var flds = document.getElementsByName(‘gender’);
var nL = flds.length;
for (var j=0; j<nL; j++) {
     if (flds[j].checked) {
          ischecked = true;
          break;
     }
}

This is so verbose when compared to the YUI implementation of the same code:

?View Code JAVASCRIPT
var ischecked = (YAHOO.util.Selector.query('input[name=gender]:checked').length > 0) ? true : false;

Not only am I able to use the CSS3 Attribute Selector and Pseudo-classes, I can combine the two to create more succinct code. Marvelous.

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

Scope Correction with YUI

Ajax, Javascript, YUI

The more I use the Yahoo User Interface Library (YUI), the more I am impressed with it. I have been converting my JQuery imValidateForm plugin to a YUI widget for a project that I am working on. I ran into a scope issue when a button was clicked. I have dealt with Javascript scope issues in the past, but I did not know how to fix it using YUI.  Continue reading

Checkout My New Site - T-shirts For Geeks