<style>
a {
  background:url('16x16icon.png') no-repeat left center;
  display:block;
  height:16px;
  line-height:16px;
  padding-left:20px;
}
</style>
<a href="#">Link Text</a>

But what if the link text needs to span more than one line for the given width? What if the icon is taller than the text height?

This is where display:inline-block comes in.

<style>
.container {
  width:192px;
}

.container img {
  border:0;
  vertical-align:middle
}

.container span {
  display:inline-block;
  width:128px;
  vertical-align:middle;
}
</style>

<div class="container">
  <a href="#"><img src="64x64icon.png" alt="an icon" /><span>Link text that is really, really long that it takes up more than one line.</span></a>
</div>

Because the span is a block, text will wrap if longer than the width, but since the span is also inline, vertical-align:middle will align the img and the span. The only bug I’ve noticed so far is that text-decoration:underline doesn’t render properly during the hover state.

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

I tried Firefox and Chrome using their respective user-agent switcher plugins, but didn’t get very far. So go into Safari and select Develop->User Agent->Other… Paste in the above string, click OK, and make sure it’s active. Next navigate to iPad User Guide and check it out. Here’s hoping Apple will be releasing it independently or as a part of the SDK. Here’s also hoping it’s iPhone-compatible.

<div id="gallery1" class="gallery">
    <a rel="gallery1" href="/path/to/fullsize1.jpg"><img src="/path/to/thumbnail1.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize2.jpg"><img src="/path/to/thumbnail2.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize3.jpg"><img src="/path/to/thumbnail3.jpg" width="50" height="50" alt="" /></a>
</div>

The HTML is rather straight forward. You’ve got a <div> as a container for a bunch of thumbnails, each linked to a matching fullsize image. The CSS on the gallery has fixed dimensions matching the dimensions of the thumbnails with overflow set to hidden.

$(".gallery").cycle({ 
    speed:      0,
    timeout:    0
});

$(".gallery").mousemove(function(e){
    var n = $(this).children().length;
    var w = $(this).width();
    var x = e.pageX - this.offsetLeft;
    var i = Math.floor(x/w * n);

    $(this).cycle(i);
}); 

$(".gallery a").fancybox();

As for the JavaScript, it’s refreshingly short, which just goes to show how much heavylifting jQuery and the two plugins do. Let’s start with the Cycle activation. The speed parameter is set to 0. This means that the transition is instantaneous when an image flips. Setting the timeout parameter to 0 prevents the Cycle plugin from auto-advancing. So far nothing new for anyone who’s used the Cycle plugin.

The next part actually sets up the effect. Just like when you mouseover an Event group in iPhoto, whenever the mouse moves within the gallery div, the position of the mouse determines the index of the image to display. First we count the number of images within the gallery. Next, we get the width of the gallery. Then we get the horizontal position of the mouse within the gallery’s coordinate system. Finally, we use those three values to calculate the index. Using this index, we tell the Cycle plugin which image to display.

Now that the iPhoto effect is working, all that’s left is to activate the Fancybox plugin and we’re done.

RewriteRule ^.*/myskin.swf$ /pathto/myskin.swf

Any request ending in myskin.swf will be redirected to /pathto/myskin.swf under the public folder.

Adding a product to a Magento (ver. 1.3.1) shopping cart is accomplished through an HTTP GET request. It will look like or similar to this:

/path/to/app/checkout/cart/add?product=[id]&qty=[qty]

That URL is output by the template helper:

$this->getAddToCartUrl($_product)

Since adding a product to the shopping cart is nothing more than a GET request, then all that needs to be done is queue up the URLs of the desired products, make each request in order, and then reload the page when done.

First, in app/design/frontend/ / /template/catalog/product/list.html, I first added checkboxes to allow customers to select which products they want and also hidden fields for storing the URLs to add the product and text fields for the quantity.

<input type="checkbox" class="input-checkbox add" name="add_<?php echo $_iterator; ?>" id="add_<?php echo $_iterator; ?>" />
<input type="hidden" name="url_<?php echo $_iterator; ?>" id="url_<?php echo $_iterator; ?>" value="<?php echo $this->getAddToCartUrl($_product) ?>" />
<?php if(!$_product->isGrouped()): ?>
     <input type="text" class="input-text qty" name="qty_<?php echo $_iterator; ?>" id="qty_<?php echo $_iterator; ?>" maxlength="12" value="<?php echo $this->getMinimalQty($_product) ?>" />
<?php endif; ?>

I added this code within the loop that generate the HTML for the product line items for the list. Next, I added the JavaScript that does the actual processing, also within the list section right after the script block that contains: decorateList('products-list', 'none-recursive').

<script type="text/javascript">
    function processNext(urls, i) {
        var next = i + 1;
        $('processing-text').update('Processing item ' + next);
        if (next < urls.size()) {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                processNext(urls, next);
              }
            });
        } else {
            new Ajax.Request(urls[i], {
              method: 'get',
              onComplete: function(transport) {
                window.location.reload();
              }
            });
        }
    }

    function addItemsToCart() {
        $('add-items-to-cart').hide();
        $('waiting').show();
        
        var addToCartUrls = [];
        $$('input.add').each(function(e){ 
            if(e.checked == true) {
                var id = e.readAttribute('id').split('_')[1];
                var qty = Number($('qty_' + id).value);
                if (qty < 1) qty = 1;
                addToCartUrls.push($('url_' + id).value + 'qty/' + qty);
            }
        });
        
        if (addToCartUrls.size() > 0) {
            processNext(addToCartUrls, 0);
        } else {
            $('add-items-to-cart').show();
            $('waiting').hide();
            alert('Please check off the items you want to add.');
        }
    }
</script>

At the bottom of the list I added a submit button.

<div style="margin-bottom:5px; text-align:right;"><button id="add-items-to-cart" class="form-button" onclick="addItemsToCart()"><span><?php echo $this->__('Add Items to Cart') ?></span></button><div id="waiting" style="height:22px; display:none; line-height:22px;"><span id="processing-text">Processing...</span> <img src="<?php echo $this->getSkinUrl().'images/wait22trans.gif'; ?>" width="22" height="22" style="display:inline; vertical-align:middle;"/></div></div>

Clicking the button calls the function addItemsToCart(). The function hides the button to prevent a double click and unhides the status message. Next, the function determines which checkboxes are checked. For each checked checkbox, the function finds the corresponding URL field and quantity field, concatenates the two values, and stores the new URL in an array. If the length of the array is greater than 0, then the function calls processNext(), otherwise it displays an error message and resets the submit button.

The function processNext() first updates the processing message. The function takes the array of URLs and an index, and then creates an AJAX GET request using the URL at the given index in the array. If the AJAX request completes, it calls processNext() with the same array but with an incremented index while the index is less than the array length. If the incremented index is greater than the array length, then that ends the processing and the function reloads the page.

That’s it. If there is anything wrong with the code, it assumes that all the GET requests will complete. Unfortunately, given the time constraints there was no time to account for the scenario where a GET request fails.

I updated MyGoogleCal4 with a small bugfix this weekend as well. That will be the last update. Future development will continue with RESTYLEgc. Since the code was originally public domain, I opted to go with an MIT open source license. I also got the code in a Subversion repository which I should’ve done a long time ago. With the Issues tab at Google Code, I can better track and encourage bug reports and feature requests.

The code is still free, but paid support is available. I’ve also got some other ideas of where I want to take the site. So stay tuned!

Let’s say you have a page with an SEF (search engine friendly) URL Identifier of “foo”. You’d like to have a subpage “bar” nested under foo. The CMS doesn’t let you create parent-child relationships, but Magento will let you include forward slashes in the SEF URL Identifier so that it is “foo/bar”.

That’s the good news. The bad news is if you want to use the breadcrumbs block, it won’t work out of the box. The Magento CMS is flat, so the default breadcrumbs will always look like “Home / My Page Title.” The optimal solution is to override the breadcrumbs module and parse the SEF URL Identifier and construct the breadcrumbs from that. (I may write a post about it in the future so stay tuned.) The good news for those designers out there, you don’t have to dive into code.

Magento’s CMS has a feature where each page has a way to override its XML layout. When you’re editing a page, go to the “Custom Design” tab. There you’ll see a form field called “Layout Update XML”. This is the key. Here’s where you add XML to first unset the breadcrumbs block and then add it back in but with your specific breadcrumbs. Here’s the code:

<reference name="root">
<action method="unsetChild"><alias>breadcrumbs</alias></action>
</reference>

<reference name="root">
<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs">
    <action method="addCrumb">
        <crumbName>home</crumbName>
        <crumbInfo><label>Home</label><title>Go to Home Page</title><link>/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>foo</crumbName>
        <crumbInfo><label>Foo</label><title>Foo</title><link>/foo/</link></crumbInfo>
    </action>             
    <action method="addCrumb">
        <crumbName>cms_page</crumbName>
        <crumbInfo><label>Bar</label><title>Bar</title></crumbInfo>
    </action>                  
</block>
</reference>

The first reference tells Magento to call the unset action on the root block to remove the original breadcrumbs. The second reference tells Magento to add a new breadcrumbs block. Then within that block it tells Magento to add three new breadcrumbs, one for “home”, one for “foo”, and another for “bar”. crumbName is just a unique identifier. Under crumbInfo, label is the link text, title is the hover text, and link is the URL. You need to include the root forward slash. The trailing slash is optional, but to be consistent with Magento you should include it.

And that’s all there is to it. If you have a Magento site with lots of CMS subpages or pages that are deeply nested, then this method can get tedious. That’s why I said the optimal solution is to override the breadcrumbs module in core as a local modification. If you don’t have many CMS subpages and they’re only one-level deep, then this method is adequate.

First step is to setup your project according to Monocle Studio’s whitepaper through “Cleaning up the project” right before “Creating a main menu”. That’ll create the base project. You’ll probably want to change the name to something else (e.g. CocosHelloWorld) instead of SimpleGame. Make sure to change the name where appropriate, for example SimpleGameAppDelegate should be YourAppNameAppDelegate.

Create the HelloWorld class

1. Click the Classes group in Groups & Files pane.
2. Click the Action button
3. Select Add->New File…
4. Choose NSObject subclass
5. Name the class “HelloWorld”

Open HelloWorld.h and change the code to look like the following. This says that the HelloWorld class is derived from the Layer class (which is derived from the CocosNode class).

#import <UIKit/UIKit.h>
#import "cocos2d.h"

@interface HelloWorld : Layer {

}
@end

Open HelloWorld.m and change the code to the following. This says that the HelloWorld class uses its parent class for initialization. If the initialization is successful, then create a new label, place it in the center, and add it to the layer. Finally, it returns itself.

#import "HelloWorld.h"

@implementation HelloWorld

- (id) init {
    self = [super init];
    if (self != nil) {
		Label *label = [Label labelWithString:@"Hello, World!" 
									 fontName:@"Times New Roman" 
									 fontSize:32];
		label.position = cpv(240,160);
		[self add:label];
    }
    return self;	
}

@end

Setup the Director

Open up YourAppNameAppDelegate.h and change the include declarations to:

#import <UIKit/UIKit.h>
#import "cocos2d.h"
#import "HelloWorld.h"

Next open YourAppNameAppDelegate.m and change it to the following. The difference between this and the corresponding method in SimpleGame are the last two lines. The first creates a Scene node and adds a HelloWorld node to the scene. The next line starts the Director using the just created Scene as the initial scene. The previous set of lines prepare the iPhone display by initializing a window, enabling the UI for the window, setting the Director to display in landscape mode, then attach the Director to the window, and finally making the window the main window and turning it on.

#import "CocosHelloWorldAppDelegate.h"

@implementation CocosHelloWorldAppDelegate

- (void)applicationDidFinishLaunching:(UIApplication *)application {    
    UIWindow *window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    [window setUserInteractionEnabled:YES];
    [window setMultipleTouchEnabled:YES];
    [[Director sharedDirector] setLandscape: YES];
    [[Director sharedDirector] attachInWindow:window];
	
    [window makeKeyAndVisible];
	
    Scene *s = [[Scene node] add:[HelloWorld node]];
	
    [[Director sharedDirector] runWithScene:s];	
}

@end

If all is well, if you click Build & Go the iPhone simulator should display “Hello, World!”.

The code that needs to be modified is from _taxonomy_term_select() in modules/taxonomy/taxonomy.module, after line 1032.

function _taxonomy_term_select($title, $name, $value, $vocabulary_id, $description, $multiple, $blank, $exclude = array()) {
  $tree = taxonomy_get_tree($vocabulary_id);
  $options = array();

  if ($blank) {
    $options[''] = $blank;
  }
  if ($tree) {
    $curr_group = '';
    foreach ($tree as $term) {
      if (!in_array($term->tid, $exclude)) {
        if($term->parents[0] == 0) {
          $curr_group=$term->name;
          $options[$curr_group] = array();        
        }
        else {
          $choice = new stdClass();
          $choice->option = array($term->tid => str_repeat('-', $term->depth) . $term->name);
          $options[$curr_group][] = $choice;
        }
      }
    }
  }

  return array('#type' => 'select',
    '#title' => $title,
    '#default_value' => $value,
    '#options' => $options,
    '#description' => $description,
    '#multiple' => $multiple,
    '#size' => $multiple ? min(9, count($options)) : 0,
    '#weight' => -15,
    '#theme' => 'taxonomy_term_select',
  );
}

Essentially, the code simply iterates through the tree like the original code, except when it encounters a root node it creates a new key with an array value to contain the individual options, thereby creating an option group using the term’s name as its label. The code isn’t very flexible since it won’t account for root nodes with no children. Also it doesn’t account for options with a depth greater than 1, in which case you’d probably want to set a class and disabled attribute to make it look and act like an option group (since option groups can’t be nested). Such a change would also involve modifying form_select_options() in includes/form.inc since attributes for option tags is not supported.

1. Rails, a few precompiled gems (like RMagick), and a test app are automatically installed for you. Most of the tutorials walk you through installing Rails and the skeleton app from SSH. That’s no longer necessary.
2. For Capistrano, you need to set the syspath option (“System” in the control panel) to /home/[xxxxx]/containers/rails/[app_path]/current where [xxxxx] is your GridContainer number and [app_path] is where you want your app located. I kept the app path and app name the same.
3. You can’t edit application options from the web control panel. You have to do this from a SSH session using mtr set_option. You may need to do this to change the syspath or to set the environment. For example, to set the environment to “staging” you use the following command: mtr set_option [app_name] environment=staging.
4. If you change the syspath make sure to update the symbolic link to the app’s public folder under your app’s domain, otherwise you’ll get an app not found error. In other words, ~/domains/example.com/html should point to /home/[xxxxx]/containers/rails/[app_path]/current/public.
5. When an application fails to start, you get no feedback about the cause. Check log/mongrel.log for details as to why your application fails to start.
6. After changing the syspath, the app may not restart. You may get an Address already in use - bind(2) (Errno::EADDRINUSE). To resolve this, I ended up having to reboot the container.
7. For some reason, rake gems:install didn’t work. I had to manually install each gem.

I definitely had a lot more control over the installation when I had the application running on the (dv) using Passenger Phusion, especially having the ability to compile software. However, the GridContainer runs a lot faster.