In this example my task is to create a footer element that will stay on the bottom of the browser window during re-size and scroll events.View the completed project\n

CSS

First you will need to specify the position and size of your element.

#screenFooter {
  position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 25px;}

HTML

Assign your element an ID!

<div id="screenFooter">YuiCoder.com</div>

Javascript

Insert the following code to the bottom of the page just before the body tag.
In this example I am using the YUI Loader to speed up deployment of my examples. You do not need to user YUI Loader but remember you will need to load the yahoo, dom and event scripts from the YUI Library in order for this to work.

<!--
var loader = new YAHOO.util.YUILoader({
    require: ["dom","event"],
    loadOptional: true,
    onSuccess: function() {
    Ydom = YAHOO.util.Dom;

// Start LoadFooter Code
// Fires of the LoadFooter function when the browser dom is ready
Yevent.onDOMReady(LoadFooter);

// Scroll event listner
YAHOO.util.Event.addListener(window, 'scroll',
    function(){
       var Ydom = YAHOO.util.Dom;
       Ydom.setStyle(Ydom.get('screenFooter'),'visibility','hidden');
       LoadFooter();
      }
);

YAHOO.util.Event.addListener(window, 'resize', LoadFooter );
},
    timeout: 10000,
    combine: true
});
loader.insert();

function LoadFooter(){
// Get the footer element as an object
var footer = Ydom.get('screenFooter');
// Get the element loaded BEFORE the footer
var footer2 = Ydom.getPreviousSibling(footer);

    // Create an element just before the footer. This will ensure the footer does not hide anything
	//on the bottom of your page
    if(!Ydom.inDocument('footerBreak') ){
      var b = document.createElement('div');
          b.style.height = '37px';
          b.id = 'footerBreak';
       Ydom.insertAfter(b,footer2);
    }

    // Get the document scroll TOP position
    var sfS = Ydom.getDocumentScrollTop();
	// Get the document ViewPort size - subtract the footer size then add the scroll top position
    var sfH = Ydom.getViewportHeight() - 37 + sfS;
	// Note if you are dealing with an element that is smaller than 100% of the document viewport
	// add calculations for the getViewportWidth() for horizonal scrolling detection

	// Here we set the style properties of the footer
    Ydom.setStyle(footer,'position','absolute');
    Ydom.setStyle(footer,'top',sfH+'px');
    Ydom.setStyle(footer,'visibility','visible');
}

-->

Verify Installation:

I have included a console function that will send a warning to your FireBug application telling you that everything has loaded correctly. If you run this code and see the warning message in your FireBug console, then your code is installed correctly.

Adding your own code:

Replace the following line with your code and your ready to run.

console.warn('YUI Loaded');

Adding resources from YUI:

In order to use specific parts of the YUI framework you will need to request the files from the YUI CDN. To do this simply add the required YUI library to the require array as shown below.

"require: ["get","dom","event","datatable","animation"],

Things to remember

The YUI Loader may cause problems when working with older browsers such as IE6. Be sure to wrap you loader using the onDOMReady method like so.

Yevent.onDOMReady(init);

This will ensure that the browser has finished loading the DOM before firing off your scripts.

UPDATED (2009-07-22): “missing > in code and removed Yevent shortcuts”