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: 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)