YUI Coder » YUI Loader

Creating a FIXED element with re-size and scroll detection using YUI dom and event

Jeffrey Cobb — Wed, 01 Apr 2009 00:05:05 +0000

We have all see them and some of us love them. It’s those elements that seem to float on the page like hovering little angels. Ok enough with the sappy crap…down to business. So you need to create a browser independent simple script to position an element on a page. I put together a simple script that will handle such a task and is flexible enough for even a newbie to configure.

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');
}

-->

Override alert() with a YUI Dialog

Jeffrey Cobb — Sun, 08 Mar 2009 12:34:18 +0000

You know and I know and everyone knows the alert boxes generated by the browsers are OLD-SCHOOL and look like garbage. Well using YUI you can easily change that by just including a little code in you page. Simply add the code below to the bottom of your page just before the end body tag then add the body style to the begining body tag called “yui-skin-sam” and that’s it. Oh and don’t forget to include your YUI Framework base and the additional scripts “container”, “dragdrop” and “animation”. For an example on how to included the YUI Framework and load specific parts check out for a quick start guide for YUI Loader and Yahoo CDN.

AlertDialog = new YAHOO.widget.SimpleDialog("dlg1", {
  width: "200px",
  effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.15},
  fixedcenter:true,
  modal:true,
  visible:false,
  close: true,
  constraintoviewport: true,
  buttons: [ { text:"close", handler: function(){this.hide();}, isDefault:true }],
  draggable:false,
                effect: [
                      { effect:YAHOO.widget.ContainerEffect.FADE,duration:0.1 }]
});

AlertDialog.setHeader("Alert");
AlertDialog.render(document.body);
window.alert = function(text) {
  AlertDialog.cfg.setProperty("text",text);
  AlertDialog.show();
};

Click HERE for an example:

A permanent solution!

If you would like to override the alert box throughout your entire site or application, save the code to your server in a public script folder. Example: as alertBox.js. Then load the script using YUI Get with-in the YUI Loader BEFORE firing off your init() routine. Here is an example.

Using the YUI Loader and Yahoo’s CDN Rollup

Jeffrey Cobb — Tue, 03 Mar 2009 21:07:04 +0000

Using the YUI Loader and the script below will allow you to implement the YUI framework within your application with out downloading and installing the YUI framework to your server.

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”