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

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.

While creating my intriguingminds.com site, I ran into a problem with a selection border appearing around images. These images were used as buttons. When I clicked the button, the selection border appears.

To remove the selection border from around an image for Firefox, add this to your CSS file:

:focus { -moz-outline-style: none; }

Now, when you  click on the image it will look like this: