YUI Coder

We have all had to create calendar pop up and usually the first thing that comes to mind is “Which calendar pop-up application am i going to use?” Well, YUI certainly makes it an easy decision because it looks good and is fairly easy to create. So when the need arose to create a form which had multiple calendar controls in it (15 to be exact), I found my-self in the need of creating a way to build these calendars with-out coding and configuring these fields by hand. So that being said YUICalendar.js was created out of this need.

With YUICalendar.js you can include the file and simply specify a class name to an imput field and instantly produce a pop-up calendar. Check out the project page on Google at http://code.google.com/yuicalendar/ for more details.

Here is a working example: EXAMPLE

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

-->

Creating elements like divs, href links, paragraphs and more can be tricky. Suppose you do not have access to modify the html or you are dealing with a template file that is static to the entire application and need to add an element to the page on the fly. Using the YUI DOM utility you can do this simply by searching for an element by class name or id then appending the element to the page just where you want it. The code below gives you an example of how to use the getElementsByClassName method in YUI by searching for a body element with the class name of yui-skin-sam. Check out the YUI api for more helper methods.

//lets find the elements we need by finding all body elements that have the class yui-skin-sam
var elements = YAHOO.util.Dom.getElementsByClassName('yui-skin-sam', 'body');
//if you body does not have an ID then generate one usign the generateID method.
    var bodyid = YAHOO.util.Dom.generateId(elements[0],'body');
// Get the last child element of the body by searching for the body id we just created above.
    var bodyLastChild = YAHOO.util.Dom.getLastChild(bodyid);

// Now we create a DIV element using the standard javascript method createElement
		var b = document.createElement('div');
// Let YUI create and assign the new div elements id.
		var bottomid = YAHOO.util.Dom.generateId(b,'bottom');
    	b.href='#';
// Put some html in your div
		b.innerHTML = 'TESTER';
// Assign your div a class name of newClass so you can reference it in a style sheet.
		b.className = 'newClass';
// Attach the new DIV id to the element you are creating
		b.id = bottomid;
// Use YUI to insert the new div element afer the last child element of the body tag.
		YAHOO.util.Dom.insertAfter(b ,YAHOO.util.Dom.get(bodyLastChild));

Now to learn more on how to create ELEMENTS like divs and paragraphs check out the tutorials at W3cshools. This is sure to be a fun project to play and learn. Give it a try!

At times it becomes necessary to add up the data with in a column. Here is a nice little snippet that can do just that.
Change DATATABLE with the name of the data table you need to read.
Change COLUMNNAME with the column key in the table you need to read.

// First get the record set from the datatable.
var records = DATATABLE.getRecordSet();

// Let's count how many records we found
var len = records._records.length-1;
var total = 0;
// Loop through the record set getting the data from the coulumn and setting its value to "value"

for(i=0;i<=len;i++){
 //create the value you need so you can handle the data
var value = records._records[i]._oData.COLUMNNAME;
// now all you need to do is add up your values
total+=value;
}
//log it to the FireBug console
console.log(total);

Once you have found the value for the column from that point you can manipulate the data to your will.

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.