Posted By

flashpro on 01/14/08


Tagged

toggle yahoo yui on off


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

flashpro
gnrcn


toggle / showhide with YUI javascript library


 / Published in: JavaScript
 

URL: http://www.lutsr.nl/yui/toggle/

For this snippet you need the files: yahoo-dom-event.js and animation-min.js from the Yahoo User Interface Library (version 2.4.1).

To use this snippet add a class "toggle" to a link which should toggle the effect. To this link add a rel attribute. This attribute contains: id of object to toggle, animation type, animation duration.

Toggle element #1

This will toggle the div with id "example1", the effect used will be "fade" and it will take "20" frames.

  1. var Dom = YAHOO.util.Dom;
  2. var Event = YAHOO.util.Event;
  3. var $ = function(id) {
  4. return document.getElementById(id);
  5. }
  6. //++++++++++++++++++++++++++++++++++++
  7. // YUI TOGGLE
  8. // 1/22/2008 - Edwart Visser & AW
  9. //
  10. // toggle the visibility
  11. //
  12. // REQUIRES: yahoo-dom-event.js
  13. // OPTIONAL: animation-min.js
  14. //
  15. //++++++++++++++++++++++++++++++++++++
  16. YAHOO.namespace("lutsr");
  17.  
  18. YAHOO.lutsr.doToggle = {
  19. init : function() {
  20. this.toggleLinks = Dom.getElementsByClassName("toggle");
  21. for(var i=0; i<this.toggleLinks.length; i++) {
  22. Event.addListener(this.toggleLinks[i],"click",this.animateElements,this);
  23. }
  24. },
  25. toggleElements : function(e,controlNode,refEl) {
  26. if(controlNode && refEl) {
  27. if(Dom.hasClass(refEl,"show")) {
  28. Dom.removeClass(controlNode,"selected");
  29. Dom.removeClass(refEl,"show");
  30. } else {
  31. Dom.addClass(controlNode,"selected");
  32. Dom.addClass(refEl,"show");
  33. }
  34. }
  35. // to disable control node's default behaviour
  36. return false;
  37. },
  38. animateElements : function(e,obj) {
  39. // obj = javascript toggle object
  40. // this = link clicked
  41. Event.preventDefault(e);
  42.  
  43. if(this.rel) {
  44. controlNode = this;
  45. }
  46. if(typeof(controlNode) == "string") {
  47. controlNode = Dom.get(controlNode);
  48. }
  49.  
  50. // objParameters
  51. // [0] = object id
  52. // [1] = animation type (fade, slide)
  53. // [2] = animation duration (seconds)
  54. var linkClicked = this;
  55. var objParameters = controlNode.rel.split(",");
  56. var refEl = Dom.get(objParameters[0]);
  57. var objStatus = Dom.hasClass(refEl,"show"); // if true, object is shown
  58.  
  59. switchClasses = function() {
  60. obj.toggleOtherElements(e,linkClicked,refEl);
  61. obj.toggleElements(e,linkClicked,refEl);
  62. }
  63.  
  64. if(objParameters[1] == "fade") {
  65. if(objStatus == true) {
  66. var attributes = {
  67. opacity: { from: .999, to: 0 }
  68. }
  69. var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  70. objAnim.useSeconds = false;
  71. objAnim.duration = objParameters[2];
  72. objAnim.onComplete.subscribe(switchClasses);
  73. objAnim.animate();
  74. } else {
  75. Dom.setStyle(objParameters[0],"opacity",0);
  76. switchClasses();
  77. var attributes = {
  78. opacity: { from: 0, to: .999 }
  79. }
  80. var objAnim = new YAHOO.util.Anim(objParameters[0],attributes);
  81. objAnim.useSeconds = false;
  82. objAnim.duration = objParameters[2];
  83. objAnim.animate();
  84. }
  85. } else if (objParameters[1] == "slide") {
  86. // not implemented yet
  87. } else {
  88. // NO ANIMATION - switch classes
  89. switchClasses();
  90. }
  91. },
  92. toggleOtherElements : function(e,linkClicked,refEl) {
  93. // toggle selected state of other elements pointing to the same source
  94. for(var i=0; i<this.toggleLinks.length; i++) {
  95. var objParameters = this.toggleLinks[i].rel.split(",");
  96. var linkClickedParameters = linkClicked.rel.split(",");
  97.  
  98. if(objParameters[0] == linkClickedParameters[0]) {
  99. if(Dom.hasClass(this.toggleLinks[i],"selected")) {
  100. Dom.removeClass(this.toggleLinks[i],"selected");
  101. } else {
  102. Dom.addClass(this.toggleLinks[i],"selected");
  103. }
  104. }
  105. }
  106. }
  107. }
  108.  
  109. initPage = function() {
  110. YAHOO.lutsr.doToggle.init();
  111. }
  112.  
  113. Event.addListener(window,"load",initPage);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: flashpro on January 22, 2008

Added the feature to add "selected" class to other elements pointing to the same source.

You need to login to post a comment.