January 27, 2021
Hot Topics:

10 Cool Things You Can Do with JavaScript and YUI

  • By Diona Kidd
  • Send Email »
  • More Articles »

6. Rich Text Editor Widget

The Rich Text Editor widget was just added to YUI in version 2.3.0. The YUI editor is cross-browser compatible and includes a lot of the standard features you would expect for a simple text editor.

<!-- Skin CSS file -->
<link rel="stylesheet" type="text/css" href="../yui/build/assets/

<!-- Utility Dependencies -->
<script type="text/javascript" src="../yui/build/yahoo-dom-event/
<script type="text/javascript" src="../yui/build/element/

<!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
<script src="../yui/build/container/
<script src="../yui/build/menu/menu-min.js"></script>
<script src="../yui/build/button/button-beta-min.js"></script>

<!-- Source file for Rich Text Editor-->
<script src="../yui/build/editor/editor-beta-min.js"></script>

The Rich Text Editor has been designed to replace an existing HTML <textarea> element. If users try to use the Rich Text Editor without JavaScript support, they will simply see a standard <textarea>.

Here's the basic markup for the text area, straight from the YUI documenation.

<body class="yui-skin-sam">
<textarea name="msgpost" id="msgpost" cols="50" rows="10">
   <strong>Your</strong> HTML <em>code</em> goes here.<br>
   This text will be pre-loaded in the editor when it is rendered.

Once you have the <textarea> on the page, you can set up the Rich Text Editor widget by calling new on the Editor widget, passing in some basic configuration options, and telling the Editor to render itself.

var myEditor = new YAHOO.widget.Editor('msgpost', {
   height: '300px',
   width: '522px',
   dompath: true,    //Turns on the bar at the bottom
   animate: true     //Animates the opening, closing and moving of
                     //Editor windows

7. Calendar Widget

The Calendar widget was the first thing that I used from YUI. I have used several different calendar widgets over the years, including creating my own. The YUI Calendar widget is easy to configure, use, and skin; this makes it an attractive calendar solution for web developers.

The prerequisites for this widget are minimal and include the Yahoo DOM Event and Calendar classes. I also use the base CSS stylesheet and alter it as needed. To create a calendar widget, you'll start off with the following code in the header of the HTML page.

<link rel="stylesheet" type="text/css" href="../yui/build/calendar/

<!-- Dependencies -->
<script type="text/javascript" src="../yui/build/yahoo-dom-event/

<!-- Source file -->
<script type="text/javascript" src="../yui/build/calendar/

Next, create a div element in the page to act as a placement container for the calendar widget. You can put this anywhere in the page markup.

<div id="cal1Container"></div>

Lastly, instantiate the calendar object and configure it using JavaScript and the YUI methods included by your prerequisites. The first argument to the Calendar is the ID for the new element Calendar will create. This element acts as a container to the Calendar's DOM structures. The second argument is the ID of the container div element you just created on the page.

var cal1;
function init() {
   cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");

As with a lot of other YUI widgets, you also could pass in an optional argument for configuration that sets various attributes of the Calendar including selected dates, current month, minimum and maximum dates that can be selected, and the calendar's title. There are several other configuration options as well. I encourage you to read the YUI documentation to learn more because there are way too many options to cover in this article.

8. Overlay Transition Effects

Transition effects are useful to visually 'ease in' new page elements or transition existing elements. To assign transition effects, the element needs to be an Overlay object.

Transition effects are created using the Container Effect class in combination with the effect property of the YUI Overlay object. It allows configuration of transitional animation for Overlay and its subclasses, activated when the Overlay is shown or hidden. For instance, the Overlay can fade in and out, or slide in or out of the viewport.

The Container Effect class is based on the Container and Animation classes. Both of these classes are prerequisites for transitions.

The effect property accepts an object or an array of objects, each object defining two fields. The first field is the predefined name of the effect to use and the second is the duration of the animation.

YAHOO.example.container.overlay1 =
   new YAHOO.widget.Overlay("overlay1", { xy:[150,100],
   visible:false, width:"300px",
   effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );

Page 3 of 4

This article was originally published on October 25, 2007

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date