YUI Coder: Manipulating the Yahoo User Interface to your will!

YUI DataTable: Context Menu with “Select/Unselect All” rows

By Jeffrey Cobb on November 5, 2009

Andy from Coderfoo.com created this excellent example and code sniplet to demo a function he created that uses a context menu to select and deselect all rows from a YUI datatable. At first I simply thought he was just accessing a regular function within YUI but he soon corrected me. He explained that while YUI has a deselect function for all rows a select all function did not exist. So knowing Andy he took on the challenge of creating this function. Thanks again Andy for sharing your code with us.
Working Example on CoderFoo.com http://www.coderfoo.com/examples/datatable-multi-row-select.html

Get the code

YAHOO.lang.augmentObject(
  YAHOO.widget.DataTable.prototype, {
    _selectAllTrEls : function() {
      var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_EVEN, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsEven , YAHOO.widget.DataTable.CLASS_SELECTED);
      var selectedRowsOdd = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_ODD, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsOdd, YAHOO.widget.DataTable.CLASS_SELECTED);
    },
  /* Selects all rows. * * @method selectAllRows */
  selectAllRows : function() {
    // Remove all rows from tracker
    var tracker = this._aSelections || [];
    for(var j=tracker.length- 1; j>-1; j--) {
      if(YAHOO.lang.isString( tracker[j] )){
        tracker.splice( j,1);
      }
    }
    // Update tracker
    this._aSelections = tracker;
    // Update UI
    this._selectAllTrEls();
    // Get all highlighted rows and make yahoo aware they are selected
    var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_SELECTED, "tr",this._elTbody);
    for (i=0;i
<selectedRowsEven.length; i++){
      this.selectRow(i);
    }
  }
});

Posted in YUI Datatable, YUI Mish Mash 1 Response

Simple YUI Login using Ajax, Cookies and server side auth

By Jeffrey Cobb on October 14, 2009

JavaScript [login.js]

// set up YUI loader
var loader = new YAHOO.util.YUILoader({
    require: ["container","connection",
              "cookie",
              "animation",
              "button",
              "dom","event"
              ],
   loadOptional: true,
   onSuccess: function() {
	Yevent = YAHOO.util.Event;
	Yconnect = YAHOO.util.Connect;
	Ydom = YAHOO.util.Dom;
	Ycook = YAHOO.util.Cookie;
// fire of init() function once the document has finished loading and the dom is ready
    YAHOO.util.Event.onDOMReady(init);
	},
	timeout: 10000,
	allowRollup: true,
	base: '/scripts/yui/build/',
	combine: false
});
loader.insert();

function init() {

 // Create a dialog box to put the login form into
  	    stdDialog = new YAHOO.widget.SimpleDialog("dlgstd", {
	    width: "auto",
	    fixedcenter:true,
	    modal:false,
	    visible:false,
	    close: false,
	    constraintoviewport: true
	  });
	     stdDialog.setHeader("Login:");
	     stdDialog.render(document.body);

  var buttons=[{ text:"Login", handler: function(){
  var loginCallback = {
       cache:false,
       success: function(o){
         response = o.responseText.split(",");
         if(response[0] == "ok"){
          stdDialog.setHeader("Login: Success");
          YAHOO.util.Cookie.set(response[1], response[2], {});
document.location.href = "dashboard.pl";
						}
						else {
							stdDialog.setHeader("Login: Failed, Please Try Again");
						}
	    				},
	    				failure: function(o){
	    					alert('ERROR! Connection to server failed! Please try again.');
	    					}
	    		    };
		var formObject = document.getElementById('login');
		YAHOO.util.Connect.setForm(formObject);
		var username = formObject.username.value;
		var password = formObject.password.value;
		if(username == ""){
			stdDialog.setHeader("Login: Username field is empty");
			var error = 1;
		}
		else if(password == ""){
			stdDialog.setHeader("Login: Password field is empty");
			var error = 1;
		}
		if(!error){
		var cObj = YAHOO.util.Connect.asyncRequest('POST', 'login.pl', loginCallback);
		}

	}, isDefault:true }];
		stdDialog.cfg.setProperty("buttons", buttons);
		stdDialog.cfg.setProperty("postmethod", 'async');
	    stdDialog.cfg.setProperty("text",'
<form id=login method=post action=login.pl>
<table>
<tr>
<td><b>Username:</b></td>
<td>
<input type=text name=username id=username></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td>
<input type=password name=password id=pass>
<input type=hidden name=action value=login></td>
</tr>
</table>
</form>

');

		stdDialog.show();

}

Perl Script [login.pl]

#!/usr/bin/perl
use CGI qw(:standard);
$query = new CGI;

if($query->param('action') eq 'login'){
print "Context-type: text/html \n\n";
# Here is where we define the username and password for authent
 if($query->param('username') eq 'username' && $query->param('password') eq 'password'){
 print "ok,someRandomKeyShouldGoHere," . $query->param('username');
 }
 else {
  print "no";
 }
 exit;
}

  print header;
  print start_html(-title=>'Login',
                   -style=>{src=>'/scripts/yui/build/fonts/fonts.css'},
                   -script=>[{-type => 'text/javascript',-src =>'yui/build/yuiloader/yuiloader-min.js'},
{-type => 'text/javascript',-src =>'login.js'}],
                   -class=>'yui-skin-sam'
                   );
 print end_html;

Posted in YUI Mish Mash Comments Off

YUI TreeView with Drag and Drop nodes

By Jeffrey Cobb on July 22, 2009

Andy created a very and useful advanced example of using the Yahoo! User Interface TreeView with the capabilites of drag and drop of child nodes to other parent nodes. Here is an exert of his blog and the link.

$coderfoo: YUI TreeView with Drag and Drop nodes

I recently had a need for a YUI (Yahoo User Interface) TreeView with Drag & Drop nodes. Here’s a little background on the project. My web application uses YUI Menu for navigation and is driven by a single database table. Initially I threw together a quick and dirty CGI CRUD interface to manage the menu. But, the more I had to modify the menu with this interface the more I needed something easier to use. So I decided to scrap the CGI interface and start over with a nice 100% Ajax interface with a YUI TreeView to represent the YUI Menu. Adding, changing, and deleting nodes is pretty easy, but to easily change the order of the Menu items, I added YUI Drag & Drop to the TreeView…..[MORE]

Posted in YUI Mish Mash Comments Off

YUICalendar Helper: Creating YUI calendars using just a class name

By Jeffrey Cobb on July 20, 2009

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

Posted in YUI Calendar | Tagged Calendar, CSS Comments Off

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

By Jeffrey Cobb on March 31, 2009

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

-->

Posted in YUI Loader, YUI Mish Mash, YUI Util DOM | Tagged createElement, Get, getPreviousSibling(), getViewPortHeight(), getViewPortWidth(), inDocument(), insertAfter, setStyle(), window.resize, YAHOO.Dom.Event, YAHOO.util.Event.addListner, YUI Event 2 Responses

YUI Coder

Manipulating the Yahoo User Interface to your will!

YUI DataTable: Context Menu with “Select/Unselect All” rows

Get the code

Simple YUI Login using Ajax, Cookies and server side auth

JavaScript [login.js]

Perl Script [login.pl]

YUI TreeView with Drag and Drop nodes

YUICalendar Helper: Creating YUI calendars using just a class name

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

CSS

HTML

Javascript

Categories

Bookmarks

Ads

YUI Theater

YUI Blog

Coder Foo

Dzone Snippets

Cloudy these days!