DOM Collapse mit Delay?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • DOM Collapse mit Delay?

    Ich habe mir ein kleines Archive mit dem collapse.js von onlinetools.org/tools/domcollapse/index.html
    zusammengebastelt.
    Klappt wunderbar.
    Doch ich möchte gerne ein delay einbauen.
    Sowie das menu von docs.mootools.net.

    Kann mir da jemand weiterhelfen, wo ich das einbauen könnte?

    Hier das javascript:

    Quellcode

    1. /*
    2. * DOMcollapse
    3. * Version 3.0
    4. * released 06.12.2005
    5. * Not for commercial reselling or use, unless consent given by the author
    6. * Check for updates on http://onlinetools.org and http://wait-till-i.com
    7. *
    8. */
    10. dc={
    11. triggerElements:'*', // elements to trigger the effect
    12. parentElementId:null, // ID of the parent element (keep null if none)
    13. uniqueCollapse:false, // is set to true only one element can be open at a time
    15. // CSS class names
    16. trigger:'trigger',
    17. triggeropen:'expanded',
    18. hideClass:'hide',
    19. showClass:'show',
    21. // pictures and text alternatives
    22. closedPic:'plus.gif',
    23. closedAlt:'expand section',
    24. openPic:'minus.gif',
    25. openAlt:'collapse section',
    26. /* Doesn't work with Safari
    27. hoverClass:'hover',
    28. */
    30. init:function(e){
    31. var temp;
    32. if(!document.getElementById || !document.createTextNode){return;}
    33. if(!dc.parentElementId){
    34. temp=document.getElementsByTagName(dc.triggerElements);
    35. } else if(document.getElementById(dc.parentElementId)){
    36. temp=document.getElementById(dc.parentElementId).getElementsByTagName(dc.triggerElements);
    37. }else{
    38. return;
    39. }
    40. dc.tempLink=document.createElement('a');
    41. dc.tempLink.setAttribute('href','#');
    42. dc.tempLink.appendChild(document.createElement('img'));
    43. for(var i=0;i<temp.length;i++){
    44. if(dc.cssjs('check',temp[i],dc.trigger) || dc.cssjs('check',temp[i],dc.triggeropen)){
    45. dc.makeTrigger(temp[i],e);
    46. }
    47. }
    48. },
    49. makeTrigger:function(o,e){
    50. var tl=dc.tempLink.cloneNode(true);
    51. var tohide=o.nextSibling;
    52. while(tohide.nodeType!=1)
    53. {
    54. tohide=tohide.nextSibling;
    55. }
    56. o.tohide=tohide;
    57. if(!dc.cssjs('check',o,dc.triggeropen)){
    58. dc.cssjs('add',tohide,dc.hideClass);
    59. tl.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
    60. tl.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
    61. o.setAttribute('title',dc.closedAlt);
    62. }else{
    63. dc.cssjs('add',tohide,dc.showClass);
    64. tl.getElementsByTagName('img')[0].setAttribute('src',dc.openPic);
    65. tl.getElementsByTagName('img')[0].setAttribute('alt',dc.openAlt);
    66. o.setAttribute('title',dc.openAlt);
    67. dc.currentOpen=o;
    68. }
    69. dc.addEvent(o,'click',dc.addCollapse,false);
    70. /* Doesn't work with Safari
    71. dc.addEvent(o,'mouseover',dc.hover,false);
    72. dc.addEvent(o,'mouseout',dc.hover,false);
    73. */
    74. o.insertBefore(tl,o.firstChild);
    75. dc.addEvent(tl,'click',dc.addCollapse,false);
    76. // Safari hacks
    77. tl.onclick=function(){return false;}
    78. o.onclick=function(){return false;}
    79. },
    80. /* Doesn't work with Safari
    81. hover:function(e){
    82. var o=dc.getTarget(e);
    83. var action=dc.cssjs('check',o,dc.hoverClass)?'remove':'add';
    84. dc.cssjs(action,o,dc.hoverClass)
    85. },
    86. */
    87. addCollapse:function(e){
    88. var action,pic;
    89. // hack to fix safari's redraw bug
    90. // as mentioned on http://en.wikipedia.org/wiki/Wikipedia:Browser_notes#Mac_OS_X
    91. if (self.screenTop && self.screenX){
    92. window.resizeTo(self.outerWidth + 1, self.outerHeight);
    93. window.resizeTo(self.outerWidth - 1, self.outerHeight);
    94. }
    95. if(dc.uniqueCollapse && dc.currentOpen){
    96. dc.currentOpen.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
    97. dc.currentOpen.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
    98. dc.currentOpen.setAttribute('title',dc.closedAlt);
    99. dc.cssjs('swap',dc.currentOpen.tohide,dc.showClass,dc.hideClass);
    100. dc.cssjs('remove',dc.currentOpen,dc.triggeropen);
    101. dc.cssjs('add',dc.currentOpen,dc.trigger);
    102. }
    103. var o=dc.getTarget(e);
    104. if(o.tohide){
    105. if(dc.cssjs('check',o.tohide,dc.hideClass)){
    106. o.getElementsByTagName('img')[0].setAttribute('src',dc.openPic);
    107. o.getElementsByTagName('img')[0].setAttribute('alt',dc.openAlt);
    108. o.setAttribute('title',dc.openAlt);
    109. dc.cssjs('swap',o.tohide,dc.hideClass,dc.showClass);
    110. dc.cssjs('add',o,dc.triggeropen);
    111. dc.cssjs('remove',o,dc.trigger);
    112. }else{
    113. o.getElementsByTagName('img')[0].setAttribute('src',dc.closedPic);
    114. o.getElementsByTagName('img')[0].setAttribute('alt',dc.closedAlt);
    115. o.setAttribute('title',dc.closedAlt);
    116. dc.cssjs('swap',o.tohide,dc.showClass,dc.hideClass);
    117. dc.cssjs('remove',o,dc.triggeropen);
    118. dc.cssjs('add',o,dc.trigger);
    119. }
    120. dc.currentOpen=o;
    121. dc.cancelClick(e);
    122. //document.getElementById('debug').innerHTML=o.tohide.className;
    123. }
    124. else{
    125. dc.cancelClick(e);
    126. }
    127. },
    128. /* helper methods */
    129. getTarget:function(e){
    130. var target = window.event ? window.event.srcElement : e ? e.target : null;
    131. if (!target){return false;}
    132. while(!target.tohide && target.nodeName.toLowerCase()!='body')
    133. {
    134. target=target.parentNode;
    135. }
    136. // if (target.nodeName.toLowerCase() != 'a'){target = target.parentNode;} Safari fix not needed here
    137. return target;
    138. },
    139. cancelClick:function(e){
    140. if (window.event){
    141. window.event.cancelBubble = true;
    142. window.event.returnValue = false;
    143. return;
    144. }
    145. if (e){
    146. e.stopPropagation();
    147. e.preventDefault();
    148. }
    149. },
    150. addEvent: function(elm, evType, fn, useCapture){
    151. if (elm.addEventListener)
    152. {
    153. elm.addEventListener(evType, fn, useCapture);
    154. return true;
    155. } else if (elm.attachEvent) {
    156. var r = elm.attachEvent('on' + evType, fn);
    157. return r;
    158. } else {
    159. elm['on' + evType] = fn;
    160. }
    161. },
    162. cssjs:function(a,o,c1,c2){
    163. switch (a){
    164. case 'swap':
    165. o.className=!dc.cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);
    166. break;
    167. case 'add':
    168. if(!dc.cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}
    169. break;
    170. case 'remove':
    171. var rep=o.className.match(' '+c1)?' '+c1:c1;
    172. o.className=o.className.replace(rep,'');
    173. break;
    174. case 'check':
    175. return new RegExp("(^|\\s)" + c1 + "(\\s|$)").test(o.className)
    176. break;
    177. }
    178. }
    179. }
    180. dc.addEvent(window, 'load', dc.init, false);
    Alles anzeigen