TAZIO MIRANDOLA Web Applications Developer

AJAX Request

var t = YAHOO.util.Connect.asyncRequest('GET', url, {
        success: function(o) {
            // o.status
            // o.statusText
            // o.responseText
            // o.argument
        },
        failure: function(o) { },
        // Passing an array of arguments to both the success and failure callback
        argument: [argument1, argument2, argument3]
    },
    null /* "new=1&old=2" */
);

Events

YAHOO.util.Event.on(select_id, 'change', opt.onChange );
YAHOO.util.Event.addListener(oElement, "click", fnCallback);
 
YAHOO.util.Event.onDOMReady(init);
 
YAHOO.util.Event.getTarget(e);
 
MyObj.prototype.addClickHandler = function() {
    YAHOO.util.Event.addListener(this.elementId, "click", this.callback, this);
};
 
// as soon as elemnt is rendered in the DOM
YAHOO.util.Event.onAvailable(id, this.handleOnAvailable, this);
 
// in IE, dom manipulation is not possible untill DOM is READY
YAHOO.util.Event.onDOMReady(function() {
        YAHOO.util.Dom.setStyle("hidden_element", "visibility", "");
} );

Dom

var el = YAHOO.util.Dom.get('id');
 
YAHOO.util.Dom.setStyle(['test', 'test2'], 'opacity', 0.5);
var opacity = YAHOO.util.Dom.getStyle('test2', 'opacity');
 
 
var elements = YAHOO.util.Dom.getElementsByClassName('test', 'div');
var selects = document.getElementsByTagName('select', document.getElementById('html_dimensions'));
// class
YAHOO.util.Dom.hasClass(element, className);
YAHOO.util.Dom.addClass(element, className);
YAHOO.util.Dom.removeClass(element, className);
YAHOO.util.Dom.replaceClass(element, oldClassName, newClassName);

Panel

var panel_one = new YAHOO.widget.Panel("panel_one", {
        close:true,
        visible:false,
        draggable:false
    }
);
panel_one.render();

A draggable panel

The draggable property defines whether the panel could be moved via drag and drop or not. Activate Panel Two to see the panel, move it around by dragging the header and click the close button on its top right to get rid of it.

var panel_two = new YAHOO.widget.Panel("panel_two", {
        close:true,
        visible:false,
        draggable:true
    }
);
panel_two.render();

Keeping the panel in the browser

Setting the constraintoviewport property to true makes sure that the panel can never leave the browser window. Activate Panel Three to see the panel, move it around by dragging the header, try to move it outside the browser window and click the close button on its top right to get rid of it.

var panel_three = new YAHOO.widget.Panel("panel_three", {
        close:true,
        visible:false,
        draggable:true,
        constraintoviewport:true
    }
);
panel_three.render();

Using contextual positioning

context property: defines what element should provide the context for the panel. The value of the property is an array starting with the element's ID (or a variable containing the element object), followed by which corner of the panel (tl, tr, br or bl) should connect with which corner of the context element.

//Set to top left:
panel_four.cfg.setProperty('context',['anchorElement', 'br', 'tl']);
//Set to bottom right:
panel_four.cfg.setProperty('context',['anchorElement', 'tl', 'br']);
//Set to bottom left:
panel_four.cfg.setProperty('context',['anchorElement', 'tr', 'bl']);
 
var panel_four = new YAHOO.widget.Panel("panel_four", {
        close:true,
        visible:false,
        draggable:true,
        context:['anchorElement','bl','tr']
} );
panel_four.render();

A modal panel

var panel_five = new YAHOO.widget.Panel("panel_five", {
        close:true,
        visible:false,
        draggable:true,
        modal:true
    }
);
panel_five.render();

Animation

var myAnim = new YAHOO.util.Anim(imgs[0], {
        width: { to: d['w'] },
        height: { to: d['h'] }
}, 0.75, YAHOO.util.Easing.backBoth);
myAnim.animate();

var panel_six = new YAHOO.widget.Panel("panel_six",{
        close:true,
        visible:false,
        draggable:true,
        effect:{effect:YAHOO.widget.ContainerEffect.FADE, duration: 1}
} );
panel_six.render();

Dynamically creating a panel

var panel_seven = new YAHOO.widget.Panel("panel_seven", {
        close:true,
        visible:false,
        draggable:true
} );
panel_seven.setHeader('Dynamic!');
panel_seven.setBody('Body');
panel_seven.setFooter('Footer');
panel_seven.render(document.body);