I ran into a problem the other day when trying to set the visibility style attribute on a Dojo button. I assumed that setting styles on a Dijit was similar to setting the style on any other DOM element:

dojo.style(node, style, value)

But setting styles on a Dijit does not work they one would expect. My original code:

var btn = dijit.byId('register_btn');
dojo.style(btn, {visibility:'visible'});

This did not work because ‘btn‘ is not a DOM node. After an hour or so of trying different ways to get the code to work, I finally tried:

var btn = dijit.byId('register_btn').domNode;
dojo.style(btn, {visibility:'visible'});

It worked. And it makes sense. I can further simplify it with:

dojo.style(dijit.byId('register_btn').domNode, {visibility:'visible'});

While I have accessed widgets (Dijits) using the domNode in the past, I just didn’t think that I would have to when using dojo.style. But it works, so I can move on.

I am working on a Dojo widget where I wanted navigation buttons to be vertically centered within a container. Initially, I set the margin-top property in the CSS file to an exact value: (height of the container – height of the button)/2. This worked fine, but as I began to use the widget, I realized that I wanted to be able to change the dimensions of the widget without having to change the CSS file. So I changed the margin-top value of the navigation button to 50%. Didn’t work. I assumed that setting the margin-top property to 50% would center the button vertically within it’s container. Wrong. I then set it to 350% and it still did not center the button.

I googled and found that browsers determine the actual size of the margin by multiplying the percent against the ‘width’ of the parent container. Huh? That’s ridiculous! It’s not even logical. Why would the width of the parent container have anything to do with the margin-top property? So because the width of my parent container is 40px, if I set the margin-top to 50%, the actual margin-top is 40px * 50% = 20px. How assinign! Who approved this CSS spec? I would not have been surprised if IE interpreted the margin-top this way, but Firefox? Can anyone tell me why this is logical?

I’m learning Codeigniter for a project that I am working on. I ran into a problem when I created a controller method that accepts two parameters. My problem was that I did not know how to pass multiple paremeters using Codeigniter’s anchor function. The solution was quite simple in that all I had to do is add additional uri segments to the anchor function.

The controller method takes two arguments:

class Sites extends Controller {
     ...
     function updateVersion($vId, $sId) {
     ...
     }
}

Using the anchor function, I would then call this method that passes 2 as the $vId and 3 as the $sId (/2/3):

echo anchor('members/sites/updateVersion/2/3', 'select');

Simple enough.

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.

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 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.

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:

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:

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.

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.