#

Jump to Table of Contents

# Example: YUI Core

This example shows how to use the core of YUI.

We're twins
for
5
sec.
We're twins
for
5
sec.

### Setting up the YUI Instance

Here we will create our `YUI` instance, loading `node` so we can work with DOM elements in the example.

    YUI().use('node', ...

### Using the callback

The `use` method will dynamically fetch anything required for `Node` if it isn't already on the page. If dynamic loading is required, the last parameter supplied to `use` should be a function to execute when the load is complete. This function will be executed whether or not dynamic loading is required, so it is the preferred pattern for using `YUI`.

    YUI().use('node', function(Y) ...

The function is supplied a reference to the `YUI` instance, so we can wrap all of our implementation code inside of the `use` statement without saving an external reference to the instance somewhere else.

Now that we know all of the modules are loaded, we can use `Node` to update DOM nodes in many ways. Here's a simplified version of the fruit example above.

Box 1 Box 2

    <span>
        Box 1
    </span>

    <span class="bob">
        Box 2
    </span>

    <script>
    YUI().use('node', function(Y){
        // change the style of just the DOM node with the class "bob"
        Y.one('.bob').setStyle('backgroundColor', '#FFD7AA');
    });
    </script>

### Full Source

Here's the full source of the fruit example.

    <style>
    .example {
        position: relative;
        font-family: georgia;
        height: 260px;
    }
    .example p {
        margin: 0;
    }
    .example .count {
        font-size: 250%;
        display: inline-block;
        line-height: 0.8em;
        zoom: 1; *display: inline; /* IE < 8: fake inline-block */
        width: 0.6em;
        vertical-align: baseline;
        font-family: verdana;
    }
    .example em {
        font-size: 170%;
        font-weight: bold;
        text-shadow: 0 0 4px rgba(110, 132, 57, 0.75);
        display: block;
        font-style: normal;
    }
    .example .fruit {
        position: absolute;
        top: 21px;
        left: 200px;
        border: solid 3px #000;
        background-color: #F4EBE2;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        padding: 0.6em 0.6em 0.9em;
        text-align: center;
        box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.3);
        font-size: 125%;
    }
    .example .changer {
        left: 464px;
    }
    .example .fruit img {
        position: absolute;
        top: 35px;
        left: -202px;
    }
    </style>

        <div class='fruit'>
            <div class="speech">We're twins<br>
                for <div class="count">5</div> sec.
            </div>
            <img src="../assets/yui/images/apple.png" width="221" height="225"/>
        </div>
        <div class='fruit changer'>
            <div class="speech">We're twins<br>
                for <div class="count">5</div> sec.
            </div>
            <img src="../assets/yui/images/apple.png" width="221" height="225"/>
        </div>

    <script>
    YUI().use('node', function(Y) {
        var count = 6, // seconds for timer count down
            changer = Y.one('.changer'), // just the node to change
            counters = Y.all('.fruit .count'); // counter numbers on both fruits

        var doChange = function(){
            count -= 1;  // decrement the seconds count
            counters.setHTML(count); // update the number of seconds by setting the contents of the node

            // when it gets to 0 seconds, make changes to just the node with class "changer"
            if(count < 1){
                // set the "src" attribute of one image to an orange
                Y.one('.changer img').setAttribute('src', '../assets/yui/images/orange.png');

                // change the contents of one speech bubble
                Y.one('.changer .speech').setHTML("No, I'm from <em>Florida!</em>");

                // change several styles together
                changer.setStyles({
                    fontSize: '150%',
                    color: '#EA6500',
                    backgroundColor: '#FFD7AA'
                });
                return; // bypass the setTimeout and don't call the function again
            }
            setTimeout(doChange, 1000);
        }
        doChange();
    });

    </script>