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.