September 1, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

10 Cool Things You Can Do with JavaScript and YUI

  • October 25, 2007
  • By Diona Kidd
  • Send Email »
  • More Articles »

9. Animation of HTML Elements

In addition to transition effects, you can also create motion, animate scrollbars, animate color transitions, animate along a curved path, and smoothly resize elements using the animation library in YUI.

You can animate an element on a web page by first defining the element in your markup, and then creating a new animation object using the ID of the element and lastly, calling the animate function.

<div id="test"></div>

<script>
   var myAnim = new YAHOO.util.Anim('test', {
      width: { to: 400 }
      }, 1, YAHOO.util.Easing.easeOut);
   myAnim.animate();
</script>

Properties for the animation can be defined when you instantiate the animation object or by using their respective properties.

10. Overlays and the Lightbox Technique

Take a look at how to create the famed 'Lightbox' effect by using the Overlay object in YUI.

An overlay is a widget based on the Container object, which means the Container library is a prerequisite. You also need to use the Yahoo DOM Event class.

First add your prerequisites, Yahoo DOM Event, and Container.

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

You also need to add the styles needed for the lightbox. These are included in the source download for brevity. Then, you start a JavaScript block and define the functions in the YAHOO.example namespace.

In your init function, create and render the overlay widget that will contain the larger version of the image. Next, create an overlay object that is 100% in height and width of the viewport and append this div to the body of your document. This will contain your transparent background image that makes the page appear to fade behind the larger image version. Finally, add a listener event to both the 'show' link and the close button to both show and hide the overlay.

YAHOO.example = function() {
   var $D = YAHOO.util.Dom;
   var $E = YAHOO.util.Event;
   return {
      init : function() {
         overlay_img = new YAHOO.widget.Overlay("overlay_img",
           { fixedcenter:true, visible:false, width:"330px" });
         overlay_img.render();

         // Dynamically build a second, hidden overlay div to
         // contain the transparent background image

         var overlay = document.createElement('div');
         overlay.id = 'overlay';

         // Assign 100% height and width
         overlay.style.width = $D.getViewportWidth()+'px';
         overlay.style.height = $D.getViewportHeight()+'px';
         document.getElementsByTagName('body')[0].appendChild(overlay);
         overlay.style.display = 'none';

         // Assign event listeners
         $E.addListener("show", "click", YAHOO.example.lb_show, null);
         $E.addListener("close", "click", YAHOO.example.lb_hide, null);

},

Once the init() function is defined, create two additional methods to correspond to the assigned listening events. The first is lb_show() and the second is lb_hide(). These are very simple functions that alter the visibility of the two overlay elements.

   lb_show : function() {
         $D.get('overlay').style.display = 'block';
         $D.get('overlay_img').style.visibility = 'visible';
         },

      // hide both overlay elements
      lb_hide : function() {
         $D.get('overlay').style.display = 'none';
         $D.get('overlay_img').style.visibility = 'hidden';
      }
   };
}();

The last action in your JavaScript block is to call the init function when the page loads. Use the Yahoo.util.Event by its full name because the variable $E is out of scope outside of the Yahoo.example namespace.

YAHOO.util.Event.addListener(window, "load", YAHOO.example.init);

In your markup, add an image with the id "show" so you can use this image to trigger the lightbox overlay when the image is clicked. Then, add the markup for the hidden div you will use to show the larger version of the image. Here, you can see the 'close button' that has an onclick event listener assigned to call lb_hide().

   <a href="#" id="show"><img src="images/IMG_0076.jpg"
      style="height: 200px; width: 150px; border: 0;" /></a>

<div id="overlay1" style="visibility:hidden">
   <div class="hd"><span>Keyhole</span><a href="#" id="close"
      class="container-close"></a></div>
   <div class="bd"><img src="images/IMG_0076.jpg" /></div>
   <div class="ft"><span>Some sort of comment on the photo</span></div>
</div>

Download the Source Code

Download the source code for this article here.

Conclusion

YUI has a variety of widgets that make adding interactive web features easier than ever. The documentation and examples gallery are extremely useful in implementing a feature in YUI. One of the best things about YUI is that it offers a lot of great features, simple interfaces, a light footprint on page loads, and you can use a single library for about any feature you need.

References

About the Author

Diona Kidd is an owner and developer at Knowmad Technologies, an open source web development and programming firm providing content management systems, e-commerce, and custom programming services.





Page 4 of 4



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel