Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

Node SetDirection (gallery-node-setdir) on cdn

Last Updated: 07/2/10

+ 0 -

Roozbeh Pournader

YUI Contributor

See 2 more by this user.

Created: 06/11/10
Last CDN Push: 09/22/10
Build Tag: gallery-2010.09.22-20-15
Project: YUI 3
License: YUI BSD
YUI Version: 3.1.1
Free for use.

This module extends YUI3's Node by adding a setDirection method to every YUI node. By calling the method, the node's bidi direction would be explicitly set to the specified direction, setting both the HTML "dir" attribute and the CSS "direction" property.

Additionally, the node would be decorated with a class named "yui3-rtl" or "yui3-ltr" based on its direction. This will help in browsers like IE 6 that do not support CSS attribute selectors, so stylesheets would be able to use E.yui3-rtl instead of E[dir="rtl"].

Finally, an event called "directionChange" will be fired whenever a node changes direction (from LTR to RTL or vice versa). The event would have two properties, "target" that carries the node reference, and "dir" which will have its new direction.

Download
Docs
Homepage
Bugs
Source
Example
Forum
History

The following code sets two buttons to change direction of the text to RTL and LTR, and shows an alert box whenever an actual change happens.

Code Sample

<script src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>

YUI({
    //Last Gallery Build of this module
    gallery: 'gallery-2010.09.22-20-15'
}).use("gallery-node-setdir", "node-base", "node-style", function(Y) {
    var rtlButton = Y.Node.create("<button type='button'>Set to RTL</button>");
    var ltrButton = Y.Node.create("<button type='button'>Set to LTR</button>");
    var input = Y.Node.create("<div style='width: 20%; border: solid'>A > \u05D0</div>");
    Y.one("body").append(rtlButton).append(ltrButton).append(input);
 
    rtlButton.on("click", function(){input.setDirection("rtl")});
    ltrButton.on("click", function(){input.setDirection("ltr")});
 
    Y.on("directionChange", function(e){
        alert("Direction changed to "+e.dir+".");
    });
});