I read on dojocampus.org that the color of the Dialog’s underlay can be changed. The example on the site shows how to change the underlay color of an individual dialog box:

    #dialogColor_underlay {
        background-color:green;
    }

<div id="dialogColor" title="Colorful" dojoType="dijit.Dialog">
     My background color is Green
</div>

But, this only changes the underlay color of an individual dialog box. It seems to me that unless I am building an Dojo application for, let’s say a kid’s website, that I want the color change to be consistent. I also don’t want to have to create a separate style for each Dialog box that I may have on a page. So, to change the underlay color for all dialog boxes on a page:

.dijitDialogUnderlay {
     background: green;
}

Easy.

I recently created a help system for a Dojo application that I have been working on. I wanted a simple implementation, but also one that is fairly robust. My initial implementation (version 1) was easy to create due to the power of dojo.query, dojo.forEach, and dojo.connect.

Read the rest of this entry »

I have created Dojo Dialog boxes via markup in the past, but I recently began to dynamically create all Dialogs within an application. My primary reason for doing so is to remove some of the code from an html page and give me greater flexiblity with the functionality.

Read the rest of this entry »

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.

Read the rest of this entry »

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.

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.

Read the rest of this entry »

I have been a PHP developer for many years and I have recently started learning Drupal 6. I struggled for a few days just trying to modify one of the existing themes. If any of you are just starting to learn Drupal and you want to create your own design/theme, I found that the easiest way is to first create your design template (HTML and CSS) without the PHP/Drupal code. Once your design is complete and can be viewed correctly in the modern browsers, then  open up one the themes (page.tpl.php) that are installed with Drupal and copy/paste the revelant PHP code into your template. I also use this approach when I create WordPress themes.

Before you begin your design, make sure that you have a fairly good understanding of Drupal’s Regions, Blocks and Modules and Blocks (Blocks are placed into Regions). Namely, header, left side, right side, and footer. You don’t necessarily have to use all regions in your design (i.e., you may not need a right side), but you should have a good understanding of what each region can be used for.

When I created my first Drupal theme, I did not think that I needed a right side, so I did not create one. But after I looked at other websites that use Drupal (and the many contributed modules), I found some very good content ideas that can be placed on the right side of my Drupal theme template.

I will, from time-to-time, post other Drupal tidbits (as I learn them).

I am working on a project using Dojo and I wanted all the buttons in the application to have the same width. By default Dojo will set the width of the button by the width of the button label (the more characters in the label, the wider the button). To set all the buttons to the same width, I add the following to my CSS file:

.dijitButtonNode {
     width:150px;
}

Simple enough.

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.