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.