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
}