# curvyCorners Tab demo

## View the source to see how the tab row is constructed.

- Intro
- RepeatX
- Photo background
- Opposite corners
- Text alignment
- Tab 6

These demos show how curvyCorners copes in a more complex styling environment, where units are expressed in font-relative or real-world units.

Note that the tabs above have fluid width. curvyCorners can cope with both fixed-width and fluid boxes.

The contents of this page area will change depending on which tab you click. This is accomplished by a piece of javascript which hides the currently selected page area, sets the tab styles to reflect the new current tab, calls curvyCorners to re-draw the tabs, and finally un-hides the appropriate new page area.

In a little more detail: whenever a box needs to be redrawn (perhaps because its contents will change, or because it needs to be re-styled), this must be indicated by using the special class name "curvyRedraw". Then, if properties are to be changed on one of the redrawable objects, this can be done as follows:

    curvyCorners.adjust(DOMobject, 'propertyname', 'newvalue');

Finally, a call to `curvyCorners.redraw()` will redraw all the redrawable objects on the page. In this demo, all the tab boxes, and the lower main box, are all redrawn when a tab is clicked.

Here's the script for this page:

    var selectedTab = 0;

    function tabclick(n) {
      if (n === selectedTab) return; // nothing to do.
      var li = document.getElementById('tab' + selectedTab);
      curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
      li = document.getElementById('page' + selectedTab);
      li.style.display = 'none';                // hide the currently selected sub-page
      li = document.getElementById('page' + n);
      li.style.display = 'block';               // show the new sub-page
      li = document.getElementById('tab' + n);  // get the new (clicked) tab
      curvyCorners.adjust(li, 'className', 'select'); // and update its style
      curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
      selectedTab = n;              // store for future reference
    }

## Page 2

This is the styling for the <div> on this page:

    margin: 0.5in auto;
    border: 0px solid #fff;
    color: #fff;
    width: 60%;
    padding: 20px;
    text-align: left;
    background-color: #33F;
    border: 3px solid #fff;

    background-image: url(backrepeat.jpg);
    background-repeat: repeat-x;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

Note that the background repeats, and that the box is styled with a percentage value.

## Page 3

Style for this div:

    margin: 20px auto;
    color: #fff;
    width: 500px;
    height: 550px;
    padding-left:2em;
    background-image: url(backtest.jpg);
    background-repeat: no-repeat;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;

The photo is cropped because of the fixed box size.

## Page 4

This is the styling for this div:

      margin: 0.2in auto;
      color: #fff;
      width: 60%;
      padding: 20px;
      text-align: left;
      background-color: #33F;
      -webkit-border-bottom-right-radius: 20px;
      -webkit-border-top-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-bottomright: 20px;

You don't have to round all the corners of a box. There are some constraints, mostly common sense, about box styling. For example, it makes no sense to style a box with rounded top corners, a top border but no side border; and the results can be relied upon to look odd!

You can of course have rounded top corners with a border to left, top and right (but none on the bottom). That is how the tabs are styled.

## Page 5

Left aligned
Centred
Right aligned

These boxes have fluid height and fixed width. curvyCorners correctly applies text alignment styles.

## Page 6

We hope you find these demonstrations helpful.

For further information about curvyCorners, visit the web site.

Latest builds are available from the repository at Google Code.

And please, if you use curvyCorners on a commercial basis, make a donation!