SOURCE CODE: Fade CSS Style Across Nodes
VIEW EXAMPLE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Fade CSS Style Across Nodes | JavaScript Examples | UIZE JavaScript Framework</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="keywords" content="color menu Uize.Curve Uize.Fx.xShadows"/>
  <meta name="description" content="See how CSS style properties can be faded across a series of nodes to create color gradient effects you wouldn't think possible without using images."/>
  <link rel="alternate" type="application/rss+xml" title="UIZE JavaScript Framework - Latest News" href="http://www.uize.com/latest-news.rss"/>
  <link rel="stylesheet" href="../css/page.css"/>
  <link rel="stylesheet" href="../css/page.example.css"/>
  <link rel="stylesheet" href="../css/widget.tabs.css"/>
  <link rel="stylesheet" href="css/selector-links.css"/>
  <link rel="stylesheet" href="css/params-table.css"/>
  <link rel="stylesheet" href="css/params-inspector.css"/>
  <style type="text/css">
    #page-paramsInspector .tabShell {
      width:480px;
    }
    #page_paramsInspector_settings {
      width:400px;
      height:286px;
      font-size:12px;
    }
    #page_paramsInspector_preview {
      width:466px;
    }
    .menuLinks {
      position:relative;
      width:200px;
      background:#364040;
      padding:10px;
      padding-bottom:5px;
    }
    .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active {
      display:block;
      font-size:12px;
      text-transform:uppercase;
      text-align:center;
      letter-spacing:4px;
      color:#bbb;
      background:#000;
      border:2px solid #000;
      width:182px;
      padding:5px 7px;
      margin-bottom:5px;
      text-decoration:none;
      overflow:hidden;
    }
  </style>
</head>

<body>

<script type="text/javascript" src="../js/Uize.js"></script>

<h1 class="header">
  <a id="page-homeLink" href="../index.html" title="UIZE JavaScript Framework home"></a>
  <a href="../index.html" class="homeLinkText" title="UIZE JavaScript Framework home">UIZE JavaScript Framework</a>
</h1>

<div class="main">
  <h1 class="document-title">
    <a href="../javascript-examples.html" class="breadcrumb breadcrumbWithArrow">JAVASCRIPT EXAMPLES</a>
    Fade CSS Style Across Nodes
    <div class="pageActionsShell">
      <div id="page-actions" class="pageActions"><a href="source-code/fade-css-style-across-nodes.html" class="buttonLink">SOURCE</a></div>
    </div>
  </h1>

  <!-- explanation copy -->

  <div class="explanation">
    <p>This example shows how the <code>Uize.Fx.fadeStyleAcrossNodes</code> method of the <a href="../reference/Uize.Fx.html"><code>Uize.Fx</code></a> module can be used to apply interesting color gradient effects to the items in a navigation menu (shown to the left), from the tasteful to the outlandish. There is no animation in this example - instead, the style fade is occurring across a series of nodes. A list of links in the <b>"PRESETS"</b> tab lets you select / preview effect presets. To fool around with the settings for a preset, switch over to the <b>"PARAMS"</b> tab to tweak values and then click the <b>"PREVIEW CSS STYLE FADE"</b> button to preview changes. <b>NOTE:</b> A number of the presets utilize the CSS3 <code>text-shadow</code> property, and this style property is not supported in all browsers.</p>
  </div>

  <!-- page layout's "wireframe" with slot for params inspector -->

  <table border="0" cellspacing="0" cellpadding="4" style="margin:auto;">
    <tr valign="top">
      <td>
        <div class="menuLinks">
          <a href="javascript://" class="menuLink">About Us</a>
          <a href="javascript://" class="menuLink">Products</a>
          <a href="javascript://" class="menuLink">Services</a>
          <a href="javascript://" class="menuLink">Technology</a>
          <a href="javascript://" class="menuLink">Solutions</a>
          <a href="javascript://" class="menuLink">My Account</a>
          <a href="javascript://" class="menuLink">Locations</a>
          <a href="javascript://" class="menuLink">Investors</a>
          <a href="javascript://" class="menuLink">Support</a>
          <a href="javascript://" class="menuLink">Contact Us</a>
        </div>
      </td>
      <td id="page-paramsInspector"></td>
    </tr>
  </table>
</div>

<textarea id="page_paramsInspector-inlinePresets" style="display:none;">

Engraved and Beaten Oxidized Copper
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'8a8',
        borderTopColor:'acb',
        borderLeftColor:'698',
        borderRightColor:'698',
        borderBottomColor:'352',
        backgroundColor:'576',
        textShadow:[
          '#0 -2 0 1',
          '#0 0 -1 1',
          '#f 2 0 2',
          '#f 0 2 2',
          '#f -50 -13 10',
          '#f -25 -17 10',
          '#f 25 -13 10',
          '#f 50 -13 10',
          '#0 -50 10 10',
          '#0 -25 17 10',
          '#0 25 10 10',
          '#0 50 10 10'
        ]
      },
      {
        color:'696',
        borderTopColor:'597',
        borderLeftColor:'264',
        borderRightColor:'264',
        borderBottomColor:'132',
        backgroundColor:'254',
        textShadow:[
          '#0 -2 0 1',
          '#0 0 -1 1',
          '#f 2 0 2',
          '#f 0 2 2',
          '#f -50 -13 10',
          '#f -25 -17 10',
          '#f 25 -13 10',
          '#f 50 -13 10',
          '#0 -50 10 10',
          '#0 -25 17 10',
          '#0 25 10 10',
          '#09c 50 10 10'
        ]
      }
    )

Blue Gradient, Embossed Text, Lit from Left
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'f',
        borderTopColor:'578',
        borderLeftColor:'9ab',
        borderRightColor:'001',
        borderBottomColor:'578',
        backgroundColor:'456',
        textShadow:[
          '#0 3 0 3',
          '#0 0 2 3',
          '#f -1 0 2',
          '#f 0 -1 2',
          '#f -140 -5 15',
          '#f -140 5 15',
          '#f -90 -5 20',
          '#f -90 5 20',
          '#0 100 -5 20',
          '#0 100 5 20',
          '#0 120 0 15',
          '#0 120 0 15'
        ]
      },
      {
        color:'c',
        borderTopColor:'235',
        borderLeftColor:'357',
        borderRightColor:'010',
        borderBottomColor:'235',
        backgroundColor:'124',
        textShadow:[
          '#0 3 0 3',
          '#0 0 2 3',
          '#c -1 0 2',
          '#c 0 -1 2',
          '#c -120 -5 20',
          '#c -120 5 20',
          '#c -90 -5 15',
          '#c -90 5 15',
          '#0 100 -5 20',
          '#0 100 5 20',
          '#0 120 0 15',
          '#0 120 0 15'
        ]
      }
    )

Tarnished Plate Metal Plaques
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'a62',
        borderTopColor:'962',
        borderLeftColor:'742',
        borderRightColor:'642',
        borderBottomColor:'540',
        backgroundColor:'853',
        textShadow:[
          '#0 2 0 1',
          '#0 0 1 1',
          '#600 2 0 2',
          '#c -2 -1 2',
          '#900 -50 -13 5',
          '#9cf -25 -17 5',
          '#f80 25 -13 5',
          '#ffc 50 -13 7',
          '#ff0 -50 10 10',
          '#f00 -25 17 2',
          '#700 25 10 10',
          '#0 50 10 6'
        ]
      },
      {
        color:'a62',
        borderTopColor:'742',
        borderLeftColor:'530',
        borderRightColor:'300',
        borderBottomColor:'0',
        backgroundColor:'420',
        textShadow:[
          '#0 2 0 1',
          '#0 0 1 1',
          '#620 2 0 2',
          '#9 -2 -1 2',
          '#0 -50 -17 2',
          '#f -25 -13 9',
          '#f70 50 -13 5',
          '#07f 25 -13 8',
          '#640 -25 17 10',
          '#900 -50 10 8',
          '#200 50 10 5',
          '#900 45 0 12'
        ]
      }
    )

Rusty Plate Metal Plaques, Corroded at Edges
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'a62',
        borderColor:'0',
        backgroundColor:'853',
        textShadow:[
          '#0 -50 0 10',
          '#0 50 0 10',
          '#0 -70 -15 2',
          '#0 70 -15 2',
          '#0 -70 15 2',
          '#0 40 15 2',
          '#0 -2 0 1',
          '#0 0 -1 1',
          '#600 2 0 2',
          '#f 2 1 2',
          '#900 -50 -13 5',
          '#9cf -25 -17 5',
          '#f80 25 -13 5',
          '#ffc 50 -13 7',
          '#ff0 -50 10 10',
          '#f00 -25 17 2',
          '#700 25 10 10',
          '#0 50 10 6'
        ]
      },
      {
        color:'a62',
        borderColor:'0',
        backgroundColor:'420',
        textShadow:[
          '#0 -130 0 5',
          '#0 140 0 4',
          '#0 50 -15 2',
          '#0 -50 -15 2',
          '#0 70 15 2',
          '#0 -70 15 2',
          '#0 -2 0 1',
          '#0 0 -1 1',
          '#620 2 0 2',
          '#f 1 1 2',
          '#0 -50 -17 2',
          '#f -25 -13 9',
          '#f70 50 -13 5',
          '#07f 25 -13 8',
          '#640 -25 17 10',
          '#900 -50 10 8',
          '#200 50 10 5',
          '#900 45 0 12'
        ]
      }
    )

Glowy Magenta to Tangerine Blend
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'c9f',
        backgroundColor:'317',
        textShadow:[
          '-20px 0 2em #00f',
          '-10px -4px 2em #0ff',
          '0 -6px 2em #00f',
          '20px 0 2em #09f',
          '10px 0 2em #f6f',
          '0 6px 2em #0ff'
        ]
      },
      {
        color:'fc9',
        backgroundColor:'920',
        textShadow:[
          '-20px 0 2em #ff0',
          '-10px -4px 2em #ff0',
          '0 -6px 2em #f00',
          '20px 0 2em #9f0',
          '10px 0 2em #f6f',
          '0 6px 2em #ff0'
        ]
      }
    )

Pastel Blue Through Green Through Pink Through Peach
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'f',
        backgroundColor:'68a',
        borderLeftColor:'0ff',
        borderTopColor:'09f',
        borderRightColor:'044',
        borderBottomColor:'004',
        textShadow:'#0 1 1 2'
      },
      {
        color:'f',
        backgroundColor:'d76',
        borderLeftColor:'faa',
        borderTopColor:'fcc',
        borderRightColor:'fca',
        borderBottomColor:'fac',
        textShadow:'#0 1 1 2'
      },
      {
        curve:{
          color:Uize.Curve.easeInPow (6),
          borderLeftColor:[
            Uize.Curve.easeInOutPow (8),
            Uize.Curve.easeInPow (2),
            Uize.Curve.easeInPow (3)
          ],
          borderTopColor:[
            Uize.Curve.easeMiddlePow (4),
            Uize.Curve.easeInPow (3),
            Uize.Curve.easeMiddlePow (8)
          ],
          borderRightColor:[
            Uize.Curve.easeInOutPow (8),
            Uize.Curve.easeInPow (3),
            Uize.Curve.easeMiddlePow (5)
          ],
          borderBottomColor:[
            Uize.Curve.easeInOutPow (4),
            Uize.Curve.easeInPow (9),
            Uize.Curve.easeMiddlePow (2)
          ],
          backgroundColor:[
            Uize.Curve.easeInOutPow (2),
            Uize.Curve.easeInPow (4),
            Uize.Curve.easeMiddlePow (7)
          ]
        }
      }
    )

Subtle Pastel Green to Blue Blend
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'d',
        borderColor:'59a',
        backgroundColor:'375',
        textShadow:'#0 2 2 3'
      },
      {
        color:'d',
        borderColor:'375',
        backgroundColor:'357',
        textShadow:'#0 2 2 3'
      }
    )

Glow Green Gradient
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'f',
        borderColor:'8cb',
        backgroundColor:'576',
        textShadow:'#6bb -4 0 4,#6bb 4 0 4,#6bb 0 -2 4,#6bb 0 2 4'
      },
      {
        color:'f',
        borderColor:'375',
        backgroundColor:'253',
        textShadow:'#0bb -4 0 4,#0bb 4 0 4,#0bb 0 -2 4,#0bb 0 2 4'
      }
    )

Gray-dient
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'f',
        backgroundColor:'9',
        borderColor:'c',
        textShadow:'#0 2 2 3'
      },
      {
        color:'8',
        backgroundColor:'3',
        borderColor:'4',
        textShadow:'#0 2 2 3'
      }
    )

Military Uniform Dirty Shades of Gray
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'cbb',
        borderColor:'b',
        backgroundColor:'7',
        textShadow:'#411 -2 0 3,#033 2 0 3,#630 -100 -5 9,#0 20 5 9'
      },
      {
        color:'988',
        borderColor:'5',
        backgroundColor:'3',
        textShadow:'#0 -2 0 3,#0 2 0 3,#630 100 10 8,#030 -100 -10 9'
      },
      {
        curve:{
          backgroundColor:[
            Uize.Curve.easeMiddlePow (5),
            Uize.Curve.easeMiddlePow (4),
            Uize.Curve.easeMiddlePow (3)
          ],
          borderColor:[
            Uize.Curve.easeMiddlePow (4),
            Uize.Curve.easeMiddlePow (5),
            Uize.Curve.easeMiddlePow (2)
          ],
          textShadow:[
            null,
            null,
            Uize.Curve.saw (5,.5),
            Uize.Curve.saw (7,.5)
          ]
        }
      }
    )

Gradient From Light Greenish Gray to Dark Blueish Gray
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'efe',
        backgroundColor:'9aa',
        borderColor:'bcb',
        textShadow:'#0 2 2 3'
      },
      {
        color:'899',
        backgroundColor:'234',
        borderColor:'345',
        textShadow:'#0 2 2 3'
      }
    )

Green to Blue, with Blurry Text Shadows
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'7fb',
        borderColor:'0',
        backgroundColor:'045',
        textShadow:[
          '#0 -3 0 3px',
          '#0 3 0 3px',
          '#0 0 -2 3px',
          '#0 0 2 3px',
          '#0a8 -40px 0 .7em',
          '#0bb 30px 0 .7em',
          '#0f0 -20px 0 1em',
          '#0f0 50px 0 1em'
        ]
      },
      {
        color:'6bf',
        borderColor:'0',
        backgroundColor:'024',
        textShadow:[
          '#0 -3 0 3px',
          '#0 3 0 3px',
          '#0 0 -2 3px',
          '#0 0 2 3px',
          '#06f -30px 0 .7em',
          '#09f 10px 0 .7em',
          '#03f 30px 0 1em',
          '#05f 50px 0 1em'
        ]
      }
    )

Fiery Embers
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'ffa',
        backgroundColor:'740',
        borderColor:'620',
        textShadow:[
          '-3 0 3 #0',
          '3 0 3 #0',
          '#f90 -25 -5 .5em',
          '#ff0 25 5 .5em',
          '#f96 -20 5 1em',
          '#fc9 20 -5 1em'
        ]
      },
      {
        color:'fc9',
        backgroundColor:'400',
        borderColor:'0',
        textShadow:[
          '30 0 9 #400',
          '-30 0 12 #f90',
          '#950 25 9 .5em',
          '#930 -25 -5 1em',
          '#f96 20 -5 1em',
          '#fc9 -20 5 1em'
        ]
      }
    )

Gradient From Greenish Gray to Purple
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'f',
        backgroundColor:'567',
        borderColor:'789',
        textShadow:[
          '#225 0 -5 .7em',
          '#255 0 -2 .6em',
          '#252 0 2 .4em',
          '#0 0 5 .6em'
        ]
      },
      {
        color:'f',
        backgroundColor:'226',
        borderColor:'006',
        textShadow:[
          '#099 0 -9 1em',
          '#aaf 0 -7 2em',
          '#aaf 0 7 2em',
          '#099 0 9 1em'
        ]
      }
    )

Blues and Greens Watercolor Blur
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'0',
        backgroundColor:'6a6',
        borderColor:'7c9',
        textShadow:[
          '#036 -1 0 2',
          '#036 1 0 2',
          '#036 0 -1 2',
          '#036 0 1 2',
          '#06c -10 0 .5em',
          '#06c -5 -3 .5em',
          '#06c 5 -3 .5em',
          '#06c 10 0 .5em',
          '#06c -5 3 .5em',
          '#06c 5 3 .5em',
          '#06c 0 -4 .5em',
          '#06c 0 4 .5em'
        ]
      },
      {
        color:'0',
        backgroundColor:'226',
        borderColor:'006',
        textShadow:[
          '#032 -1 0 2',
          '#032 1 0 2',
          '#032 0 -1 2',
          '#032 0 1 2',
          '#6f6 -10 0 .5em',
          '#6f6 -5 -3 .5em',
          '#6f6 5 -3 .5em',
          '#6f6 10 0 .5em',
          '#6f6 -5 3 .5em',
          '#6f6 5 3 .5em',
          '#6f6 0 -4 .5em',
          '#6f6 0 4 .5em'
        ]
      }
    )

Green to Red Neon Glow
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'0',
        backgroundColor:'044',
        borderColor:'046',
        textShadow:[
          '#6cf -1 0 1',
          '#6cf 1 0 1',
          '#6cf 0 -1 1',
          '#6cf 0 1 1'
        ]
      },
      {
        color:'0',
        backgroundColor:'400',
        borderColor:'740',
        textShadow:[
          '#fc6 -1 0 1',
          '#fc6 1 0 1',
          '#fc6 0 -1 1',
          '#fc6 0 1 1'
        ]
      }
    )

Gold Ingots, Mold Lettering
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'a82',
        backgroundColor:'a84',
        borderTopColor:'fd8',
        borderLeftColor:'fd8',
        borderRightColor:'652',
        borderBottomColor:'532',
        textShadow:[
          '#0 -1 0 1',
          '#f 1 0 1',
          '#0 -1 -1 2',
          '#f 1 1 2'
        ]
      },
      {
        color:'861',
        backgroundColor:'431',
        borderTopColor:'542',
        borderLeftColor:'542',
        borderRightColor:'0',
        borderBottomColor:'0',
        textShadow:[
          '#0 -1 0 1',
          '#f 1 0 1',
          '#0 -1 -1 2',
          '#a82 1 1 2'
        ]
      },
      {
        curve:{
          color:Uize.Curve.resolve (3),
          backgroundColor:Uize.Curve.resolve (1.5),
          borderLeftColor:Uize.Curve.resolve (-1.5),
          borderTopColor:Uize.Curve.resolve (-2),
          borderRightColor:Uize.Curve.resolve (2),
          borderBottomColor:Uize.Curve.resolve (-3)
        }
      }
    )

Gold Ingots, Crisp Stamped Lettering
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'fc5',
        backgroundColor:'a84',
        borderTopColor:'fd8',
        borderLeftColor:'fd8',
        borderRightColor:'652',
        borderBottomColor:'532',
        textShadow:[
          '#b73 0 0 1',
          '#0 0 0 2',
          '#a82 -1 -1 1',
          '#f -2 -1 3',
          '#310 1 0 1',
          '#310 3 0 2'
        ]
      },
      {
        color:'973',
        backgroundColor:'431',
        borderTopColor:'542',
        borderLeftColor:'542',
        borderRightColor:'0',
        borderBottomColor:'0',
        textShadow:[
          '#941 0 0 1',
          '#0 0 0 2',
          '#b61 -1 -1 1',
          '#b -2 -1 3',
          '#0 1 0 1',
          '#0 3 0 2'
        ]
      },
      {
        curve:{
          color:Uize.Curve.resolve (-2),
          backgroundColor:Uize.Curve.resolve (1.5),
          borderLeftColor:Uize.Curve.resolve (-1.5),
          borderTopColor:Uize.Curve.resolve (-2),
          borderRightColor:Uize.Curve.resolve (2),
          borderBottomColor:Uize.Curve.resolve (-3)
        }
      }
    )

Bronze Bars, With Diagonal Glint
  settings::
    Uize.Fx.fadeStyleAcrossNodes (
      {className:'menuLink'},
      {
        color:'db9',
        backgroundColor:'765',
        borderTopColor:'a97',
        borderLeftColor:'dca',
        borderRightColor:'652',
        borderBottomColor:'532',
        textShadow:[
          '#b73 0 0 1',
          '#0 0 0 2',
          '#a84 -1 -1 1',
          '#f -2 -1 3',
          '#310 1 0 1',
          '#310 3 0 2',
          '#f -50 -7 20',
          '#0 150 -7 15',
          '#0 150 0 15'
        ]
      },
      {
        color:'ba8',
        backgroundColor:'332822',
        borderTopColor:'542',
        borderLeftColor:'542',
        borderRightColor:'0',
        borderBottomColor:'0',
        textShadow:[
          '#941 0 0 1',
          '#0 0 0 2',
          '#b61 -1 -1 1',
          '#f -2 -1 3',
          '#0 1 0 1',
          '#0 3 0 2',
          '#f -150 7 20',
          '#0 50 -7 15',
          '#0 50 0 15'
        ]
      },
      {
        curve:{
          color:Uize.Curve.resolve (3),
          backgroundColor:Uize.Curve.resolve (1.5),
          borderLeftColor:Uize.Curve.resolve (-4),
          borderTopColor:Uize.Curve.resolve (-2),
          borderRightColor:Uize.Curve.resolve (2),
          borderBottomColor:Uize.Curve.resolve (-3)
        }
      }
    )

</textarea>

<!-- JavaScript code to make the static HTML "come alive" -->

<script type="text/javascript">

Uize.require (
  [
    'UizeSite.Page.Example.library',
    'UizeSite.Page.Example',
    'UizeSite.ParamsInspector.InlinePresets',
    'Uize.Fx.xShadows',
    'Uize.Curve',
    'Uize.Curve.Rubber',
    'Uize.Curve.Mod',
    'Uize.Dom.Basics',
    'Uize.Json'
  ],
  function () {
    'use strict';

    /*** create the example page widget ***/
      var page = window.page = UizeSite.Page.Example ();

    /*** create the params inspector widget ***/
      var
        menuNodes = Uize.Dom.Basics.find ({className:'menuLink'}),
        initialStyle = Uize.Dom.Basics.getStyle (
          menuNodes [0],
          {color:null,backgroundColor:null,borderColor:null,textShadow:null}
        ),
        lastSettings
      ;
      page.addChild (
        'paramsInspector',
        UizeSite.ParamsInspector.InlinePresets,
        {
          params:{settings:'string-multiline'},
          previewButtonText:'PREVIEW CSS STYLE FADE',
          settingsPropertyName:'settings'
        }
      ).wire (
        'Preset Selected',
        function () {
          var values = page.children.paramsInspector.getValues ();
          if (values.settings != lastSettings) {
            Uize.Dom.Basics.setStyle (menuNodes,initialStyle); // reset all nodes to initial style, so there's no style lingering from previous CSS fade
            Uize.eval (lastSettings = values.settings);
          }
        }
      );

    /*** wire up the page widget ***/
      page.wireUi ();
  }
);

</script>

</body>
</html>