Simple Border Resize

Here's a simple way to resize a top or bottom border of the widget, a slight modification will do the sides too. It's nice because it will also handle a border that has a nice gradient fill, and/or rounded corners.

The idea is to have two corner images and a third center image that stretches to horizontally fill whatever gap is between them. AFAIK: this bit requires JavaScript.

- Use your image editor or Dashcode to create the base border (images here shown x3)...


- Open the image in an image editor, such as Gimp.

- Use the crop tool to create three new images, the left corner, the right corder, and a one pixel wide strip from the center. For the corners also include five to ten extra pixels from the width. This is to prevent a rendering artifact when resizing (more on this later)




- So copy the three images into the widget Images folder, add them to the html, and edit their css placement values (or use the inspector in Dashcode). Here's my css as an example:

#bottomleftimage {
 position: absolute;
 bottom: 12px;
 left: 12px;
}

#bottomimage {
 position: absolute;
 bottom: 12px;
 left: 22px;
 width: 283px;  // default width, this will change on resize
}

#bottomrightimage {
 position: absolute;
 bottom: 12px;
 left: auto;
 right: 12px;
}

- Running the widget now: the border should look good on default size. On resizing it will move the right corner correctly but the center of the border won't stretch. To do the stretch: Just after the window.resize call....

...
window.resizeTo(x,y);
document.getElementById("bottomimage").style.width = 
    (x-42) + "px";
...

The '42' is found by subtracting the total width of the widget minus the width of your border center by default. Try and make the center image overlap by five or so pixels into the corner images, this will stop any gaps appearing during resizing.

- Now when you resize the widget the border will resize nicely too.

Resizing Text Dynamically

In the latest version of the ListenAgain widget the text shrinks and descriptions disappear when the widget is resized to a small size. I think this is quite a nice effect and especially useful in Dashboard where space is very limited.

The trick is to use JavaScript to manipulate the CSS style when the widget resizes.
The hardest thing I found was to find the correct style sheet object. The following bit of code should do the hard work and return the CSS object with the matching name.

function getStyleClass(className) 
{
  for(var s=0; s <  document.styleSheets.length; s++)
  {
    var ret = getStyleClassFromRules(className,
                document.styleSheets[s].cssRules);
    if (ret != null)
      return ret;
  } 
  return null;
}

function getStyleClassFromRules(className, cssRules)
{
  for(var r=0; r<cssRules.length; r++)
  {
    if (cssRules[r].selectorText != null)
 {
   if (cssRules[r].selectorText == className)
     return cssRules[r];
 }
 else if (cssRules[r].styleSheet)
 {
   var ret = getStyleClassFromRules(className, 
                      cssRules[r].styleSheet.cssRules);
   if (ret != null)
     return ret;
 }
  }
  return null;
}

So now in your resize method, grab the CSS Object for the object to shrink and tweak it's style: e.g. To find the style for ".articlebody" and change it's look...

  var descStyle = getStyleClass(".articlebody");
  if (descStyle != null)
  {
   if (y < 280)
     descStyle.style.display = "none"; // hide
   else
     descStyle.style.display = "block"; // show
     
   if (x < 245)
     descStyle.style.fontSize = "11px"; // small
   else if (x < 280)
     descStyle.style.fontSize = "12px"; // larger
   else
     descStyle.style.fontSize = "13px"; // largest
  }

Of course there are loads more style options to change, and from here lots of cool effects are possible. For example, add a simple timer and slowly change an objects opacity to make it fade in or out; or grow and shrink an image as the mouse moves over it.

Listen Again v3.0

Here's a new version of the Listen Again widget.

Changes:
- Better resizing. The previous versions were always a bit large, so you can now shrink down to much smaller sizes and the text will adjust size automatically. Also once the widget is shrunk past a certain size the programme descriptions are automatically hidden.

- Added a 'now playing' icon.

- Added a time code for playing programmes.

- Removed rear side of the widget as there were only two options on there: Show Descriptions, and Volume. The volume control seemed virtually useless considering there are easy machine volume controls on Macs.

- Fixed a bug with the scroll pane during resize.

Enjoy!

Download

Mac OS X 10.4 Tiger is required. If you're using Safari, click the download link. When the widget download is complete, Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it. If you're using a browser other than Safari, click the download link. When the widget download is complete, unarchive it and place it in /Library/Widgets/ in your home folder. Show Dashboard, click the Plus sign to display the Widget Bar and click the widget's icon in the Widget Bar to open it.

Troubleshooting: If you cannot play radio streams, and also cannot play streams directly from the BBC web site in Safari then RealPlayer is probbaly not installed or configured properly.