Dojo: Setting the Visibility Style Attribute on a Button Dijit

Ajax, Dojo, Pebblet

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:

?View Code JAVASCRIPT
dojo.style(node, style, value)

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

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

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

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

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

Checkout My New Site - T-shirts For Geeks

CSS: Using Percent With Margin

CSS, Pebblet

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?

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

Learning Drupal – Step 1: Themes

Drupal, Pebblet, PHP

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

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

Remove Selection Border Around Image in Firefox

CSS, Pebblet

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:

Checkout My New Site - T-shirts For Geeks