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 was trying to fill a dijit.form.combobox dynamically without using ItemFileReadStore, but it has proven to be quite a challenge. I was trying to fill the combobox from an array. It appears that Dojo’s combobox does not inherit all the attributes of a regular HTML combobox. When using just Javascript to dynamically fill a combobox, I made use of the ‘options’ attribute:

Read the rest of this entry »

In the past, one of the more tedious tasks of web design was creating the thumbnail and large view images for a photogallery. I would open an image in a graphics editor, adjust the size to create a thumbnail image, save, re-adjust the size to create a large view image, and save again. I would repeat these steps for each image of the photogallery. Depending upon the amount of images, creating a web photogallery could take quite a long time.

Quite a few years ago, I began to use Express Thumbnail Creator to create the images for a photogallery. The tool can be used to make web photogalleries, but I only used it to create the thumbnail and large view images. I would select a source folder (or select multiple images), set the width or height for both the thumbnail and large view images, and then let Express Thumbnail Creator generate the images in batch mode. It would reduce each image according to my specifications in a fraction of the time that it took me to manually reduce each image.

Over the last few years, my Mac has become my primary computer. Because Express Thumbnail Creator does not have a version for the Mac, I began to explore other ways to quickly adjust image sizes for a photogallery. Little did I know that Photoshop has the capability of creating a web photogallery.

1. Open Photoahop and then open all of the images that you want in your photogallery
2. Select File->Automate->Web Photogallery and the Web Photo Gallery Dialog appears.
3. You can select a style for the photogallery, but I only use it to adjust the image sizes in bulk, so the default style is fine.
4. Select the source and destination folders
5. Under “Options”, select “Large Image” and set the image size and quality. You can also choose whether to constrain the height, width, or both.
6. Under “Options”, select “Thumbnails” to set the max width.
7. Click “OK” to create the photogallery.

Easy enough.

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 working on a project using Dojo which requires a wysiwyg editor that is more robust than Dojo’s Dijit.Editor. After doing a bit of research, I decided to use TinyMCE.  This wysiwyg editor is very robust, has great documentation and is the editor that WordPress uses. Integrating TinyMCE did not appear to be difficult, but I also wanted to create a TinyMCE Dojo widget, so that I could easily reuse TinyMCE in other Dojo projects without having to remember how to set it up.

Read the rest of this entry »

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.