Archive

- Posts Tagged ‘YUI3’

YUI3 to JQuery Conversion or Opposite

I have written few lines of YUI3 code and I wanted to convert that into jQuery as it is. I have noted down these differences:
YUI to jQuery
1. Instead of just ‘this’ → $(this).
Inside JQuery callback function, ‘this’ refers to DOM object, not a jQuery object.
2. node.one()/node.all()… (Continue)

YUI3: Accordion Examples

Here is a ready three examples of YUI3 Accordions. Last one is the trimmed version so that you can use your own styles on it. I am presenting simplest code here which is the last one.
Working Demo of the Simple Accordion. There you will find link to 2nd example.… (Continue)

YUI3: Convert DOM Object to YUI3 Node and Convert YUI node to DOM element

DOM object to YUI3 Node:
Wrap the DOM element in Y.one() or Y.all() depending on DOM element is single element or a list. Y.Node() and Y.NodeList() is also available.
// returns a Y.Node instance
node = Y.one(document.createElement(‘span’));
// or
// node = new Y.Node(document.createElement(‘span’));
// Y.all NodeList method:
spans =… (Continue)

YUI Seed Files – yui.js, yui-base.js and yui-core.js – YUI3 Tutorial

YUI3 has three kind of seed files: yui.js, yui-base.js and yui-core.js. In this you may have used yui.js file always.
(<script src=”http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js”></script>)
I just thought to read about other kind of seed files and its pros and cons. YUI main seed file (YUI.js) includes loader (dynamically load missing modules as… (Continue)

YUI3 Tutorial: YUI Attribute Selector. Working with Attribute Selector

Here is a separate article on attribute selector. The attribute selector was not working in flexible way. I was facing problem is excluding some some tag based on attribute differences.
Here is the HTML snippet I was using and I will use here for Attribute selector example:
<a rel=”me” href=”http://newsviews.satya-weblog.com/”>My… (Continue)

Learn YUI3: Mouseover, Mouseout, Mouseenter and Mouseleave events with Examples

These events (Mouseover, Mouseout, Mouseenter and Mouseleave) requires two modules:
1. event-hover module -
Adds a “hover” event which binds to two callbacks, one for the start, and one for the end of a mouse hover.
2. event-mouseenter module -
Adds “mouseenter” and “mouseleave” events.
Mouseenter and mouseleave is similar… (Continue)

Learn YUI3: Accessing Attributes of Element and changing it

Here we will play with element’s attribute. We will access attributes and change it. It is a part of YUI node learning series.

<img class=”hotels” src=”Marina-Bay-Sands_222812.jpg” widht=”310″ height=”207″ />
<button id=”bttnImg”>Change Image attributes (src, width and height)</button>

Y.one(‘#bttnImg’).on(‘click’, function(e) {

var hotels = Y.all(‘.hotels’);

// get first one and start… (Continue)

Learn YUI3 – Create new Element/Node and Apply CSS

I am continue on learning YUI and posting it here for all to read as part of YUI3 tutorial. This post is a part of YUI node under YUI tutorial series.
Creating new Element using YUI3:
The below example will create DIV, SPAN and P and present different different scenarios.… (Continue)