YUI ButtonGroup Notes

Mon 02 March 2009

Some tips and things to check if your YUI ButtonGroup isn't behaving as you wish it would.

Double-check your <body> tag has class="yui-skin-sam"
Unlike in the documentation example, you can't just put a call to YAHOO.widget.ButtonGroup pointing to your div anywhere in your HTML and expect it to work. You've got to wait for it to be ready with something like:
```
<script type="text/javascript">
YAHOO.util.Event.onContentReady("my_button_div", function() {
  var oButtonGroup = new YAHOO.widget.ButtonGroup("my_button_div");
});
</script>
```

You can easily get an image in each button. For example, if your button is defined as:

<span id="my-button-id" class="yui-button yui-radio-button yui-button-checked">
 <span class="first-child">
   <button type="button" hidefocus="true"></button>
 </span>
</span>

Simply add a CSS class something like:

.yui-button#my-button-id button { background:url(http://server/image.jpg) 50% 50% no-repeat; }

Hopefully, this will save someone else a few hours!